Get started

Getting started

Connect your website's form to FormRoute in five steps. You keep your own form; FormRoute checks each submission and emails it to you from your own domain.

Before you start

  • A website with a form, or one you are about to add.
  • Access to the DNS settings of the domain you want to send from, for example at your registrar or Cloudflare.
  • An inbox that should receive the submissions.

1. Create your account and subscribe

Create an account with your email address and a password, then subscribe through Stripe Checkout (€59 a year). Your account is ready as soon as Stripe confirms the payment.

2. Verify your sending domain

Emails are sent from an address on your own domain, such as [email protected]. To allow that, FormRoute shows you four DNS records: three CNAME records for DKIM signing and one TXT record that proves the domain belongs to your account. Add them at your DNS provider; FormRoute checks them and marks the domain verified.

Domain setup explains each record and what to do if verification takes a while.

3. Set up your form

Your form's settings decide what FormRoute accepts:

  • Name: for you, shown in your account.
  • Recipient: the inbox that receives every accepted submission.
  • Allowed websites: up to 10 addresses the form is served from, written as scheme and host, such as https://www.example.com. List https://example.com separately if your site answers on both.
  • Fields: the names your form sends, such as name, email and message. Each can be required and given a maximum length.

Field names use letters, numbers, dots, hyphens and underscores, up to 64 characters. These names are reserved: siteKey, siteId, hp, t, captchaToken, recipient. Saving the form gives you its site key, which starts with fr_.

4. Add the snippet to your form

Your account shows a snippet with your site key and fields already filled in. The version below does the same and also tells the visitor whether the message was sent. Replace fr_your_site_key with your own key.

contact.html
<form id="contact-form">
  <label>Name <input name="name" required maxlength="120"></label>
  <label>Email <input name="email" type="email" required maxlength="254"></label>
  <label>Message <textarea name="message" required maxlength="5000"></textarea></label>

  <!-- Honeypot: hidden from people, must stay empty -->
  <div aria-hidden="true" style="position:absolute;left:-10000px">
    <label>Leave this empty <input name="hp" tabindex="-1" autocomplete="off"></label>
  </div>

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

<script>
  const ENDPOINT = "https://form-route.com/api/v1/send";
  const SITE_KEY = "fr_your_site_key"; // from your FormRoute account

  const form = document.querySelector("#contact-form");
  const status = document.querySelector("#contact-status");
  const shownAt = Date.now();

  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    const data = new FormData(form);
    const button = form.querySelector("button[type=submit]");
    button.disabled = true;
    status.textContent = "Sending…";

    try {
      const response = await fetch(ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          siteKey: SITE_KEY,
          t: Date.now() - shownAt,   // ms since the form was shown
          hp: data.get("hp") ?? "",  // honeypot, empty for people
          name: data.get("name"),
          email: data.get("email"),
          message: data.get("message"),
        }),
      });

      if (response.ok) {
        form.reset();
        status.textContent = "Thanks, your message was sent.";
      } else {
        status.textContent = "Sorry, that didn't go through. Please try again.";
      }
    } catch {
      status.textContent = "Sorry, that didn't go through. Please try again.";
    } finally {
      button.disabled = false;
    }
  });
</script>

Using an AI coding agent? Copy the prompt from the AI agent tab on your Overview page and paste it into your agent; it does this step for you. Set up with an AI agent

Three values make the request work:

  • siteKey identifies your form. It is public by design.
  • hp is the honeypot: a hidden input people never fill in.
  • t is the number of milliseconds between showing the form and sending it. Submissions sent in under 1.2 seconds are treated as automated.

Using a framework or site builder? The platform guides show the same form for HTML, Next.js, React, Vue, Astro, WordPress, Webflow, Framer, Hugo, Jekyll and Eleventy.

5. Send a test

Use Send test submission on your FormRoute home page, or fill in the form on your website. Each submission appears in Recent submissions within seconds, as Sent or with the reason it was refused, and the email arrives from your domain.

If something is refused, Testing and troubleshooting lists every result and how to fix it.

Next steps