Templates/Booking inquiry

Booking inquiry form template

Collect appointment and reservation requests with name, email, phone, preferred date and time, and notes - Tailwind-styled and ready for the FormsReach form API.

Copy the code

Same Tailwind fields as the preview. Paste into your stack, then connect your own submit handler or form backend.

          <form method="post" action="#" class="mx-auto w-full max-w-md space-y-4">
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

<form method="post" action="#" class="mx-auto w-full max-w-md space-y-4">
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

          <form id="booking-inquiry" method="post" action="#" class="mx-auto w-full max-w-md space-y-4">
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

<script>
  document.getElementById('booking-inquiry')?.addEventListener('submit', (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  });
</script>

<form id="booking-inquiry" method="post" action="#" class="mx-auto w-full max-w-md space-y-4">
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

<script>
  document.getElementById('booking-inquiry')?.addEventListener('submit', (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  });
</script>

          function BookingInquiryForm() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  }

  return (
    <form onSubmit={handleSubmit} className="mx-auto w-full max-w-md space-y-4">
      <label htmlFor="name" className="mb-1 block text-sm font-medium text-zinc-700">Name</label>
      <input type="text" id="name" name="name" required placeholder="Jane Doe" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="email" className="mb-1 block text-sm font-medium text-zinc-700">Email</label>
      <input type="email" id="email" name="email" required placeholder="jane@example.com" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="phone" className="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_date" className="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
      <input type="date" id="preferred_date" name="preferred_date" required className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_time" className="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
      <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="message" className="mb-1 block text-sm font-medium text-zinc-700">Details</label>
      <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
      <button type="submit" className="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
        Request booking
      </button>
    </form>
  );
}

function BookingInquiryForm() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  }

  return (
    <form onSubmit={handleSubmit} className="mx-auto w-full max-w-md space-y-4">
      <label htmlFor="name" className="mb-1 block text-sm font-medium text-zinc-700">Name</label>
      <input type="text" id="name" name="name" required placeholder="Jane Doe" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="email" className="mb-1 block text-sm font-medium text-zinc-700">Email</label>
      <input type="email" id="email" name="email" required placeholder="jane@example.com" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="phone" className="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_date" className="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
      <input type="date" id="preferred_date" name="preferred_date" required className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_time" className="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
      <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="message" className="mb-1 block text-sm font-medium text-zinc-700">Details</label>
      <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
      <button type="submit" className="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
        Request booking
      </button>
    </form>
  );
}

          'use client';

export default function BookingInquiryForm() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  }

  return (
    <form onSubmit={handleSubmit} className="mx-auto w-full max-w-md space-y-4">
      <label htmlFor="name" className="mb-1 block text-sm font-medium text-zinc-700">Name</label>
      <input type="text" id="name" name="name" required placeholder="Jane Doe" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="email" className="mb-1 block text-sm font-medium text-zinc-700">Email</label>
      <input type="email" id="email" name="email" required placeholder="jane@example.com" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="phone" className="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_date" className="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
      <input type="date" id="preferred_date" name="preferred_date" required className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_time" className="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
      <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="message" className="mb-1 block text-sm font-medium text-zinc-700">Details</label>
      <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
      <button type="submit" className="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
        Request booking
      </button>
    </form>
  );
}

'use client';

export default function BookingInquiryForm() {
  function handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  }

  return (
    <form onSubmit={handleSubmit} className="mx-auto w-full max-w-md space-y-4">
      <label htmlFor="name" className="mb-1 block text-sm font-medium text-zinc-700">Name</label>
      <input type="text" id="name" name="name" required placeholder="Jane Doe" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="email" className="mb-1 block text-sm font-medium text-zinc-700">Email</label>
      <input type="email" id="email" name="email" required placeholder="jane@example.com" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="phone" className="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_date" className="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
      <input type="date" id="preferred_date" name="preferred_date" required className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="preferred_time" className="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
      <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
      <label htmlFor="message" className="mb-1 block text-sm font-medium text-zinc-700">Details</label>
      <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" className="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
      <button type="submit" className="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
        Request booking
      </button>
    </form>
  );
}

          <script setup>
function onSubmit(event) {
  const data = new FormData(event.currentTarget);
  // Handle form data (fetch, auth API, etc.)
  console.log(Object.fromEntries(data.entries()));
}
</script>

<template>
  <form class="mx-auto w-full max-w-md space-y-4" @submit.prevent="onSubmit">
    <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
    <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
    <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
    <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
    <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
    <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
    <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
    <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
      Request booking
    </button>
  </form>
