Netlify

Netlify has its own form handling, Netlify Forms, and it works by rewriting your HTML at deploy time. That is the one thing to get right when you use SilentForms on a Netlify site: a form that Netlify recognises is taken over by Netlify, and a form that Netlify ignores posts straight to SilentForms. Everything else is an ordinary static deploy with no Netlify Functions to write.

How Netlify detects forms#

When form detection is enabled for a project, Netlify's build system parses the HTML it deploys and looks for <form> tags with a netlify or data-netlify="true" attribute. For each one it finds, it strips that attribute, injects a hidden form-name field and routes submissions to Netlify Forms. A netlify-honeypot attribute is processed in the same step. Forms without these attributes are left alone.

So if you are moving a form from Netlify Forms to SilentForms, you need to remove the Netlify attributes. Changing the action alone is not enough.

1. Get an access key#

Enter your email on the access key page and click the confirmation link. The key only routes submissions to your inbox, so it is safe in your HTML or JavaScript bundle.

2. Convert the form#

A typical Netlify Forms form looks like this:

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <p hidden><label>Don't fill this out: <input name="bot-field"></label></p>
  <input type="hidden" name="form-name" value="contact">
  ...
</form>

The SilentForms version drops data-netlify, netlify-honeypot, the form-name field and the old honeypot, and adds an action, the access key and the SilentForms honeypot:

<form action="https://silentforms.com/api/submit" method="POST">
  <input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
  <input type="hidden" name="redirect" value="https://example.com/thanks/">

  <label for="name">Name</label>
  <input id="name" type="text" name="name" autocomplete="name" required>

  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="6" required></textarea>

  <!-- Honeypot: hidden from people, filled in by bots -->
  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">

  <button type="submit">Send</button>
</form>

Checklist of what to remove:

• netlify or data-netlify="true" on the <form>.
• netlify-honeypot="..." and the hidden field it named.
• data-netlify-recaptcha on the form and on its placeholder <div>. Use a CAPTCHA set up for SilentForms instead.
• Any hidden form-name input, including in a JavaScript framework.
• For framework sites: the hidden static copy of the form that Netlify Forms required for detection (often in public/ or static/). It is no longer needed.

The redirect must be a full URL to a page on your site. Without it, visitors land on the default SilentForms success page. See Redirect after submit.

3. Turn off form detection (optional)#

If no form on the site uses Netlify Forms any more, you can disable detection entirely. In the Netlify UI open your project, go to Forms, then Form detection, choose Disable form detection and confirm. It takes effect on the next deploy. This is not required once the attributes are gone, but it guarantees that a stray data-netlify left in a template cannot capture the form.

Framework sites and environment variables#

On Netlify you usually deploy a framework build rather than hand-written HTML. Keep the access key in an environment variable under Project configuration, Environment variables, using the prefix your framework requires for browser code:

These values are inlined when the site builds, and Netlify applies variable changes only on a new build and deploy, so trigger a deploy after adding one. Framework guides: Next.js, Gatsby, Astro.

For a framework form submitted with fetch, there is nothing Netlify-specific left to do: Netlify Forms only sees forms in the deployed HTML, and SilentForms accepts the cross-origin request from your Netlify domain.

Test it#

Deploy, open the contact page on your netlify.app URL and send yourself a message. Two quick ways to confirm Netlify is no longer involved:

• View the page source of the deployed page. If the form still has a hidden form-name input you did not write, Netlify processed it, so an attribute is still there.
• In your browser's network tab, the submit request should go to the SilentForms endpoint, not to your own domain.

The email should arrive within a minute, and the submission also appears in the dashboard if you use it.

Deploy previews and domain restriction#

If you restrict the form to your domain in the dashboard, remember that deploy previews and branch deploys run on netlify.app subdomains. Submissions from them are refused unless you also add your project's own netlify.app hostname. Do not add netlify.app on its own: a bare domain covers every subdomain, so it would allow any Netlify site. See Restrict to your domain.

Gotchas#

• Submissions show up in Netlify's Forms tab instead of your inbox. A Netlify attribute is still on the form, or an old deploy is being served. Remove it and redeploy.
• "Access key is required." The environment variable was empty at build time. Check the prefix and redeploy after setting it.
• A redirect lands on a Netlify 404. The redirect path does not exist in the deployed output. Check the trailing slash and the build folder.

For every error message, see Troubleshooting.

Next steps#

• Add a CAPTCHA: Cloudflare Turnstile.
• Forward submissions to Slack or a sheet: Webhooks.
• Coming from another form service: Switch from Formspree.