Setting up a Form Backend

If you already have a beautifully designed form on your website and just need a reliable backend to handle submissions, validation, and spam protection, our Form Backend feature is exactly what you need. In this guide, we'll walk you through creating an endpoint and connecting your code.

Step 1: Get Your Endpoint URL

To start, you need to generate a unique API endpoint for your custom form.

1. Create a new form and navigate to the Editor tab in your dashboard.
2. Select Form Backend mode instead of using the drag-and-drop builder.
3. You will be provided with a unique endpoint URL. It will look like this: https://mimoforms.com/api/forms/[YOUR_FORM_ID]/submit
4. Copy this URL to your clipboard.

Step 2: Connect Your HTML Form

The easiest way to connect your form is by setting the action attribute on your standard HTML <form> tag.

1. Open your website's source code.
2. Find your existing <form> tag.
3. Set the action attribute to the endpoint URL you copied in Step 1.
4. Set the method attribute to POST.

<form action="https://mimoforms.com/api/forms/[YOUR_FORM_ID]/submit" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>

[!NOTE]
Make sure all your input fields have a name attribute. This is how Mimo Forms identifies the data columns in your submissions table!

Step 3: Connect using JavaScript (Optional)

If you are submitting via AJAX in a modern frontend framework like React, Next.js, or Vue, you can simply POST a JSON payload to your endpoint.

1. Prevent the default form submission event in your frontend code.
2. Construct a JSON object containing your form data.
3. Use the fetch API to send a POST request to your endpoint.

fetch("https://mimoforms.com/api/forms/[YOUR_FORM_ID]/submit", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ 
    name: "Jane Doe", 
    email: "jane@example.com", 
    message: "Hello!" 
  }),
});

Step 4: Enable Spam Protection (Honeypot)

To prevent bot submissions without using annoying visual CAPTCHAs, you can enable our built-in Spam Protection.

1. In your Mimo Forms dashboard, toggle on Spam Protection.
2. Add a hidden _gotcha field to your HTML form.

<!-- Add this hidden input anywhere inside your <form> tag -->
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">

[!TIP]
Bots automatically fill out all fields they find. If our endpoint detects that the _gotcha field contains any text, the submission is silently rejected!