Does this simple contact form need JavaScript?

No. It is an ordinary form post, which is a browser navigation: the browser sends the fields and follows the response. It works with JavaScript disabled, blocked, or still loading. Add JavaScript only if you want the visitor to stay on the page.

Where do the submissions go?

To the email address the form was created for, and into your dashboard as a searchable record. The email is what you read day to day; the copy in the dashboard is what saves you when somebody deletes the message.

Can I add more fields to the contact form?

Yes — any input with a name attribute is delivered. Add a phone number, a dropdown, a checkbox; nothing needs configuring on our side. Just weigh each one against the drop in completions it will cost you.

Is the endpoint safe to leave in public HTML?

Yes, and it is meant to be there. An endpoint can only ever deliver to the address its form was set up for, so copying it out of your page gains an attacker nothing. Turn on domain locking if you want to stop other sites posting to it.

Simple contact form

Name, email, message, send. This is the form most sites actually need, written the boring way on purpose: no framework, no build step, and nothing clever that will break when you restyle it six months from now.

Live preview: this is the HTML and CSS below, rendered as-is.

Replace YOUR_FORM_ID with a form of your own and this sends to your inbox.

Create your form

contact.html

<form class="contact-form" action="https://submit.formpost.ai/YOUR_FORM_ID" method="POST">
  <h2>Contact us</h2>

  <label for="name">Name</label>
  <input id="name" type="text" name="name" placeholder="Jane Doe" required>

  <label for="email">Email</label>
  <input id="email" type="email" name="email" placeholder="jane@example.com" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" placeholder="How can we help?" required></textarea>

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

contact.css

body {
  margin: 0;
  padding: 32px 16px;
  background: #f6f7f9;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.contact-form {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto;
}

.contact-form h2 {
  margin: 0 0 16px;
  font-size: 22px;
  color: #111827;
}

.contact-form label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  margin-bottom: 16px;
  padding: 10px 12px;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #2563eb;
  outline: 2px solid rgba(37, 99, 235, 0.25);
  outline-offset: 0;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
  padding: 11px 16px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #2563eb;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.contact-form button:hover {
  background: #1d4ed8;
}

Why these three fields

Every field you add costs you submissions — that is the one reliable finding in form research, and it holds whether the field is required or not. Name, email and message are enough to reply to somebody, and anything else you genuinely need can be asked in the reply.

The names matter more than the labels. Call the fields name, email and message and the endpoint can work out who sent the message, set reply-to for you, and put something readable in the subject line. Call them fullname and enquiry and everything still arrives — it just arrives less usefully.

The one line that makes it send

A form on its own does nothing. The action attribute is what turns it into a contact form that sends email:

<form action="https://submit.formpost.ai/YOUR_FORM_ID" method="POST">

Swap YOUR_FORM_ID for the id of a form you created, and every submission is emailed to the address that form was set up for. There is nothing else to install and no server of yours involved.

Accessibility, in two attributes

Every input has a label with a matching for and id. A placeholder is not a label — it disappears the moment somebody starts typing, which is exactly when they need it.
The submit button says what it does. Send message beats Submit, and both beat a bare arrow icon.
required gives you browser-native validation and tells screen readers the field is mandatory, for free.
Keep a visible focus style. The outline rule above replaces the browser default rather than removing it — never set outline: none on its own.

Making it yours

The CSS is deliberately flat: one class on the form, and everything else selected through it. Change the accent colour in two places (the button background and the focus ring) and you have rebranded the whole thing. Widen max-width if it sits in a narrow column, and drop the border-radius to zero if the rest of your site is square.

Test it before you ship it. Load the page, fill the form in and send a real message to yourself — most broken contact forms are broken because nobody ever pressed the button.

Questions about this contact form

Does this simple contact form need JavaScript?: No. It is an ordinary form post, which is a browser navigation: the browser sends the fields and follows the response. It works with JavaScript disabled, blocked, or still loading. Add JavaScript only if you want the visitor to stay on the page.
Where do the submissions go?: To the email address the form was created for, and into your dashboard as a searchable record. The email is what you read day to day; the copy in the dashboard is what saves you when somebody deletes the message.
Can I add more fields to the contact form?: Yes — any input with a name attribute is delivered. Add a phone number, a dropdown, a checkbox; nothing needs configuring on our side. Just weigh each one against the drop in completions it will cost you.
Is the endpoint safe to leave in public HTML?: Yes, and it is meant to be there. An endpoint can only ever deliver to the address its form was set up for, so copying it out of your page gains an attacker nothing. Turn on domain locking if you want to stop other sites posting to it.