# GHL Form Builder — Demo Booking Form Walkthrough

## What We're Building

A demo booking form inside GHL that mirrors the one on hiremy-ai.com/#book-demo. When someone submits, GHL handles everything natively — contact creation, email confirmations, workflow triggers — no external code needed.

---

## Current Setup (Website)

Right now the booking form on hiremy-ai.com works like this:

```
User fills form → /api/book-demo (Vercel) → Resend emails + GHL API contact creation
```

Building the same form inside GHL means you can:
- Embed it on any page or funnel
- Trigger GHL workflows directly (no API calls needed)
- Use GHL's built-in email templates
- Track submissions in the CRM automatically

---

## Step-by-Step: Create the Form in GHL

### Step 1: Go to Forms

1. In your GHL sub-account (Medel's — Cagayan de Oro City)
2. Click **Sites** in the left sidebar
3. Click **Forms** → **+ Create Form**
4. Choose **One Step Form** (keeps it simple)
5. Name it: **"HireMyAI Demo Booking"**

### Step 2: Add Form Fields

Add these 5 fields in order:

| # | Field Type | Label | Required | Notes |
|---|-----------|-------|----------|-------|
| 1 | **Full Name** | Full Name | ✅ Yes | Use the built-in "Full Name" field (maps to Contact first/last name automatically) |
| 2 | **Email** | Work Email | ✅ Yes | Use the built-in "Email" field (maps to Contact email) |
| 3 | **Text Input** | Company | ✅ Yes | Create as **Custom Field** → name it `company` |
| 4 | **Dropdown** | Team Size | ✅ Yes | Create as **Custom Field** → name it `team_size` |
| 5 | **Large Text (Textarea)** | What do you want help with? | ✅ Yes | Create as **Custom Field** → name it `use_case` |

#### Team Size Dropdown Options:
- 1-10
- 11-50
- 51-200
- 200+

### Step 3: Create Custom Fields (if they don't exist)

Before building the form, create these custom fields:

1. Go to **Settings** → **Custom Fields**
2. Click **+ Add Field**
3. Create each:

| Field Name | Field Type | Group |
|-----------|-----------|-------|
| `company` | Single Line Text | Contact |
| `team_size` | Dropdown (options: 1-10, 11-50, 51-200, 200+) | Contact |
| `use_case` | Multi Line Text | Contact |

### Step 4: Style the Form

1. **Form Header:** "Book a Demo"
2. **Sub-header:** "Tell us about your team and we'll reach out"
3. **Button Text:** "Book My Demo"
4. **Button Color:** Use gradient or solid purple (#B44AFF)
5. **Background:** Dark (#0C0A1A) or transparent depending on where it's embedded
6. **Font:** Match your website (sans-serif)

### Step 5: Form Settings

1. **Form Name:** HireMyAI Demo Booking
2. **On Submit:**
   - Show "Thank you" message: *"Thanks! We've received your demo request. Check your email for a confirmation — we'll be in touch within 24 hours. 🎯"*
   - OR redirect to a thank-you page
3. **Tags on Submit:** Add tag `demo-request`
4. **Pipeline:** (Optional) Move to a "Demo Booked" stage in a pipeline

---

## Step-by-Step: Create the Workflow

### Step 6: Create the Automation Workflow

Go to **Automation** → **Workflows** → **+ Create Workflow** → **Start from Scratch**

**Name:** "Demo Booking Follow-Up"

### Trigger

- **Trigger Type:** Form Submitted
- **Form:** HireMyAI Demo Booking
- **Filters:** None (fire for every submission)

### Actions (in order):

#### Action 1: Add Tag
- Tag: `demo-request`
- Tag: `hiremy-ai`

#### Action 2: Send Email — Confirmation to Lead
- **From:** HireMyAI Team <hello@hiremy-ai.com>
- **Subject:** ✓ We received your demo request, {{contact.first_name}}!
- **Body (use GHL email builder):**

```
Hi {{contact.first_name}},

Thanks for reaching out! We've received your demo request and someone from our team will be in touch shortly to schedule a time that works for you.

YOUR SUBMISSION SUMMARY
Company: {{contact.company}}
Team Size: {{contact.team_size}}
Use Case: {{contact.use_case}}

What to expect in your demo:
✓ 30-minute personalized walkthrough
✓ Live demo tailored to your use case
✓ Q&A on your specific challenges
✓ Pricing & next steps

Questions in the meantime? Just reply to this email — we read every one.

Talk soon,
HireMyAI Team

hiremy-ai.com
```

#### Action 3: Internal Notification — Alert to Melanie
- **Type:** Send Internal Notification (or Send Email)
- **To:** melanie.elver28@gmail.com
- **Subject:** 🎯 New Demo Request from {{contact.first_name}} {{contact.last_name}} ({{contact.company}})
- **Body:**

```
NEW DEMO REQUEST

Name: {{contact.first_name}} {{contact.last_name}}
Email: {{contact.email}}
Company: {{contact.company}}
Team Size: {{contact.team_size}}

What they need:
{{contact.use_case}}

⚡ Action: Reply to this email to reach them directly, or find them in the CRM.
```

#### Action 4: (Optional) Move to Pipeline
- **Pipeline:** Sales Pipeline (or create one called "Demo Requests")
- **Stage:** "New Request"

#### Action 5: (Optional) Wait + Follow-Up
- **Wait:** 24 hours
- **Condition:** If no reply / no appointment booked
- **Action:** Send follow-up email:

```
Subject: Quick follow-up on your demo request

Hi {{contact.first_name}},

Just checking in — we received your demo request yesterday. Would you like to pick a time for a quick 30-minute walkthrough?

[Book a Time] → link to your Calendly or GHL calendar

Best,
HireMyAI Team
```

---

## Step-by-Step: Embed the Form

### Option A: Embed on hiremy-ai.com

1. In GHL Forms, click **Embed/Share** on your form
2. Copy the **embed code** (iframe)
3. Replace the current HTML form in `components/final-cta.tsx` with the GHL iframe
4. Style the iframe container to match your site

### Option B: Use in a GHL Funnel

1. Create a funnel page in GHL
2. Drag the form element onto the page
3. Select "HireMyAI Demo Booking"
4. Publish and use the funnel URL

### Option C: Keep Both (Recommended)

Keep the current website form (Resend + API) AND have the GHL form available:
- Website form → for hiremy-ai.com visitors (already working)
- GHL form → for embedding in GHL funnels, landing pages, or sharing direct links

---

## Pipeline Design (Optional but Recommended)

Create a pipeline called **"Demo Requests"**:

| Stage | Description | Auto-move? |
|-------|------------|-----------|
| 📥 New Request | Form just submitted | Yes (on form submit) |
| 📧 Contacted | Team reached out | Manual |
| 📅 Demo Scheduled | Appointment booked | Auto (on calendar booking) |
| ✅ Demo Completed | Demo happened | Manual |
| 🤝 Proposal Sent | Sent pricing/proposal | Manual |
| 🏆 Won | Closed deal | Manual |
| ❌ Lost | Didn't convert | Manual |

---

## Summary

| Component | What It Does |
|-----------|-------------|
| **Form** | Captures name, email, company, team size, use case |
| **Custom Fields** | company, team_size, use_case — stored on the contact |
| **Tags** | `demo-request`, `hiremy-ai` — for filtering |
| **Workflow** | Auto-sends confirmation + lead alert + optional follow-up |
| **Pipeline** | Tracks each demo request through the sales process |
| **Email 1** | Confirmation to the lead (customer-facing) |
| **Email 2** | Alert to Melanie (internal notification) |

---

*Document created by MelAI ⚡ — April 29, 2026 (PHT)*
*For: Melanie Elver / HireMyAI*