# 📋 GHL Assignment: Create a Pre-Booking Form for Your Calendar
## Complete Step-by-Step Walkthrough

**Design Reference:** SParadise MedSpa Theme (soft pastel, lavender/cream, glass-morphism)
**Created by:** MelAI ⚡ | April 28, 2026

---

## 📐 What You're Building

A styled pre-booking form inside GHL that:
- Collects client info BEFORE they book on your calendar
- Has 7 required fields split into 2 logical sections
- Matches the SParadise aesthetic (soft pastel, elegant, feminine)
- Is attached to your GHL calendar so it appears before booking

---

## STEP 1 — Create the Form

1. Log into your GHL Sub-Account
2. Go to **Sites** → **Forms** (left sidebar)
3. Click **+ New Form**
4. Choose **Start from Scratch** (don't use templates)
5. Name it: `Pre-Booking Consultation Form`

---

## STEP 2 — Add Your Fields

You need exactly **7 fields**. Add them in this order:

### Section 1: "Your Information"

#### Field 1: Full Name
- **Type:** Standard → Full Name (or use two fields: First Name + Last Name)
- **Label:** "Full Name" (or "First Name" / "Last Name")
- **Placeholder:** "Your full name"
- **Required:** ✅ Yes

#### Field 2: Email Address
- **Type:** Standard → Email
- **Label:** "Email Address"
- **Placeholder:** "you@example.com"
- **Required:** ✅ Yes

#### Field 3: Phone Number
- **Type:** Standard → Phone
- **Label:** "Phone Number"
- **Placeholder:** "+63 9XX XXX XXXX"
- **Required:** ✅ Yes

#### Field 4: Website
- **Type:** Custom Field → Single Line Text
- **Label:** "Website"
- **Placeholder:** "https://yourwebsite.com"
- **Required:** ✅ Yes
- **Note:** If you don't have a "Website" custom field yet, you'll need to create one first:
  - Go to **Settings → Custom Fields → + Add Field**
  - Name: "Website"
  - Type: Single Line
  - Save, then return to your form and add it

### Section 2: "About Your Business"

#### Field 5: Your Niche
- **Type:** Custom Field → Dropdown
- **Label:** "Your Niche"
- **Placeholder:** "Select your niche…"
- **Required:** ✅ Yes
- **Dropdown Options (add these):**
  - Beauty & Aesthetics
  - Health & Wellness
  - Fitness & Coaching
  - Real Estate
  - E-commerce
  - Agency / Marketing
  - Finance & Consulting
  - Other
- **Note:** Customize these options to match YOUR business. These are examples.

#### Field 6: What Do You Need Help With?
- **Type:** Custom Field → Multi Line Text (Textarea)
- **Label:** "What do you need help with?"
- **Placeholder:** "Describe your biggest challenge or goal — the more detail, the better…"
- **Required:** ✅ Yes

#### Field 7: Where Did You Hear About Me?
- **Type:** Custom Field → Dropdown
- **Label:** "Where did you hear about me?"
- **Placeholder:** "Select one…"
- **Required:** ✅ Yes
- **Dropdown Options (add these):**
  - Instagram
  - Facebook
  - TikTok
  - Google Search
  - Referral / Friend
  - LinkedIn
  - Other

---

## STEP 3 — Style the Form (SParadise Theme)

In the form builder, click on **Styles** or the **Theme/Design** tab. Apply these settings:

### Color Palette

| Element | Hex Code | What It Looks Like |
|---|---|---|
| Background | `#FFF5F0` | Warm cream |
| Card/Form Background | `#FFFFFF` | Clean white |
| Headline Text | `#2D2A3E` | Deep plum/dark purple |
| Label Text | `#7A7088` | Muted purple-grey |
| Placeholder Text | `#BDB5CC` | Light lavender |
| Input Border | `#E8E0EE` | Soft lavender border |
| Button Background | `#C4A8D4` | Lavender purple |
| Button Text | `#FFFFFF` | White |
| Accent Color | `#9B8AB8` | Medium purple |

### Typography
- **Headings:** Use the most elegant serif font available in GHL (closest to Playfair Display)
- **Body/Labels:** Use a clean sans-serif (closest to Inter)
- **If GHL has Google Fonts:** Select Playfair Display for headings, Inter for body

### Button Styling
- **Background:** `#C4A8D4` (or gradient from `#C4A8D4` to `#D4B8E0` if supported)
- **Text Color:** White
- **Border Radius:** Maximum available (aim for pill shape — 60px)
- **Button Text:** "Secure My Consultation Spot →"
- **Shadow:** Soft shadow if available

### Input Field Styling
- **Border Radius:** 12px (rounded corners)
- **Border Color:** `#E8E0EE`
- **Background:** White `#FFFFFF`
- **Padding:** Comfortable spacing (not cramped)

### Layout
- **Single column** — don't stack fields side by side (cleaner, more luxurious)
- **Generous spacing** between fields
- **Center-aligned** header text

---

## STEP 4 — Add Header Content

At the top of your form, add a **Header/Title element:**

**Headline:** Book Your Discovery Session
**Subtitle:** Tell us a little about yourself so we can make the most of your consultation.

If GHL allows you to add text below the submit button, add these trust signals:
- ✦ No commitment required
- ✦ 30-minute session
- ✦ 100% confidential

---

## STEP 5 — Configure Form Settings

1. **Form Name:** Pre-Booking Consultation Form
2. **Thank You Message / Redirect:**
   - Option A: Show a thank you message: "You're all set! Check your email for confirmation."
   - Option B: Redirect to a thank you page URL
3. **Notifications:**
   - Enable email notification to yourself when a form is submitted
4. **Facebook Pixel / Tracking** (optional):
   - Add your pixel if you want to track form submissions

---

## STEP 6 — Attach Form to Your Calendar

This is the KEY STEP that makes it a "pre-booking" form.

1. Go to **Calendars** (left sidebar)
2. Select your calendar (or create one if you haven't yet)
3. Click on the **Forms** tab within the calendar settings
4. Select your `Pre-Booking Consultation Form` from the dropdown
5. **Save**

Now when someone goes to book on your calendar, they MUST fill out this form first → then they see the available time slots.

---

## STEP 7 — Test Everything

### Test Checklist (do ALL of these):

1. **Open the live form link** in an incognito/private browser window
2. **Try submitting with empty fields** — it should block you (required field validation)
3. **Fill out all fields and submit** — it should go through
4. **Check GHL → Contacts** — a new contact should appear with all the form data
5. **Check the calendar flow** — after form submission, the calendar booking should appear
6. **Check notifications** — did you get an email notification of the submission?
7. **Test on mobile** — open the link on your phone, make sure it looks good

### What to verify:
- [ ] All 7 fields are visible and properly labeled
- [ ] All fields are marked as required (can't submit without them)
- [ ] Dropdown options work and display correctly
- [ ] Textarea allows multi-line input
- [ ] Submit button is clearly visible and styled
- [ ] Form creates a contact in GHL upon submission
- [ ] Form is attached to calendar (booking appears after form)
- [ ] Colors match the SParadise theme
- [ ] Mobile responsive — looks good on a phone

---

## STEP 8 — Get Your Submission-Ready Link

1. In the form builder → click **Share** or **Integrate**
2. Copy the **Standalone Form Link**
3. Test it one final time in incognito
4. This is the link you submit for your assignment

---

## ❌ Common Mistakes to Avoid

1. **Form not attached to calendar** — The form works alone, but for this assignment it MUST be connected to a calendar. Otherwise it's just a contact form, not a "pre-booking" form.

2. **Fields not marked required** — If someone can skip fields, the assignment fails validation. Every field must be required.

3. **Using the GHL editor preview instead of the live link** — Always test the actual published URL, not the in-editor preview.

4. **No custom fields created** — If you try to add a "Niche" dropdown and it doesn't exist yet, you need to create the custom field first under Settings → Custom Fields.

5. **Ugly default styling** — Don't leave it as the default GHL white form. Apply the SParadise colors for a polished, client-ready look.

6. **Button text says "Submit"** — Change it to something client-friendly like "Secure My Consultation Spot →" or "Book My Session →"

---

## 🎨 Quick Color Reference Card

Copy-paste these hex codes when styling:

```
Background:       #FFF5F0
Card:             #FFFFFF
Headline text:    #2D2A3E
Label text:       #7A7088
Placeholder:      #BDB5CC
Input borders:    #E8E0EE
Button:           #C4A8D4
Button hover:     #D4B8E0
Button text:      #FFFFFF
Accent:           #9B8AB8
```

---

## 📱 Mobile Optimization Tips

- Keep single-column layout (no side-by-side fields on mobile)
- Make the submit button full-width on mobile
- Ensure text is readable without zooming (min 16px font)
- Test on both iPhone and Android if possible

---

## ✅ Final Submission Checklist

Before you submit this assignment, confirm:

- [ ] Form has exactly 7 fields (name, email, phone, website, niche, help needed, referral source)
- [ ] All fields are required
- [ ] Form is styled (not default GHL styling)
- [ ] Form is attached to your GHL calendar
- [ ] Live link works in incognito browser
- [ ] Test submission creates a contact in GHL
- [ ] Calendar booking appears after form submission
- [ ] Form looks good on mobile
- [ ] You have the shareable form link ready

---

*Walkthrough by MelAI ⚡ | SParadise Design Reference | April 2026*