The HTML form action attribute, explained.

What action and method do

<form action="https://example.com/contact" method="POST">
  <label for="email">Email</label>
  <input id="email" type="email" name="email" required />
  <button type="submit">Send</button>
</form>

• action is the URL that receives the form. It can be a full address, as above, or a path on your own site such as /contact.
• Without an action, the form is sent to the page it is on. That only helps if the page itself is a program that reads forms, such as a PHP page.
• method is GET or POST. Without it, the form uses GET.
• Only named fields are sent. Each field with a name sends a name and value pair. Fields without a name, disabled fields and unticked checkboxes are left out.

GET or POST?

A search form is the classic GET form, because the results page should have a URL you can share:

<form action="/search" method="GET">
  <label for="q">Search</label>
  <input id="q" type="search" name="q" />
  <button>Search</button>
</form>
<!-- Submitting "contact forms" goes to /search?q=contact+forms -->

A contact form should always use POST. Messages and email addresses do not belong in URLs, which end up in browser history and server logs.

What the browser sends

With POST, the browser encodes the fields like a URL query string and sends them in the request body. Spaces become + and special characters are percent-encoded:

POST /contact HTTP/1.1
Content-Type: application/x-www-form-urlencoded

email=ana%40example.com&message=Hello%21+Can+you+call+me%3F

The enctype attribute changes the encoding. You only need enctype="multipart/form-data" for file uploads; for text fields, leave it out and the default above is used.

What happens after submit

A normal form submit is a page navigation: the browser shows whatever the action URL sends back. That is why a form posting straight to an API often lands visitors on a page of raw data. A good form handler sends back a thank-you page, or redirects the browser to one on your site.

To submit without leaving the page, send the form with JavaScript instead. form.action gives you the action URL, and new FormData(form) collects the same fields a normal submit would:

const form = document.querySelector('form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const response = await fetch(form.action, {
    method: 'POST',
    body: new URLSearchParams(new FormData(form)), // sent form-encoded, like a normal submit
  });
  const result = await response.json();
  form.replaceWith(result.success ? 'Thanks, your message was received.' : result.error.message);
});

A different action per button

A submit button can override the form’s settings with formaction, formmethod and formnovalidate. Here, Save draft sends the same fields to another URL and skips the required checks:

<form action="/orders" method="POST">
  <!-- ... fields ... -->
  <button type="submit">Place order</button>
  <button type="submit" formaction="/drafts" formnovalidate>Save draft</button>
</form>

If a submit button has a name, its name and value are sent too, so the receiving page can tell which button was pressed.

Why not action="mailto:"?

A mailto: action does not send anything itself. It asks the visitor’s device to open an email app with the form data pasted in, and the visitor still has to press send. Visitors without an email app set up get nothing at all, and you never find out a message was lost.

An action that sends to your inbox

To receive a contact form without running a server, point the action at a form backend. This form posts to Heartdove, which saves every message, emails you an alert and tracks it until it is delivered or bounces.

<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="_redirect" value="https://your-site.com/thanks" />

  <label for="name">Name</label>
  <input id="name" type="text" name="name" autocomplete="name" required />

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

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send message</button>
</form>

• method="POST" is required: Heartdove only accepts POST.
• No enctype. Heartdove accepts the default form encoding and JSON. It accepts text fields only, so a multipart/form-data form is turned away.
• After submit, visitors see a short “Message received” page. With the optional _redirect field they go to your own thank-you page instead; it must be on a website registered for the form.

Replace YOUR_ACCESS_KEY with your key from a free Heartdove form, and the redirect with your own page or remove it. More on how it works in send an HTML form to email.

Questions

Keep reading

• HTML form validation
• Send an HTML form to email
• Contact form API
• HTML contact form templates