Forms for your website

A form is designed on the dashboard's Forms page and lives on your own website. Every submission becomes an ordinary message in the mailbox you chose, under the visitor's name, and Reply answers the visitor at the address they typed. There is no form service in between, no submissions table to check and nothing of ours on your page but a small script.

Forms are on every plan, Free included.

Creating a form

1. Open Forms → New form. Give it a name and choose the mailbox submissions go to. You start with a contact form: name, email and message.
2. On Design, add or change fields. Six kinds: short text, email, long text, a choice (one of the options you list), a checkbox and a hidden value your page sets. Each field has a label (the text visitors see) and a required switch. Its technical name is made from the label for you ("Vehicle model" becomes vehicle-model) and only matters to your own code; tick Show field names to see or change it.
3. Mark one short text field as the sender's name and one email field as the sender's email. The name goes into the message's From line ("Noor Example via Contact form"); the email becomes its Reply-To, which is where your reply goes.
4. Choose what the visitor reads after sending (a thank-you sentence) or where they are sent (a full address starting with https://), and the subject of the message. The subject may use {form}, {name} and {email}.
5. Save. The Preview tab shows the form as you are editing it, unsaved changes included; nothing you send from the preview is delivered.

Forms are designed on a computer. On a phone the page says so; the submissions themselves arrive in the inbox on every device.

Putting it on your site: three ways

The Embed tab has all three with a Copy button. Each snippet already carries your form's key.

1. An inline form, in your page's own style

Paste the HTML where the form should appear. It is plain markup with labels, inputs and a button — no styles or classes of ours — so it takes whatever your page's stylesheet does with forms. Each field sits on its own line, its label above it, even on a theme that does not style forms. If your site editor shows an HTML or source view, paste it there. The script tag beneath it adds the bot check, sends the form without a page reload and writes "Your message has been sent" (or the sentence you chose) under the button.

<form data-foundermail-form="k7QzAbCdEfGhIjKlMnOpQr" action="https://forms.foundermail.mx/forms/k7QzAbCdEfGhIjKlMnOpQr" method="post">
  <p><label for="fm-k7QzAb-your-name">Your name</label><br><input id="fm-k7QzAb-your-name" name="your-name" type="text" required></p>
  <p><label for="fm-k7QzAb-email">Email</label><br><input id="fm-k7QzAb-email" name="email" type="email" required></p>
  <p><label for="fm-k7QzAb-message">Message</label><br><textarea id="fm-k7QzAb-message" name="message" rows="5" required></textarea></p>
  <div data-foundermail-challenge></div>
  <p><button type="submit">Send</button></p>
  <p data-foundermail-status aria-live="polite"></p>
</form>
<script src="https://forms.foundermail.mx/forms.v1.js" async></script>

The data-foundermail-challenge element is where the verification appears; the data-foundermail-status line is where the answer is written. Keep both; style them as you like.

2. A floating button

One line before your page's closing </body> tag. A round button in the colour you picked sits at the bottom right (or left) and opens a small panel with the form. The panel is drawn inside its own boundary, so your page's CSS cannot break it and its CSS cannot leak out; it inherits your page's font.

<script src="https://forms.foundermail.mx/forms.v1.js" data-form="k7QzAbCdEfGhIjKlMnOpQr" data-mode="widget" async></script>

3. Your own form and your own code

Keep the form you already have and post its fields to the endpoint as JSON. Load our script for the verification token, then:

const { token, stamp, key } = await FounderMailForms.prepare("k7QzAbCdEfGhIjKlMnOpQr", form.querySelector("[data-foundermail-challenge]"));
const response = await fetch("https://forms.foundermail.mx/forms/k7QzAbCdEfGhIjKlMnOpQr", {
  method: "POST",
  headers: { "Content-Type": "application/json", "Accept": "application/json" },
  body: JSON.stringify({ "your-name": name, email, message, _fm_token: token, _fm_stamp: stamp, _fm_key: key })
});
const result = await response.json(); // { ok: true, message } or { ok: false, error }

The field names are the technical names from the Design tab. The answer is JSON: ok and the thank-you sentence, or ok: false and one sentence saying what was wrong, in the language you chose for the form (or the visitor's).

Bot protection, handled for you

Every submission is checked by Cloudflare Turnstile, which usually passes a person without a click. You do not register anything with Cloudflare: the check runs in a small frame served from forms.foundermail.mx, and the token it produces is good for your form alone, once. Behind it: a field people never see and scripts fill, a check that the form was not sent within three seconds of loading, limits per visitor and per form per hour, and the same spam filter that scores your incoming mail. A submission the filter marks as junk lands in the mailbox's Junk folder and counts against nothing.

Allowed sites

By default a form accepts submissions from any page that carries it. On the Design tab, Allowed sites restricts it to the origins you list (one per line, such as https://www.acme.com); a page elsewhere gets no verification frame and its submissions are refused. Use it when your form key is public — which it always is — and you would rather nobody else embedded it.

Where submissions land

• In the mailbox you chose, as a received message: a table of the fields, then the page it was sent from and when.
• From your own mailbox's address, named after the visitor and the form ("Noor Example via Contact form"), so the thread reads as the visitor's.
• Reply-To the visitor's email, when the form has one. Press Reply and the answer goes to them, as with any message.
• The visitor is not added to your contacts by typing an address into a form; only mail that actually arrives from an address does that. If they already are a contact, the submission threads under them.
• Notifications in the app and on your phone follow as for new mail.
• Your forwarders run on submissions as on any message to that mailbox, so a form can reach your Gmail; Reply there still goes to the visitor. Webhooks do not run on form submissions.

Limits

Submissions count as received mail too. Over the month's allowance the form tells visitors to get in touch another way, and the account owner is warned at 80, 90 and 100 percent, as for every allowance. A message in Junk never counts. Each field takes up to 500 characters, a long text 10,000; a form has up to 30 fields; file uploads are not part of forms.

On Free the form carries a small "Powered by FounderMail" line and the verification shows "Protected by FounderMail". The label is part of the Free plan; remove it by moving to Plus.

Related

• The inbox
• Mailboxes and mail clients
• Forms on a WordPress site and on a Shopify store