Carrd contact form that emails you from your address

What Carrd forms can do, by plan

The contact form is fine for many sites. Its messages just come from Carrd’s sending domain, and Carrd’s own troubleshooting advice for missing messages is to allowlist @mail.carrd.site. With FormSMTP, the email is sent 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 Carrd address and any custom domain, each written out in full: https://yoursite.carrd.co and https://yourdomain.com, 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 (Pro Plus): Send to URL

Click Add Element, then Form. Set Type to Custom, then Send to URL, and fill in:

With AJAX, Carrd treats any 2xx response as success and anything else as failure. FormSMTP answers 200 when the email is sent and an error status with a JSON message when it isn’t, so Carrd’s On Success and On Failure behaviors work as expected. Pick what visitors see in each case.

Now open Fields and set a Submitted ID on each one. That’s the key FormSMTP receives and the label in your email:

Leave out File fields: FormSMTP doesn’t accept file uploads. If you turn on a CAPTCHA, use Carrd’s Spam Protection option rather than FormSMTP’s, because FormSMTP’s check expects the widget’s token in every submission.

4Option B (Pro Standard): An Embed with an HTML form

On Pro Standard, add the form as code instead. Click Add Element, then Embed. Set Type to Code, Style to Inline, and paste:

<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 Carrd 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>

This version includes FormSMTP’s honeypot and time trap, and shows the result inline. Add a <style> block to match your site’s fonts and colors. Carrd doesn’t render embeds in the builder, so publish to see it.

5Publish and test

Click Publish Changes and submit the form on your live carrd.co address or custom domain. The message arrives from your own address and appears under Logs in FormSMTP.

Troubleshooting

• Carrd shows its failure message. Carrd treats anything but a 2xx response as failure. Check Logs in FormSMTP; the most common causes are below.
• “This form isn’t allowed on …”. Add the exact address to Allowed websites. Your carrd.co address and your custom domain count as different sites.
• Fields arrive with odd names. Without a Submitted ID, Carrd falls back to the field’s ID, which it generates from the label. Set a Submitted ID on every field.
• Carrd reports an error on a custom form. Carrd recommends IDs that use only letters, numbers, hyphens and underscores, and unique labels for every field.
• Replies go to you instead of the visitor. The email field’s Submitted ID isn’t email.

FAQ

More guides

• Webflow form to email: custom action with your SMTP
• Framer form to email: webhook or code component
• Lovable contact form that sends email via your SMTP
• Bolt.new contact form that sends email (no backend)