# Webflow form to email: custom action with your SMTP

> Send Webflow form submissions to your inbox from your own address with a custom form action or a Code Embed, and fix Webflow forms that stop sending email.

Source: https://formsmtp.com/guides/webflow-contact-form · Last updated November 2, 2026

## 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.

## 1. Create a FormSMTP project

[Sign up free](https://app.formsmtp.com/#/signup) 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](https://formsmtp.com/guides/gmail-smtp-contact-form), [Microsoft 365](https://formsmtp.com/guides/outlook-smtp-contact-form), [Zoho](https://formsmtp.com/guides/zoho-smtp-contact-form), 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.

## 2. Lock 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.

## 3. Option A: Point the native form at FormSMTP

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

1. Remove **Webflow** and **Email notifications** with their delete icons. Webflow won’t combine them with a custom action.
2. Click the add icon next to *Send to* and choose **Custom action**.
3. 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.

## 4. Option 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>
```

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.

## 5. Publish 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.

## More guides

- [Framer form to email: webhook or code component](https://formsmtp.com/guides/framer-contact-form)
- [Carrd contact form that emails you from your address](https://formsmtp.com/guides/carrd-contact-form)
- [Lovable contact form that sends email via your SMTP](https://formsmtp.com/guides/lovable-contact-form)
- [Bolt.new contact form that sends email (no backend)](https://formsmtp.com/guides/bolt-contact-form)