Webflow form to email: custom action with your SMTP

Q: Is the form key safe in my page?

Yes, it’s made for that. The form key (fk_) only works on the form endpoint and always delivers to your own inbox, with per-visitor limits and a spam filter on top. Someone who copies it can’t email anyone else. The API key (fs_) can, so keep that one in server code or a secrets store.

What Webflow does on its own

By default, a Webflow form stores each submission under Site settings → Forms and sends a notification email. A few limits are worth knowing before you rely on it:

Sender: notifications come from no-reply-forms@webflow.com, and on Starter, Core and Freelancer Workspaces the sender name includes “Webflow Forms”.
Free Starter Site plan: 50 form submissions in total, and the limit doesn’t reset. Notifications can go to at most five recipients, and they must be Workspace members.
Exported sites: Webflow doesn’t process forms on a site you export and host elsewhere. Webflow suggests a third-party form service for that.

Each form has a Send to setting with several destinations: Webflow, Email notifications, Webhook, Apps and Custom action. A custom action sends the submission straight to a URL you choose and bypasses Webflow’s form handling, so the submission isn’t stored in Webflow and Webflow sends no notification. That’s the setting FormSMTP uses.

Two ways to connect FormSMTP

Route	Good	Not so good
Native form with a custom action	Keeps the form you designed in Webflow. No code.	The visitor leaves the page for a thank-you page. Hidden fields need a Code Embed.
HTML form in a Code Embed	Inline “Thanks!” message, honeypot and subject included.	You style it with CSS. Needs a plan with Code Embed.

Either way the email goes out through your own SMTP account, from your own address, with the visitor as reply-to.

1Create a FormSMTP project

Sign up free and add a project. Pick your email provider so the SMTP host and port fill in, enter your login, and click Test connection. Any mailbox with SMTP access works: Gmail or Google Workspace, Microsoft 365, Zoho, your web host’s mailbox, or a sending service. Personal Outlook.com and Hotmail addresses can’t be used, because Microsoft only lets them sign in with OAuth.

2Lock it to your site

In Settings → Security, set Allowed websites to your published addresses, each written out in full: https://yoursite.webflow.io and your custom domain (https://www.yourdomain.com, plus https://yourdomain.com if both load your site), and Allowed recipients to your own address. Then copy the form key from API & code. It starts with fk_, it only works on the form endpoint, and it can only email you, so it’s safe in your page.

3Option A: Point the native form at FormSMTP

In the Designer, select the form, open the Settings panel and find Send to:

Remove Webflow and Email notifications with their delete icons. Webflow won’t combine them with a custom action.
Click the add icon next to Send to and choose Custom action.
Enter https://app.formsmtp.com/api/v1/form/YOUR_FORM_KEY as the URL and choose POST as the method. Save.

Then check each field’s Name setting, which becomes the label in your email. Name the email field exactly email, so FormSMTP sets it as the reply-to address. Good names for the rest are name and message.

Add a honeypot for bots: drag in one more Input, set its Name to _gotcha, and set Display to None in the Style panel. People never see it; bots fill it in, and FormSMTP quietly drops those submissions.

Remove any File upload or reCAPTCHA element from the form. FormSMTP doesn’t accept file uploads, and Webflow says its built-in reCAPTCHA doesn’t work when a custom action is set.

If your plan includes the Code Embed element, drop one inside the form to add hidden settings: a subject line and a page to land on after sending.

html

<input type="hidden" name="_subject" value="New message from my Webflow site">
<input type="hidden" name="_next" value="/thank-you">

Without _next, visitors see FormSMTP’s thank-you page with a link back to your site. _next only redirects to the same site the form is on.

4Option B: Paste an HTML form into a Code Embed

Prefer an inline success message and full control? Skip the native form, add a Code Embed element where the form should go, and paste this. It submits with fetch(), so the visitor stays on the page.

html

<form id="fs-contact" action="https://app.formsmtp.com/api/v1/form/YOUR_FORM_KEY" method="POST">
  <label>Name <input name="name" autocomplete="name" required></label>
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5" required></textarea></label>

  <input type="hidden" name="_subject" value="New message from my Webflow site">
  <input type="hidden" name="_t">
  <!-- Honeypot: hidden from people, irresistible to bots -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

  <button type="submit">Send message</button>
  <p id="fs-status" role="status"></p>