</template>

<script setup>
function onSubmit(event) {
  const data = new FormData(event.currentTarget);
  // Handle form data (fetch, auth API, etc.)
  console.log(Object.fromEntries(data.entries()));
}
</script>

<template>
  <form class="mx-auto w-full max-w-md space-y-4" @submit.prevent="onSubmit">
    <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
    <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
    <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
    <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
    <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
    <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
    <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
    <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
      Request booking
    </button>
  </form>
</template>

          <script setup>
function onSubmit(event) {
  const data = new FormData(event.currentTarget);
  // Handle form data (fetch, auth API, etc.)
  console.log(Object.fromEntries(data.entries()));
}
</script>

<template>
  <form class="mx-auto w-full max-w-md space-y-4" @submit.prevent="onSubmit">
    <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
    <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
    <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
    <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
    <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
    <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
    <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
    <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
      Request booking
    </button>
  </form>
</template>

<script setup>
function onSubmit(event) {
  const data = new FormData(event.currentTarget);
  // Handle form data (fetch, auth API, etc.)
  console.log(Object.fromEntries(data.entries()));
}
</script>

<template>
  <form class="mx-auto w-full max-w-md space-y-4" @submit.prevent="onSubmit">
    <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
    <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
    <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
    <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
    <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
    <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
    <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
    <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
    <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">
      Request booking
    </button>
  </form>
</template>

          ---
// src/components/BookingInquiryForm.astro
---
<form method="post" action="#" class="mx-auto w-full max-w-md space-y-4">
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

---
// src/components/BookingInquiryForm.astro
---
<form method="post" action="#" class="mx-auto w-full max-w-md space-y-4">
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

          <script>
  function onSubmit(event) {
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  }
</script>

<form method="post" class="mx-auto w-full max-w-md space-y-4" on:submit|preventDefault={onSubmit}>
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

<script>
  function onSubmit(event) {
    const data = new FormData(event.currentTarget);
    // Handle form data (fetch, auth API, etc.)
    console.log(Object.fromEntries(data.entries()));
  }
</script>

<form method="post" class="mx-auto w-full max-w-md space-y-4" on:submit|preventDefault={onSubmit}>
  <label for="name" class="mb-1 block text-sm font-medium text-zinc-700">Name</label>
  <input type="text" id="name" name="name" required placeholder="Jane Doe" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="email" class="mb-1 block text-sm font-medium text-zinc-700">Email</label>
  <input type="email" id="email" name="email" required placeholder="jane@example.com" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="phone" class="mb-1 block text-sm font-medium text-zinc-700">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="+1 555 0100" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_date" class="mb-1 block text-sm font-medium text-zinc-700">Preferred date</label>
  <input type="date" id="preferred_date" name="preferred_date" required class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="preferred_time" class="mb-1 block text-sm font-medium text-zinc-700">Preferred time</label>
  <input type="text" id="preferred_time" name="preferred_time" placeholder="Morning or 2:00 PM" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20" />
  <label for="message" class="mb-1 block text-sm font-medium text-zinc-700">Details</label>
  <textarea id="message" name="message" rows="3" placeholder="Service, party size, notes…" class="w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"></textarea>
  <button type="submit" class="mt-1 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:opacity-60">Request booking</button>
</form>

When to use this booking inquiry template

Ideal for salons, clinics, consultants, coaches, and service businesses that confirm appointments by email or chat. Visitors propose a time; you reply when ready.

How FormsReach fits

Every inquiry is an accepted submission against your credit pool. Deliver by email for a written trail, or WhatsApp on Pro/Agency when speed-to-reply matters.

Next steps

Contact form template for simpler enquiries
HTML integration
Pricing and credits

FAQ

Quick answers about fields, styling, and wiring this template to your own backend.

Does this book calendar slots automatically?+

No. It is an inquiry form so you receive the request and confirm manually (or via your own workflow). Pair webhooks with a scheduling tool if you need automation.

Why include preferred date and time as plain fields?+

They travel as named form fields in the delivery message. You can swap types or add a timezone field without changing the FormsReach endpoint.

Which plans support WhatsApp booking alerts?+

WhatsApp delivery is available on Pro and Agency. Free and Starter cover email, webhooks, and workflow rules.

Ready to receive form leads?

Create a free API key. Upgrade when you need more monthly credits.

Get started →All templates