BEAUTY & WELLNESS · CONTACT FORM TEMPLATE

Barber Shop Booking Form

Walk-ins keep the chairs warm, but bookings keep the day predictable. This form takes appointment requests from your website and Instagram bio link — service, preferred barber, day and time — straight to your phone.

Get free access key Copy the code

500/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>

500

submissions / mo, free

fields, ready to ship

code outputs

60s

from copy to inbox

§ 01Why it mattersthe qualifying-fields argument

Barbering runs on regulars, and regulars want their barber — not just any chair. The booking form needs a barber-preference dropdown alongside service and time, because 'any barber, 2pm' and 'Marcus only, whenever he's free' are different requests with different scheduling logic. A form on the website and in the Instagram bio link captures the after-hours booker (most appointment requests happen when the shop is closed) without paying a per-booking fee to an app marketplace.

No per-booking fees, no competing shops in the app — your clients stay yours.

✦ 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 · barber-shop-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

Link it from Instagram

Most barber discovery happens on Instagram. Put the form's page in your bio link — the same form serves your website and your social traffic, and submissions tell you which source via a hidden field.

Create your form

key=sk_live_••••••••

STEP 02EMBED

Capture service and barber

Service dropdown (cut, skin fade, cut + beard, beard trim, hot towel shave, kids cut), preferred barber, preferred day and time. The notes field catches reference photos and 'same as last time'.

snippethtml

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

STEP 03RECEIVE

Confirm by text

Webhook the request to your phone via SMS or Slack. Reply with a confirmed slot in minutes — speed is the whole pitch against booking apps, and the customer never leaves your brand.

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…25 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 Booksy or Squire?

Booking apps are great until you see the monthly fee and realise your clients are being shown competing shops in the same app. A form on your own site costs nothing, keeps your client list yours, and works for shops that book by text anyway — which is most of them.

02Can clients pick a specific barber?

Yes — the preferred-barber dropdown is built in. Edit the options to your actual roster. 'No preference / first available' should stay as the first option; it keeps the schedule flexible for walk-in-heavy days.

03How do I handle no-shows?

The form captures a phone number, which is your no-show defence: confirm by text, then send a reminder the morning of. Shops that text-confirm see no-show rates drop by half or more versus silent bookings.

04Does this work as a link-in-bio for Instagram and TikTok?

Yes — host the form on a simple page and use that URL in your bio. It loads fast (plain HTML, no app install), which matters when someone's deciding on a fade at 11pm.

✻ ✻ ✻

Ship your barber shop booking form in 60 seconds.

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

Get free access key →Browse all 75 templates →

founders pricing locked in · early access open