Put a booking form on your website

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).

Already have a form on your website?

Keep it, and point it at Crewtavo with 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.
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 and, for making codes, Marketing: campaigns and 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 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:

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 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.

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.