BEAUTY & WELLNESS · CONTACT FORM TEMPLATE

Salon & Barber Booking Form

A salon's booking software (Vagaro, Booksy, Square) costs $25-50/month. For a small shop or a single-stylist site, a contact form with stylist, service, and date works for free.

Get free access key Copy the code

1,000/mo free·no card·works on any host

form.htmlhtml53 lines

01<form action="https://splitforms.com/api/submit" method="POST">
02  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
03  <input type="hidden" name="subject" value="New salon booking">
04 
05  <label for="name">Full name *</label>
06  <input id="name" type="text" name="name" placeholder="Sasha Vorona" required>
07  <label for="email">Email *</label>
08  <input id="email" type="email" name="email" placeholder="sasha@example.com" required>
09  <label for="phone">Phone *</label>
10  <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required>
11  <label for="service">Service *</label>
12  <select id="service" name="service" required>
13    <option value="">Choose…</option>
14    <option>Haircut</option>
15    <option>Cut + color</option>
16    <option>Color only</option>
17    <option>Highlights / balayage</option>
18    <option>Blowout / styling</option>
19    <option>Treatment</option>
20    <option>Beard trim</option>
21    <option>Kids cut</option>
22  </select>
23  <label for="stylist">Preferred stylist</label>
24  <select id="stylist" name="stylist">
25    <option value="">Choose…</option>
26    <option>No preference</option>
27    <option>Stylist A</option>
28    <option>Stylist B</option>
29    <option>Stylist C</option>
30  </select>
31  <label for="preferred_date">Preferred date *</label>
32  <input id="preferred_date" type="date" name="preferred_date" required>
33  <label for="preferred_time">Preferred time</label>
34  <select id="preferred_time" name="preferred_time">
35    <option value="">Choose…</option>
36    <option>Morning</option>
37    <option>Midday</option>
38    <option>Afternoon</option>
39    <option>Evening</option>
40    <option>Weekend</option>
41  </select>
42  <label for="notes">Notes</label>
43  <textarea id="notes" name="notes" placeholder="Hair length, recent color, allergies, inspiration photos…"></textarea>
44 
45  <!-- honeypot — bots fill every field -->
46  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
47 
48  <button type="submit">Send</button>
49</form>
50 
51<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
52  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
53</p>

1,000

submissions / mo, free

fields, ready to ship

code outputs

60s

from copy to inbox

Salon & Barber Booking Form — example splitforms template with submissions inbox

§ 01Why it mattersthe qualifying-fields argument

Salons live and die on rebookings, but a single-chair shop or a new stylist building book often can't justify $50/month for Vagaro. A contact form with stylist, service, and preferred date captures the booking request, the stylist confirms via text within the hour, and the appointment goes on the calendar. For shops with established booking software, the form is still useful for new clients who don't have an account — it's the on-ramp before they're in the system.

✦ at a glance

→Salon / barber appointment · 8 fields
→HTML, JS, React, PHP, cURL outputs
→One POST endpoint, no SDK
→Honeypot + classifier, no CAPTCHA

§ 02Live previewinteractive · sandboxed · no key required

See exactly what your visitors see — and you’ll receive.

Left: the rendered form, fully interactive in a sandboxed iframe. Right: the email and dashboard view that lands the moment a visitor submits.

preview · salon-contact-formlocalhost:3000

✦ what you’ll see in your inbox

Every submission becomes an email plus a dashboard row. The fields below are the exact payload your form will send. Reply-to is wired to the visitor’s email so hitting reply goes back to them.

dashboard · new submission14ms · 200 OK

SUBJECT · New salon booking

Full name: Maya Iyer
Email: maya@studio71.co
Phone: +1 415 555 0142
Service: Haircut
Preferred stylist: No preference
Preferred date: 2026-05-15
Preferred time: Morning
Notes: Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.

Iframe is sandboxed — submit doesn’t actually fire. Get your access key to wire it up live.

§ 03Three steps3 steps · ~60 seconds

Generate, embed, receive.

Three actions stand between you and your first lead. None of them require a backend, a database, or a CAPTCHA library.

STEP 01GENERATE

Capture service and stylist

Required: service (cut / colour / highlights / balayage / treatment), stylist (if multi-chair), preferred date and time window. Optional: hair length and last service date for colour clients.

Create your form

key=sk_live_••••••••

STEP 02EMBED

Confirm via SMS

Webhook to Twilio — the stylist gets a text with the request and replies 'yes' or suggests an alternate. Customer's confirmation arrives via SMS too.

snippethtml

