Showcase | MakeTheForm

Eight recipes, one endpoint

Pick a pattern · switch between the preview and the code

Contact form

All plans

The classic. Name, email, message: live on a static site in three minutes.

contact-form.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="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>

Uses_mtf_honeypotSubject settingReply-To setting

Set the subject to “New enquiry from {{name}}” in the form’s notification settings.

Waitlist / early access

All plans

A launch page that can take a spike of sign-ups without a backend or a rate-limit scare.

waitlist.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <label>How did you hear about us? <input type="text" name="referral"></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">Join the waitlist</button>
</form>

Uses_mtf_honeypotSubject setting

Spam filtering keeps the list clean when a link goes viral.

Lead capture

All plans

Turn a landing page into a pipeline. Qualify with a couple of extra fields.

lead-capture.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Name <input type="text" name="name" required></label>
  <label>Company <input type="text" name="company" required></label>
  <label>Work email <input type="email" name="email" required></label>
  <label>Budget <select name="budget"><option>Under $10k</option><option>$10k to $25k</option><option>Over $25k</option></select></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">Request a call</button>
</form>

Uses_mtf_honeypotSubject settingReply-To setting

With Reply-To set to the email field, replying to the notification goes straight to the lead.

Feedback widget

All plans

A tiny in-app widget that POSTs with fetch and never navigates the page away.

feedback-widget.html

<form id="feedback" action="https://mtform.co/f/your-form-key" method="POST">
  <fieldset><legend>How was this page?</legend><label><input type="radio" name="rating" value="1" required> 1</label> <label><input type="radio" name="rating" value="2"> 2</label> <label><input type="radio" name="rating" value="3"> 3</label> <label><input type="radio" name="rating" value="4"> 4</label> <label><input type="radio" name="rating" value="5"> 5</label></fieldset>
  <label>Anything to add? <textarea name="message"></textarea></label>
  <input type="hidden" name="page_url">
  <!-- 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 feedback</button>
  <p role="status"></p>
</form>

<script>
  const form = document.getElementById("feedback");
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    form.elements.page_url.value = location.href;
    const status = form.querySelector('[role="status"]');
    try {
      const res = await fetch(form.action, {
        method: "POST",
        headers: { Accept: "application/json" },
        body: new FormData(form),
      });
      const body = await res.json();
      if (body.ok) {
        form.reset();
        status.textContent = "Thanks for the feedback.";
      } else {
        status.textContent = body.error.message;
      }
    } catch {
      status.textContent = "Could not send. Please try again.";
    }
  });
</script>

Uses_mtf_honeypotSubject setting

The JavaScript recipe handles success and error inline.

Job applications

All plans

Collect applicants with a portfolio and résumé link, straight to a shared inbox.

job-applications.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Role <select name="role"><option>Frontend engineer</option><option>Designer</option><option>Support</option></select></label>
  <label>Portfolio or LinkedIn <input type="url" name="links" required></label>
  <label>Résumé link <input type="url" name="resume" required></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">Apply</button>
</form>

Uses_mtf_honeypotSubject settingReply-To setting

Use {{role}} in the subject so each opening sorts itself in your inbox.

Newsletter signup

All plans

One field in the footer. Every address is stored, exportable and spam-checked.

newsletter-signup.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Email <input type="email" name="email" required></label>
  <input type="hidden" name="_mtf_redirect" value="https://yoursite.com/thanks">
  <!-- 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">Subscribe</button>
</form>

Uses_mtf_honeypot_mtf_redirect

_mtf_redirect sends people back to your own thank-you page on an allowed domain.

Event RSVP

All plans

Headcount and dietary needs for a launch party, a workshop or a wedding.

event-rsvp.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Guests <input type="number" name="guests" required></label>
  <label>Dietary needs <select name="dietary"><option>None</option><option>Vegetarian</option><option>Vegan</option><option>Gluten-free</option></select></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">RSVP</button>
</form>

Uses_mtf_honeypotSubject settingReply-To setting

Export the list to CSV from Submissions when it’s time to count heads.

Bug / support report

Slack: Pro

Structured reports from users, posted to your team’s channel as they arrive.

bug-report.html

<form action="https://mtform.co/f/your-form-key" method="POST">
  <label>Summary <input type="text" name="summary" required></label>
  <label>Steps to reproduce <textarea name="steps" required></textarea></label>
  <label>Severity <select name="severity"><option>Low</option><option>Medium</option><option>High</option></select></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 report</button>
</form>

Uses_mtf_honeypotSubject settingSlack

On Pro and Agency, post each report to a Slack channel as well as your inbox.

Cheat sheet

Four special fields do all the work

Every recipe above is a normal form plus some of these hidden inputs. Anything else you name is stored and emailed as-is.

Field	What it does	Example
_mtf_subject	Sets the notification email’s subject for this submission. Use a different value per form, or per topic with a select, to route enquiries. {{field}} inserts a submitted value.	<input type="hidden" name="_mtf_subject" value="New lead">
_mtf_redirect	Where the browser goes after a successful plain-HTML submit, on one of the form’s allowed domains. Without it, visitors see a hosted success page.	<input type="hidden" name="_mtf_redirect" value="https://yoursite.com/thanks">
_mtf_reply_to	Names the field whose value becomes the notification’s Reply-To, so hitting reply goes to the right person. By default it is the form’s Reply-To setting, usually the email field.	<input type="hidden" name="_mtf_reply_to" value="work_email">
_mtf_honeypot	Spam trap. Hidden from people, tempting to bots. Any value drops the submission as spam.	<input name="_mtf_honeypot" tabindex="-1" aria-hidden="true" …>

Any stack

Bring your own front end

The endpoint doesn’t care how the form is built. Plain HTML works first; everything else layers on without breaking it.

Browse platforms

Build yours.

Pick a pattern, point it at your endpoint, and watch the first submission land.

Create free endpoint

What you’ll build.

Eight recipes, one endpoint

Contact form

Waitlist / early access

Lead capture

Feedback widget

Job applications

Newsletter signup

Event RSVP

Bug / support report

Four special fields do all the work

Bring your own front end

Build yours.