How to add a custom form to your website

A contact form covers name, email, and a message. Many pages need more than that.

A quote request wants a project type and a file. A workshop signup wants a date and a seat count. Those fields do not belong on a generic inquiry form.

Sitebase’s custom forms feature is the builder for that. You choose the fields and the steps. Visitors submit on your site. Responses land in the dashboard.

Sitebase is in private beta. Public signup isn’t open. These steps are for accounts with access.

Start with one form

Add your website in Sitebase. On the Features to start with step, select Custom forms. If the site already exists, use + Add more.

A site can have several custom forms. The first one is named Custom forms. Rename it when you add a second, so Quote request and Workshop signup stay distinct.

Open the feature. Until someone submits, Builder is the default tab.

Design the form

The default form already has two steps. Step 1 is Your details, with Name and a required Email. Step 2 is Request, with a required Message.

That is a working start. Change the text first.

Set the title to “Request a quote”. Set the button label to “Send request”. Set the success message to “Thanks, your request was received.” The preview on the right uses the same renderer as the public embed.

Then edit the fields. On step 1, keep Email required. Add a Text field labeled Company if you need it.

On step 2, keep Message or change the label to Project brief. Add a Dropdown labeled Project type, with one option per line:

Website rebuild
Landing page
Ongoing retainers

Add a File upload if people should attach a document. Set Accept to Documents, Max files to 1, and leave Max MB inside the plan limit. Starter accepts files up to 10 MB per file. Pro, Business, and Agency accept files up to 100 MB per file.

You can add Text, Email, Long text, Dropdown, Radio buttons, Checkbox, Checkbox group, Number, Date, URL, and File upload. Mark a field Required when you cannot reply without it.

Each step can have its own title and description. Visitors see “Step 2 of 2” and move with Next and Back. Required fields are checked before they can go forward. If you later collapse it to one page, + Turn into a multi-step form puts steps back.

Click Save and publish. The embed snippet stays the same.

Put it on the page

Open Setup and copy the script snippet. The public key identifies this form. It is not a private API credential.

Paste it where the form should appear:

<section aria-labelledby="quote-heading">
  <h2 id="quote-heading">Request a quote</h2>
  <script
    async
    crossorigin="anonymous"
    src="https://sitebase.dev/embed.js"
    data-sitebase-widget="YOUR_FORM_KEY"
  ></script>
</section>

Replace YOUR_FORM_KEY with the key from your dashboard, or paste the complete snippet Sitebase gives you. In an Astro page, add is:inline so the script stays intact.

If the editor only accepts a URL, use the hosted embed from Setup:

<iframe
  src="https://sitebase.dev/embed/YOUR_FORM_KEY"
  title="Request a quote"
  style="width:100%;height:720px;border:0"
></iframe>

Give the iframe enough height for both steps, validation, and the success message, including on a phone. This is the path on Notion, Wix, or Squarespace, which strip script tags.

This form has one look. There is no variant attribute to add.

Protect the public form

The form accepts open text and, if you added one, a file. Turn on Cloudflare Turnstile in the site’s Config before you share the page.

Test keys help during setup. Replace them with real keys for your public domain before you send people there. Hosted embeds run on Sitebase’s domain and use Sitebase’s own Turnstile keys. Your domain’s keys apply when you embed with the script snippet.

Sitebase also uses a honeypot and rate limiting. Keep the supplied markup intact so those can work.

Submit a test request

Publish the page. Open the public URL in a fresh browser window.

Walk through both steps. Leave Email empty and confirm you cannot continue. Attach a small PDF if you added a file field.

Check the browser first. Did the success message appear? Could you submit on a phone-sized screen?

Then open Data. That tab appears once the first response arrives. New rows are bold with a New badge. Expanding a row marks it read and shows each field, plus download links for files. Only signed-in dashboard members who can access the website can open those files.

Reply opens your email client with the sender’s address. Archive hides a row you are done with. Export CSV if you want a copy outside the dashboard. File fields export the uploaded file names.

If you use notifications, check the member and website preferences, then verify with another test. A missing notification does not mean the response was lost. Notification emails include a multi-field excerpt, and Reply-To is the sender’s email when the form has an email field.

If Events is enabled on the site, each submit also shows up as a form_submission event.

Add another form when you need one

Keep this form for quotes. Add a second custom form for a workshop signup or a partner application. Use + Add more, or the + control next to the form switcher, and give the new one a name.

Each form has its own snippet and its own inbox. Do not reuse a quote form for something that asks different questions.

If you only need name, email, and a message, the contact form is enough.

For install detail, see embedding Sitebase features and the forms documentation. If you are still preparing the rest of the site, use the launch checklist.