HTML forms

A plain HTML form needs two attributes to work with MakeTheForm: action set to your endpoint and method set to POST. No JavaScript, no build step. This works on any static host and in any tool that lets you edit a form's markup.

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>
    Name
    <input name="name" autocomplete="name" required>
  </label>

  <label>
    Email
    <input type="email" name="email" autocomplete="email" required>
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <!-- Spam trap: hidden from people, tempting to bots. Leave it empty. -->
  <input
    type="text"
    name="_mtf_honeypot"
    tabindex="-1"
    autocomplete="off"
    aria-hidden="true"
    style="position:absolute;left:-9999px"
  >

  <button type="submit">Send</button>
</form>

Keep your own classes, layout and validation attributes. The endpoint only reads what the browser sends: field names and values.

Every input you want to receive needs a name. An input without one is never sent by the browser, so it cannot reach us. The name becomes the field label in your dashboard and your notification email, in the order the fields were submitted.

• Repeated names are kept as separate values, not merged or overwritten. A group of checkboxes that share a name arrives as one value per ticked box.
• Name the address field email. New forms use that field as the Reply-To of the notification email, so replying goes straight to the submitter. You can pick a different field in the form's notification settings.
• Names starting with _mtf_ are reserved for control fields. They are removed before the submission is stored, so do not use that prefix for your own data.

<fieldset>
  <legend>Interested in</legend>
  <label><input type="checkbox" name="interest" value="design"> Design</label>
  <label><input type="checkbox" name="interest" value="development"> Development</label>
</fieldset>

A few hidden inputs change how a submission is handled. They are read, acted on, and never shown to you as data.

On success the browser gets a 303 redirect. Without a redirect field it lands on a plain confirmation page on the endpoint host. To bring visitors back to your own site, add the redirect field:

<input type="hidden" name="_mtf_redirect" value="https://example.com/thanks">

The target must be an absolute URL on one of the form's allowed domains. Anything else, including a relative path, is ignored and the confirmation page is shown instead. This stops the endpoint being used as an open redirect.

Because it is a 303, refreshing the thank-you page does not resend the form. A double-clicked button is also safe: the same submission from the same visitor within a minute is only stored once.

If something goes wrong, for example the form is paused or the visitor is rate limited, the browser shows a short error page with the matching HTTP status. The visitor has to go back to try again. If you want errors shown next to the form instead, submit it with fetch.

To accept attachments, add enctype="multipart/form-data" to the form and an <input type="file">. Without the enctype the browser sends only the filename. File uploads are covered in File uploads.

An oversized submission is refused with 413, never truncated. The full table is in the API reference.