HTML contact form send to email

A static page can collect a message and still have nowhere to put it. The browser will not open your mailbox. This guide shows an html contact form send to email path that stays as plain markup: the form posts to a small endpoint, and that endpoint writes the fields to the address you saved.

What the page is responsible for

The page owns the labels, the fields, and the look. It does not own delivery. A contact block on a brochure site, a docs site, or a one-page portfolio usually has three inputs: a name, an email, and a message. Those names become the keys in the mail you receive. Keep them short and readable. name, email, and message are enough for a first version. That is the whole job of an html contact form send to email block: collect three answers and hand them off.

You do not need a framework to render the form. A file named contact.html on any host that can serve files is a complete front end. The website contact form page shows the same markup with a public demo key so you can watch one submission land before you create an account.

The markup

<form action="https://getformpost.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input
    type="text"
    name="botcheck"
    style="display:none"
    tabindex="-1"
    autocomplete="off"
  />
  <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>
  <button type="submit">Send</button>
</form>

method must be POST. A GET would put the message in the query string, where it lands in logs and browser history. action is the submit endpoint on the form service, not a mailto: link. mailto: opens the visitor's own mail app and drops anyone who does not have one configured.

The hidden access_key tells the endpoint which inbox to use. Create the key from the dashboard after you sign up. The key is public: it ships in the HTML, the same way a map embed key does. It is not your account password. If a key is abused, rotate it. Old pages stop delivering until you paste the new value. That is the whole recovery step.

What happens after Send

The endpoint reads the body as URL-encoded fields, multipart fields, or a JSON object. File inputs are ignored. Empty fields are dropped. Reserved names (access_key, redirect, _subject, the honeypot names) are not copied into the mail. Everything else is stored and written into a plain message whose reply-to is the visitor's email when that value is a single address.

A browser that asks for HTML, and an inbox that has a saved thank-you URL, receives a redirect to that exact URL. The form cannot pick a different host. A script that sends Accept: application/json, or sets _reply to json, gets a JSON object with success and never follows a redirect. Without either, the visitor sees a short confirmation page.

Spam and the monthly cap

Bots fill every field they can see, including fields they should not see. The botcheck input is hidden with CSS and left empty by a person. If it contains anything, the endpoint answers with success and stores nothing. That fake success is deliberate: a bot that hears an error will try a new payload. A person never fills the field, so a real html contact form send to email still arrives.

A second limit is time. The same address, and the same key, can post once every few seconds. That stops a loop without blocking a person who corrects a typo and sends again a moment later. The free plan stores 100 submissions per UTC month. When the count reaches the cap, the endpoint stores later posts locked and the dashboard shows the upgrade. The free contact form page lists the numbers.

What to leave out of the form

Do not ask for passwords, card numbers, or government identifiers. The payload is emailed and stored so you can read it later. That is the right shape for a question about a project. It is the wrong shape for a secret. Tell the visitor, in a sentence next to the button, that the message is emailed to you. The privacy page states the same thing for the service as a whole.

If you later need a server you control, the html form to email php note shows the mail() version and the reasons most static hosts cannot run it. If you want the request shape without repeating this markup, the submit form to email note covers JSON clients and the redirect field.

Publish only after you have watched one html contact form send to email round trip from the live site, not from a draft preview that never leaves your laptop.

Ship the html contact form send to email block only after the five checks below.

A checklist before you publish

1. Create an account and copy the access key into the hidden input.
2. Set the notify address to a mailbox you actually read.
3. Submit the form yourself from the published URL, not from a file opened on disk. Some hosts treat a file:// page as a different origin, and the browser will block the post.
4. Confirm the mail, then confirm the same row in the dashboard. Delivery and storage are separate: a mail failure still keeps the row so you can read it.
5. Add the honeypot. Leaving it out works, and it also invites the first scraper that finds the page.

The form to email page is the shorter product explanation if a teammate needs the idea without the markup. For the page you are shipping, keep the form in your own CSS. The endpoint does not inject a widget, a stylesheet, or a tracking script.

You are done with an html contact form send to email once a stranger can complete it on a phone, you receive the fields, and you can reply from the same thread. The rest is the page around the form: a heading, a sentence about when you answer, and a link back to the work you want them to see.