</form>

<script>
  (function () {
    var form = document.getElementById("fs-contact");
    var status = document.getElementById("fs-status");
    var button = form.querySelector("button");
    form.querySelector('[name="_t"]').value = Date.now();

    form.addEventListener("submit", async function (e) {
      e.preventDefault();
      button.disabled = true;
      status.textContent = "Sending…";
      try {
        var res = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new URLSearchParams(new FormData(form)),
        });
        var data = await res.json();
        if (!data.success) throw new Error(data.error);
        form.reset();
        status.textContent = "Thanks! Your message was sent.";
      } catch (err) {
        status.textContent = "Sorry, that didn't work: " + err.message;
      } finally {
        button.disabled = false;
      }
    });
  })();
</script>

<form id="fs-contact" action="https://app.formsmtp.com/api/v1/form/YOUR_FORM_KEY" method="POST">
  <label>Name <input name="name" autocomplete="name" required></label>
  <label>Email <input name="email" type="email" autocomplete="email" required></label>
  <label>Message <textarea name="message" rows="5" required></textarea></label>

<button type="submit">Send message</button>
  <p id="fs-status" role="status"></p>
</form>

form.addEventListener("submit", async function (e) {
      e.preventDefault();
      button.disabled = true;
      status.textContent = "Sending…";
      try {
        var res = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new URLSearchParams(new FormData(form)),
        });
        var data = await res.json();
        if (!data.success) throw new Error(data.error);
        form.reset();
        status.textContent = "Thanks! Your message was sent.";
      } catch (err) {
        status.textContent = "Sorry, that didn't work: " + err.message;
      } finally {
        button.disabled = false;
      }
    });
  })();
</script>

Style it with a class or a <style> block in the same embed. Webflow allows up to 50,000 characters per Code Embed, far more than this needs.

Code Embed is available with a Core, Growth, Agency or Freelancer Workspace, or on a site with an active Site plan.

5Publish and test

Scripts in a Code Embed don’t run on the canvas, so publish first. Submit the form on your webflow.io address and on your custom domain. The message arrives from your own address and appears under Logs in FormSMTP.

Webflow form not sending email? Check these

You reached the Starter limit. On the free Starter Site plan, Webflow stops collecting after 50 submissions in total. Check the count under Site settings → General → Overview.
The notification is in spam. Webflow’s notifications come from a shared webflow.com address, and Webflow warns that role-based recipients like info@ can hurt delivery. Sending through your own SMTP avoids both.
A custom action is set, and you expected Webflow’s email. That’s by design: with a custom action, Webflow doesn’t process the submission. Your email now comes from FormSMTP.
The form says it isn’t allowed on your site. The page’s address isn’t in Allowed websites. Add the exact origin from the error message, such as https://www.yourdomain.com.
“File uploads are not supported”. A File upload element makes the browser send the form as multipart/form-data. Remove it.
Replies go to you instead of the visitor. The email field’s Name isn’t email. Rename it and republish.

FAQ

Does a custom action need a paid Webflow plan?

Webflow’s help center doesn’t list a plan requirement for a custom action. The Code Embed element does need one: a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site.

Will submissions still show up in Webflow?

No. With a custom action, submissions aren’t sent to or stored in Webflow. Each one lands in your inbox, and FormSMTP’s Logs show what was sent and when.

Does this work on an exported Webflow site?

Yes. Webflow doesn’t process forms on exported sites and recommends pointing the form at a third-party service with a custom action, which is exactly this setup.

Can the visitor get a confirmation email?

Not from the form endpoint: it only emails you, so a copied form key can’t be used to spam other people. To email the visitor, call the send API with your API key from server code.

Is the form key safe in my page?

Yes, it’s made for that. The form key (fk_) only works on the form endpoint and always delivers to your own inbox, with per-visitor limits and a spam filter on top. Someone who copies it can’t email anyone else. The API key (fs_) can, so keep that one in server code or a secrets store.