<form action="https://splitforms.com/api/submit" method="POST">
  …
</form>

STEP 03RECEIVE

Block-book regulars from the same form

Returning clients fill the same form with notes ('the usual'). Stylist recognises the name and pulls their card. Cleaner than DMs on Instagram.

inbox · 1 newjust now

FROM contact@yoursite.com

New salon booking

Maya Iyer maya@studio71.co

Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.

§ 04Copy & ship5 languages · same endpoint

Five outputs. One backend.

HTML by default. Click open the language you ship in — every variant POSTs to the same /api/submit endpoint.

01HTMLform.html53 lines

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New salon booking">

  <label for="name">Full name *</label>
  <input id="name" type="text" name="name" placeholder="Sasha Vorona" required>
  <label for="email">Email *</label>
  <input id="email" type="email" name="email" placeholder="sasha@example.com" required>
  <label for="phone">Phone *</label>
  <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required>
  <label for="service">Service *</label>
  <select id="service" name="service" required>
    <option value="">Choose…</option>
    <option>Haircut</option>
    <option>Cut + color</option>
    <option>Color only</option>
    <option>Highlights / balayage</option>
    <option>Blowout / styling</option>
    <option>Treatment</option>
    <option>Beard trim</option>
    <option>Kids cut</option>
  </select>
  <label for="stylist">Preferred stylist</label>
  <select id="stylist" name="stylist">
    <option value="">Choose…</option>
    <option>No preference</option>
    <option>Stylist A</option>
    <option>Stylist B</option>
    <option>Stylist C</option>
  </select>
  <label for="preferred_date">Preferred date *</label>
  <input id="preferred_date" type="date" name="preferred_date" required>
  <label for="preferred_time">Preferred time</label>
  <select id="preferred_time" name="preferred_time">
    <option value="">Choose…</option>
    <option>Morning</option>
    <option>Midday</option>
    <option>Afternoon</option>
    <option>Evening</option>
    <option>Weekend</option>
  </select>
  <label for="notes">Notes</label>
  <textarea id="notes" name="notes" placeholder="Hair length, recent color, allergies, inspiration photos…"></textarea>

  <!-- honeypot — bots fill every field -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send</button>
</form>

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

02JavaScriptform.js69 lines

<form id="lf-form">
  <label for="name">Full name *</label>
  <input id="name" type="text" name="name" placeholder="Sasha Vorona" required>
  <label for="email">Email *</label>
  <input id="email" type="email" name="email" placeholder="sasha@example.com" required>
  <label for="phone">Phone *</label>
  <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required>
  <label for="service">Service *</label>
  <select id="service" name="service" required>
    <option value="">Choose…</option>
    <option>Haircut</option>
    <option>Cut + color</option>
    <option>Color only</option>
    <option>Highlights / balayage</option>
    <option>Blowout / styling</option>
    <option>Treatment</option>
    <option>Beard trim</option>
    <option>Kids cut</option>
  </select>
  <label for="stylist">Preferred stylist</label>
  <select id="stylist" name="stylist">
    <option value="">Choose…</option>
    <option>No preference</option>
    <option>Stylist A</option>
    <option>Stylist B</option>
    <option>Stylist C</option>
  </select>
  <label for="preferred_date">Preferred date *</label>
  <input id="preferred_date" type="date" name="preferred_date" required>
  <label for="preferred_time">Preferred time</label>
  <select id="preferred_time" name="preferred_time">
    <option value="">Choose…</option>
    <option>Morning</option>
    <option>Midday</option>
    <option>Afternoon</option>
    <option>Evening</option>
    <option>Weekend</option>
  </select>
  <label for="notes">Notes</label>
  <textarea id="notes" name="notes" placeholder="Hair length, recent color, allergies, inspiration photos…"></textarea>
  <button type="submit">Send</button>
</form>

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

<script>
  document.getElementById('lf-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New salon booking');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success) {
      e.target.reset();
      alert('Sent!');
    } else {
      alert('Error: ' + (json.message || 'Try again'));
    }
  });
</script>

03React / Next.jsForm.tsx84 lines

'use client';

import { useState, type FormEvent } from 'react';

