# Put a booking form on your website

> Build a booking form in Settings → Online booking, with your own questions and service area, then add it to your Squarespace, Wix, WordPress, GoDaddy or Google Sites website. Each form sent comes into Requests, on the client you already have or a new lead.

Every booking form in **Settings → Online booking** has its own link. You can put the form right on a page of your website, or add a button there that opens the link. Either way, each form someone sends comes in under **Requests** as a new request, on the client you already have or a new lead client (see [When an existing client uses the form](#when-an-existing-client-uses-the-form)).

:::tip[Already have a form on your website?]
Keep it, and point it at Crewtavo with [Website Forms](https://crewtavo.com/docs/connections/website-forms/), the way Formspree works. Each message comes in under **Requests** and to your inbox.
:::

## Build a form

Owners, and admins and office staff whose role includes **Price list, checklists, crews and booking forms**, can build and change forms.

1. Open **Settings → Online booking** and choose **New form** (or **Create a form**, before you have one).
2. Give it a **Form name**, like "Request a quote" or "Free lawn estimate". It's the heading on the form, and the title of every request it brings in.
3. Pick the **Type**: **Request form**, **Book an estimate** or **Book a service**. The type is a label on the form's card, to tell your forms apart. Every type works the same way: people send a request, and you book the visit from it. Nobody picks a time on the form.
4. Under **Link**, type the end of the form's address, or leave it empty to make it from the name. The full address shows under the box. If another of your forms has it, you'll see "Another form uses this link".
5. Under **Service area ZIP / Postal codes**, list the ZIP or postal codes you serve, separated by commas (like "24151, 24065, 24184"). A code covers every one that starts with it, like M5V for M5V 2T6. "Leave empty to accept any area."
6. Set up the **Questions** (below).
7. Choose **Create form**.

The form is live straight away. Its card shows **Live**, its type, how many questions it has, how many service areas it has (or "any area"), how many "requests in the last 30 days" it brought in, and its link, with **Copy link**, **Open** and **Embed**.

### Questions

"Name, email, phone and address are always asked", so you don't add those. People have to give an email or a phone number, and the address for the work. A new form starts with one question, "What do you need done?".

For each question, type it in the box and pick its answer type:

| Answer type | What people do |
| --- | --- |
| **Short answer** | Type a line. |
| **Paragraph** | Type as much as they like. |
| **Number** | Type a number, like the number of trees. |
| **Yes / no** | Tap **Yes** or **No**. |
| **Pick one** | Tap one of your options. Type the options in the box beside it, separated by commas. |
| **Pick any** | Tap as many of your options as apply. |
| **Files (plans, PDFs)** | Add files, like a site plan. They go on the request under **Plans and files**. See [Upload and manage plans for a job](https://crewtavo.com/docs/jobs/plans-and-files/#let-clients-send-plans-with-a-request). |
| **Photos** | Add pictures only. |

Tick **Required** for a question they must answer. The arrows move a question up or down, and the trash button removes it. **Add question** adds another, up to 30.

The answers show on the request under **What they asked for**, by question.

### Change, turn off or delete a form

Open the form's **⋯** menu:

- **Edit form** opens it as you set it up. Choose **Save form**. Your website shows the change right away.
- **Turn off** stops the form taking requests ("Form turned off"), and its card says **Off**. People who open it see "This form isn't available". **Turn on** brings it back.
- **Delete form**: "The link stops working. Requests it already brought in are kept."

## Promo codes on the form

Every form has a **Have a promo code?** button above **Send request**. People choose it, type the code and choose **Apply**. If the code checks out, the form shows it with what it gives ("… It'll be applied to your quote."), and **Remove** takes it off. If it doesn't, they see why, and can send the request without it.

To fill a code in for people, add `?promo=` and the code to the end of the form's link, like `…/book/your-business/request-a-quote?promo=SPRING10`, and use that link in an email or ad.

The code shows on the request under **Promo code**. It isn't taken off anything yet: when you choose **Create quote**, the quote says "The client entered … when they booked." Choose **Apply** there to put it on. See [Create and send a quote](https://crewtavo.com/docs/sales/quotes/) and, for making codes, [Marketing: campaigns and promo codes](https://crewtavo.com/docs/clients/marketing/#promo-codes).

## Get the code

1. Open **Settings → Online booking**.
2. On the form's card, choose **Embed**.
3. Choose **Copy code**.

The same window has the steps for your website builder: pick it under **Your website is on**.

On your website, the form fits itself to the page. It grows and shrinks with its questions, so there's no box to size, and it leaves out your business name at the top, since your website already shows it.

:::tip
Changing the form later (its questions or **Service area ZIP / Postal codes**) doesn't need new code: your website always shows the form as it is in Crewtavo. Only changing its **Link** does, since that changes the form's address.
:::

## Add it to your website

### Squarespace

1. Edit the page. Where the form should go, click **Add block** (or **+**), then **Code**.
2. Click the pencil on the new block and paste the code over what's in it. Leave **Display Source** off.
3. Save and publish.

While you're signed in to Squarespace, it may not show the form. Open the page in a private window to see it.

:::note
Code blocks that add a form like this need Squarespace's Core, Plus or Advanced plan (or Business or Commerce on older plans). On other plans, [link a button to the form](#or-link-a-button-to-it) instead.
:::

### Wix

1. In the Wix Editor, click **Add Elements**, then **Embed Code**, then **Embed HTML**.
2. Click the new box, then **Enter Code**. Paste the code and click **Apply**.
3. Drag the box's bottom edge down until the whole form shows. Wix keeps the box at the size you give it.
4. Publish.

### WordPress

1. Edit the page. Click **+**, search for **Custom HTML**, and add that block where the form should go.
2. Paste the code into the block.
3. Click **Update** (or **Publish**).

:::note
On WordPress.com, this needs a paid plan with hosting features turned on; the free plan removes the code. WordPress sites hosted anywhere else work as they are.
:::

### GoDaddy

1. In the website editor, hover between two sections and click **+** to add a section. Search for **HTML** and add it.
2. Paste the code into **Custom Code** and click **Done**.
3. Publish.

### Google Sites

1. Click **Insert**, then **Embed**, then the **Embed code** tab.
2. Paste the code, click **Next**, then **Insert**.
3. Drag the box's bottom edge down until the whole form shows, then **Publish**.

### Built by a developer

If your website is code someone wrote, choose **Built by a developer** under **Your website is on** in the **Embed** window, then the framework the site uses.

**Astro:** paste the code into a `.astro` page or component, where the form should go. Astro bundles the script, which is fine. With two forms on a page, the script only needs to be there once. Don't paste it straight into an `.mdx` page, since MDX reads the script's braces as code: put the form in a `.astro` component and use that there.

**Next.js:** the code can't go into JSX as it is, and React won't reliably run a script written into a page, so the **Embed** window gives you a component instead. Choose **Next.js**, then **Copy component**. Save it as `components/BookingForm.tsx` (or `.jsx`) and render `<BookingForm />` where the form should go. It works in the App Router (as a server component) and the Pages Router. It looks like this, with your form's link and name filled in:

```tsx
import Script from "next/script";

export function BookingForm() {
  return (
    <>
      <iframe
        src="https://crm.yourbusiness.com/book/your-business/free-estimate?embed=1"
        title="Free estimate"
        data-crewtavo-form=""
        loading="lazy"
        style={{ display: "block", width: "100%", height: 900, border: 0 }}
      />
      <Script id="crewtavo-forms" strategy="afterInteractive">{`
        addEventListener("message", function (e) {
          document.querySelectorAll("iframe[data-crewtavo-form]").forEach(function (f) {
            if (f.contentWindow !== e.source || !e.data) return;
            if (e.data.crewtavo === "height" && e.data.height > 0) f.style.height = Math.ceil(e.data.height) + "px";
            if (e.data.crewtavo === "top") {
              var top = f.getBoundingClientRect().top - 100;
              if (top < 0) scrollBy({ top: top, behavior: "smooth" });
            }
          });
        });
      `}</Script>
    </>
  );
}
```

The script fits each form's frame to the form and, once someone sends it, scrolls the thank-you into view. The `id` makes Next.js load it once, however many forms a page has.

**Anything else:** plain HTML pages, and the templates of a site generator like Hugo, Eleventy or Jekyll, take the code as it is. Markdown files may strip it out. In an app framework like React, Vue or Svelte, render the frame the way the Next.js component does and load the script once, from the page's `<head>`. A script inside a component's markup usually doesn't run.

### Another website builder

Most builders have a block for adding your own code, usually called **Embed**, **HTML**, **Custom code** or **Code**. Paste the code into it where the form should go, and publish.

## Or link a button to it

If your website can't take code, or you'd rather send people to a page of their own, add a button (like "Get a quote") that opens the form's link. Every website builder can do this, on every plan.

On the form's card in **Settings → Online booking**, choose **Copy link**, then paste it as the button's link on your website.

## Check that it works

Open your website in a private window, fill in the form with your own details, and choose **Send request**. It should show up under **Requests** in Crewtavo within a few seconds, and the form's card in **Settings → Online booking** counts it in "requests in the last 30 days".

Your test makes a lead client with your name. Open it from the request and choose **⋯** then **Delete client** when you're done, so it doesn't sit in your clients. Test with an email and phone that aren't on one of your clients: otherwise the request goes on that client instead.

## When an existing client uses the form

A booking form looks for the client you already have, by email first, then by phone, the same as [Website Forms](https://crewtavo.com/docs/connections/website-forms/) does. When it finds them, the request goes on their own record, at their property with the same street address, or at a new property if the address is new. Their details stay as they are: what was typed on the form goes on the request, since anyone can type someone else's email.

When it finds no one, the request makes a **new client**, a lead with **Website form** as their lead source, with the address they typed as a new property.

If a client you already have books with an email and phone you don't have for them, they come in as a new lead. To keep their history in one place, open the new lead (click their name on the request), choose **⋯**, then **Merge into another client**. Pick your existing client, leave them under **Keep**, and choose **Merge into …**. Everything on the lead, the request included, moves to them, and the lead is deleted.

:::tip
Give your repeat clients their Client Hub link instead of the booking form: on their page, choose **⋯** then **Copy Client Hub link**, and send it to them. **Request work** there puts the request straight on their own record. See [The Client Hub](https://crewtavo.com/docs/clients/client-hub/).
:::

## If something's off

**The form doesn't show on the page.** Check the page in a private window: some builders hide code while you're signed in. If it's still missing, your plan may not allow code (see the notes for Squarespace and WordPress.com above). Link a button to the form instead.

**The form sits in a box with its own scroll bar.** Wix and Google Sites keep the box at the size you drag it to, so make it taller. On other builders, it means the builder left out the part of the code that fits the frame to the form. The form still works; make its box taller if your builder lets you.

**It says "This form isn't available".** The form has been turned off or deleted. In **Settings → Online booking**, open the form's **⋯** menu and choose **Turn on**.

**People outside your area can't send it.** If the form has service area codes, a request from any ZIP or postal code that doesn't start with one of them gets "Sorry, … doesn't serve that area yet." Change them under **Service area ZIP / Postal codes** with **⋯** then **Edit form**, or leave it empty to take any area.

Source: https://crewtavo.com/docs/sales/booking-form-on-your-website/ (last updated 2026-11-04)