SilentForms

Webflow

Send a Webflow form to your inbox by setting a custom form action, or use an embed for full control.

Webflow gives you two ways to use SilentForms. You can keep Webflow's own Form Block, designed in the Designer as usual, and point its custom action at the submit endpoint. Or you can paste a complete HTML form into a Code Embed element and control every attribute yourself. Both post straight from the visitor's browser, so nothing runs on Webflow's side.

Before you start, get an access key on the access key page. It only routes submissions to your inbox, so it is safe to publish in your page's HTML.

Option 1: the native Form Block with a custom action#

This keeps Webflow's visual form styling. Webflow's form settings let you send submissions to a custom URL instead of to Webflow.

Set the action and method#

  1. Select the form on the canvas or in the Navigator and open the Settings panel on the right.
  2. Under Send to, remove Webflow and Email notifications if they are listed. Webflow does not allow a custom action alongside them.
  3. Click the add icon next to Send to and choose Custom action.
  4. Enter the endpoint as the URL and choose POST as the method:
https://silentforms.com/api/submit
  1. Click Save.

With a custom action Webflow's built-in form handling is bypassed: submissions are no longer sent to or stored in Webflow, and Webflow sends no notification email. SilentForms emails you instead.

Name every field#

SilentForms emails each field under its name, so open every input's settings and fill in Name:

  • the visitor's email: set Text type to Email and Name to email. SilentForms uses it as the Reply-To address, so you can answer a submission by hitting Reply;
  • the other inputs: short names such as name, company or message.

Add the access key and honeypot with a Code Embed#

Webflow's form elements have no hidden input, so add the hidden fields with a Code Embed element. Drag a Code Embed from the Add panel into the form wrapper (inside the form, not next to it, or its fields are not sent) and paste:

<input type="hidden" name="accessKey" value="YOUR_ACCESS_KEY_HERE">
<input type="hidden" name="subject" value="New message from the Webflow site">
<input type="hidden" name="redirect" value="https://example.com/thank-you">
<input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">

Webflow's help center lists the Code Embed element for sites with an active Site plan or on a paid Workspace. If yours does not have it, use the access key in the URL instead and skip the embed: set the custom action to https://silentforms.com/api/submit/YOUR_ACCESS_KEY_HERE. You lose the honeypot and the hidden fields, but the form still works.

Option 2: a full HTML form in a Code Embed#

When you want complete control over markup and behaviour, skip the Form Block and put the whole form in one Code Embed. Add a Code Embed where the form should appear and paste:

<form class="sf-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/thank-you">

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

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

  <label for="sf-message">Message</label>
  <textarea id="sf-message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" style="display: none;" tabindex="-1" autocomplete="off">
  <button type="submit">Send message</button>
</form>

<style>
  .sf-form { display: grid; gap: 0.5rem; max-width: 32rem; }
  .sf-form input, .sf-form textarea { padding: 0.6rem 0.75rem; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
  .sf-form button { margin-top: 0.5rem; padding: 0.7rem 1.2rem; border: 0; border-radius: 6px; background: #111; color: #fff; font: inherit; cursor: pointer; }
</style>

The code is inserted directly into your page rather than into a frame, so it inherits your site's fonts and you only need to style the form itself. Don't wrap the code in <html>, <head> or <body> tags: Webflow warns that this breaks the page layout. A Code Embed holds up to 50,000 characters, which is plenty for a form.

What happens after submit#

Both options are plain HTML form posts, so the browser leaves the page and goes to the endpoint, which answers with a redirect:

  • with a redirect field, the visitor lands on that URL. Create a thank-you page in Webflow and use its full published address, including https://;
  • without one, the visitor sees the SilentForms default thank-you page.

Webflow's own success and error messages and its redirect setting in the form panel belong to Webflow's built-in handling. With a custom action, use the redirect field instead and don't rely on those settings. See Redirect after submit for the details, including a redirect URL saved in the dashboard.

Test it#

Custom code does not run in the Designer canvas, so publish the site (the webflow.io staging domain is fine) and submit the form from the live page. Check that:

  • you land on your thank-you page,
  • the email arrives with every field you named, and Reply goes to the address you typed.

If a field is missing from the email, its Name is empty. If you see "Access key is required.", the Code Embed is outside the form wrapper. If the button does nothing at all and reCAPTCHA is turned on in Webflow's site settings, add Webflow's reCAPTCHA element to the form or turn that setting off: Webflow blocks forms without it. Other messages are listed in Troubleshooting.

Next steps#