How to collect contact form submissions from a static website

A static website can display a contact form. Storing the message requires a service that accepts the submission.

That’s easy to miss when you’re building the page. You click Submit, the interface says “Thanks,” and nothing has been saved anywhere.

You can build a submission endpoint yourself or use a hosted form service. Sitebase’s contact form gives you an embedded form with submissions stored in its dashboard, plus notifications you can configure.

Sitebase is in private beta. If you don’t have access yet, join the waiting list. This guide walks through the setup for accounts with access.

Choose the fields you need

For a first contact form, a name, email address, and message are usually enough. Ask only for information you’ll use to answer the inquiry.

Write a success message that sets an expectation you can meet. “Thanks, your message has been sent” is enough if you don’t have a fixed response time.

If you need file uploads, several steps, or additional fields, Sitebase’s custom forms feature is a better fit than the basic contact form.

Create the contact form

Add your website in Sitebase and select Contact form. For an existing site, use + Add more from its sidebar.

Open the contact form’s Config tab to edit its text. Then open Setup and copy the script snippet.

The snippet includes the public key for this form. It identifies the destination for submissions; it isn’t a private API credential. Never place a private API key in your website’s HTML.

Install it on your contact page

On a regular HTML site, paste the snippet where you want the form to appear. Sitebase renders the form at that location.

This example shows the attributes. Replace YOUR_CONTACT_FORM_KEY with the key from your dashboard, or use the complete snippet it provides:

<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">Get in touch</h2>
  <script
    async
    crossorigin="anonymous"
    src="https://sitebase.dev/embed.js"
    data-sitebase-widget="YOUR_CONTACT_FORM_KEY"
  ></script>
</section>

For an Astro site, put the copied snippet in the page or component for that section. Add is:inline to the script so Astro keeps the supplied attributes and script URL in the rendered HTML.

Remove the old form if you’re replacing one. Two forms with different submission paths make testing confusing and can leave visitors using the unfinished version.

If your editor only accepts URL embeds, use the hosted URL from Setup. You can also use it in an iframe with a descriptive title and enough height for validation and success messages. See the embedding guide for both installation methods.

Protect the public form

Enable Cloudflare Turnstile and configure real keys for your published domain before launch. Test keys are useful during development, but they aren’t your production spam protection.

Sitebase also includes a honeypot and rate limiting. Keep the form’s supplied markup intact so those mechanisms can work.

Check the spam protection settings again if you move the site to a new domain. A form that worked on a preview URL still needs testing on the public one.

Check storage and delivery separately

Submit a message from your published contact page using an email address you control.

First, check the browser. Did you get a success message? Could you submit comfortably on mobile? Does an invalid email produce an understandable validation message?

Then open the contact form’s Data tab in Sitebase. Confirm that the message and sender details are there. This is the record you can return to even if you miss an email notification.

If you’re using notifications, check the relevant member and website preferences, then verify delivery with a test submission. Don’t assume a missing notification means the message wasn’t stored.

Try the form with your browser’s network connection disabled too. A failed request should leave visitors able to retry, without telling them their message was sent.

Use the inbox

The contact form’s Data tab lets you read, archive, and export messages. Reply opens your email client with the sender’s address filled in.

Keep a link to this inbox somewhere you’ll check regularly. Once messages start arriving, the useful part of the setup is answering them.

If you’re still preparing the rest of your site, use the launch checklist to check the other visitor flows.