Quote & Booking-Ready Website -Full Case Breakdown

Overview

Golden Rose Nail Studio was conceived as a prototype for a beauty business that needed a modern and easy-to-manage web presence — without the complexity of a full e-commerce platform.
The goal was to let customers explore treatments and beauty products, request personalized quotes, and optionally book appointments, all through a clean, mobile-first interface.

First Scr gold

Objectives

Create a smooth, user-friendly experience for browsing nail and spa treatments.

Build a quote request workflow to replace an overcomplicated shop checkout.

Integrate a booking system (Amelia) for treatment scheduling.

Keep everything lightweight, fast, and easy to manage by the owner.

Quote Form

Approach

The project was built on GeneratePress for its clean structure, performance, and full design control.
Custom post types for “Treatments” and “Products” were created using ACF (Advanced Custom Fields) — allowing the site owner to easily manage and update offerings from the WordPress dashboard without touching code.

Each treatment was represented with visuals, a short description, and dynamic fields for price, duration, and booking options.
For product browsing, a custom quote-building flow was developed — allowing visitors to select items and quantities, view a live summary, and submit a personalized request.

The Quote Flow

Instead of forcing users into a checkout, the site guides them through a calm, app-like interface:

Visitors add desired products to a “Quote List”.

The system dynamically builds a preview of selected items, quantities, and totals — all stored in the browser session.

The visitor fills in a short form with their name and email, then sends the quote request.

On submission, a draft “Quote” post is automatically created in WordPress, with all product details, prices, and customer info stored as metadata.

A well-formatted HTML email is sent both to the salon and to the client for confirmation.

quote request mail example

No external plugin was required — the logic was built in native PHP and JavaScript, fully integrated with Contact Form 7.

Booking Integration

An Amelia booking module was embedded using a shortcode for treatment reservations.
This allowed clients to book appointments directly from the “Treatments” page with real-time calendar availability.

1 Desktop and 3 mobiles illustration for Booking Integration

Design

Typography and colors were inspired by premium nail spa branding, using Aztec Gold tones with generous spacing for a feeling of calm and trust.
Each UI component — quote cards, totals, form inputs — was styled for visual consistency, including the embedded booking interface.

Global colors ROSE

Technical Highlights

Theme: GeneratePress (custom child theme)

Content structure: ACF custom post types for Treatments & Products

Forms: Contact Form 7 with PHP & JS logic for dynamic quote generation

Front-end: Vanilla JS, sessionStorage for live product updates

Email: Automatically generated HTML email templates with totals and images

Performance: <1s load time on standard hosting, no external frameworks

Challenges & Solutions

ChallengeSolution
Integrating dynamic quote logic inside CF7 without third-party pluginsBuilt a custom CF7 form tag and handler in PHP, with dynamic front-end rendering
Managing client-side totals and quantitiesUsed sessionStorage to persist user selections across page reloads
Maintaining simplicity for the site ownerLeveraged ACF fields for all product/treatment management

Tags

GeneratePress · WordPress Custom Development · ACF · Contact Form 7 · Custom Quote Flow · UX Design · PHP & JS Integration

Live Demo & Technical Notes

Live working website → https://goldenrosenails.com

**This project was created as a realistic concept to demonstrate a practical website solution for small beauty businesses.