export default function SalonBookingForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    const data = new FormData(e.currentTarget);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New salon booking');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) e.currentTarget.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <>
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Full name *</label>
      <input id="name" type="text" name="name" placeholder="Sasha Vorona" required />
      <label htmlFor="email">Email *</label>
      <input id="email" type="email" name="email" placeholder="sasha@example.com" required />
      <label htmlFor="phone">Phone *</label>
      <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required />
      <label htmlFor="service">Service *</label>
      <select id="service" name="service" required>
        <option value="">Choose…</option>
        <option>Haircut</option>
        <option>Cut + color</option>
        <option>Color only</option>
        <option>Highlights / balayage</option>
        <option>Blowout / styling</option>
        <option>Treatment</option>
        <option>Beard trim</option>
        <option>Kids cut</option>
      </select>
      <label htmlFor="stylist">Preferred stylist</label>
      <select id="stylist" name="stylist">
        <option value="">Choose…</option>
        <option>No preference</option>
        <option>Stylist A</option>
        <option>Stylist B</option>
        <option>Stylist C</option>
      </select>
      <label htmlFor="preferred_date">Preferred date *</label>
      <input id="preferred_date" type="date" name="preferred_date" required />
      <label htmlFor="preferred_time">Preferred time</label>
      <select id="preferred_time" name="preferred_time">
        <option value="">Choose…</option>
        <option>Morning</option>
        <option>Midday</option>
        <option>Afternoon</option>
        <option>Evening</option>
        <option>Weekend</option>
      </select>
      <label htmlFor="notes">Notes</label>
      <textarea id="notes" name="notes" placeholder="Hair length, recent color, allergies, inspiration photos…" />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>

      <p style={{ marginTop: 12, fontSize: 11, color: '#888', textAlign: 'right' }}>
        Powered by <a href="https://splitforms.com" target="_blank" rel="noopener" style={{ color: '#888', textDecoration: 'none' }}>splitforms</a>
      </p>
    </>
  );
}

04PHPsubmit.php28 lines

<?php
// Drop into a PHP page. Receives a form POST and proxies it to splitforms.com.
// Useful when you want to add server-side validation or rate limiting.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $allowed = ['name', 'email', 'phone', 'service', 'stylist', 'preferred_date', 'preferred_time', 'notes'];
    $payload = ['access_key' => 'YOUR_ACCESS_KEY'];
    $payload['subject'] = 'New salon booking';

    foreach ($allowed as $f) {
        if (isset($_POST[$f])) $payload[$f] = $_POST[$f];
    }

    $ch = curl_init('https://splitforms.com/api/submit');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($payload));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Accept: application/json']);
    $response = curl_exec($ch);
    $status   = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    header('Content-Type: application/json');
    http_response_code($status);
    echo $response;
    exit;
}
?>

05cURLtest.sh12 lines

curl -X POST https://splitforms.com/api/submit \
  -H "Accept: application/json" \
  -d "access_key=YOUR_ACCESS_KEY" \
  -d "subject=New salon booking" \
  -d "name=Jane Builder" \
  -d "email=jane@example.com" \
  -d "phone=+15555555555" \
  -d "service=Haircut" \
  -d "stylist=No preference" \
  -d "preferred_date=2026-05-15" \
  -d "preferred_time=Morning" \
  -d "notes=Hello from cURL"

Replace YOUR_ACCESS_KEY with the key from your dashboard. That’s the only edit.

§ 04bUse this template with…17 frameworks · same backend

One template. Every framework.

The same field set works on every framework splitforms supports. HTML, React, Next.js, Vue, Astro, Hugo, WordPress — same POST, same backend.

§ 06FAQ4 answered

Things people ask before they ship.

Direct answers, no marketing fluff. Missing one? Email hello@splitforms.com.

01Why not just use Vagaro or Booksy?

If you're full and need real scheduling, use Vagaro. If you're new, a single-chair shop, or just hate the $50/month, the form-to-text workflow handles 80% of bookings. Many stylists run both — Vagaro for repeat clients, the form for new-website inquiries.

02Can I show stylist availability on the form?

Not without an integration — calendar sync needs Vagaro / Square / Cal.com. The simpler pattern is 'tell us your preferred time, we'll confirm or suggest the next slot' which works for free.

03What about colour-correction inquiries that need photos?

Use the file-upload variant — Pro feature. Customers attach a hair photo and the goal photo. Stylist quotes accurately before the appointment, no surprise upcharges.

04Is this DM-from-Instagram replacement?

Yes, exactly. Most stylists currently book via Instagram DM, which is chaotic and unsearchable. A form on a one-page site with the same fields lives forever and shows up in Google.

✻ ✻ ✻

Ship your salon & barber booking form in 60 seconds.

1,000 free submissions per month. No credit card. Copy the snippet, paste your access key, watch leads land in your inbox.

Get free access key →Browse all 60 templates →

v0.1 · founders pricing locked in · early access open