HTML Contact Form Template That Emails You (Copy and Paste)

Three HTML contact form templates you can paste into any page, each wired to email you. They post to a form endpoint, so there is no PHP file, no SMTP setup and no JavaScript required. Replace YOUR_FORM_ID with your own, set the address that should receive submissions, and the form is live.

Full disclosure: ShipMyForm is our product and provides the endpoint in these templates. The markup itself is plain HTML that works with any endpoint that accepts a form POST.

Before you paste: the one thing to change

Every template has this line:

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">

YOUR_FORM_ID comes from creating a form, which takes about a minute and is free. The endpoint receives the submission, stores it, filters spam, and emails it to the address you set. If you want to know why the form cannot simply email you by itself, how to send an HTML form to email explains the mechanics.

Template 1: the minimal email form

Two fields. Right for a footer, a sidebar, or a "questions?" box.

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST" class="smf-form">
  <label>
    Your email
    <input type="email" name="email" autocomplete="email" required />
  </label>
  <label>
    Message
    <textarea name="message" rows="4" required></textarea>
  </label>
  <button type="submit">Send</button>
</form>

The visitor's email becomes the Reply-To of the notification, so replying from your inbox reaches them.

Template 2: the full contact form with spam protection

Name, email, subject line, message, a honeypot field, and a subject for the email you receive. This is the one most sites want.

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST" class="smf-form">
  <!-- Subject line of the email you receive -->
  <input type="hidden" name="_subject" value="New message from the contact form" />

  <label>
    Name
    <input type="text" name="name" autocomplete="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" autocomplete="email" required />
  </label>
  <label>
    Subject
    <input type="text" name="subject" maxlength="120" />
  </label>
  <label>
    Message
    <textarea name="message" rows="6" required></textarea>
  </label>

  <!-- Honeypot: hidden from people, filled in by bots. Leave it empty. -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         aria-hidden="true" style="position:absolute;left:-9999px" />

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

Three details worth keeping:

• autocomplete tokens let browsers and password managers fill the form in one tap, and they satisfy an accessibility requirement outright.
• The honeypot is a hidden text field. Real visitors never see it, so it stays empty; bots fill every field, so theirs gets rejected. No CAPTCHA needed for most spam. The full spam setup adds rate limiting and server-side classification.
• _subject sets the subject of the email you receive, which is how you tell messages from different forms apart in your inbox.

Template 3: contact form with file upload

For quote requests, job applications, or support forms where an attachment helps. The form needs enctype="multipart/form-data", and file uploads are a paid-plan feature on most backends, including ours.

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST"
      enctype="multipart/form-data" class="smf-form">
  <input type="hidden" name="_subject" value="New quote request" />
  <label>
    Name
    <input type="text" name="name" autocomplete="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" autocomplete="email" required />
  </label>
  <label>
    Tell us about the job
    <textarea name="message" rows="5" required></textarea>
  </label>
  <label>
    Photos or documents
    <input type="file" name="attachment" accept="image/*,.pdf" multiple />
  </label>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
         aria-hidden="true" style="position:absolute;left:-9999px" />
  <button type="submit">Request a quote</button>
</form>

Attachments arrive as links in the notification email and are stored with the submission.

The styles

Each template uses the class smf-form and plain elements, so it inherits your site's styles if you do nothing. If you want it to look finished immediately, this block is enough:

.smf-form { display: grid; gap: 14px; max-width: 480px; font: 15px/1.5 system-ui, sans-serif; }
.smf-form label { display: grid; gap: 6px; font-weight: 500; }
.smf-form input, .smf-form textarea {
  font: inherit; padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 8px;
}
.smf-form input:focus, .smf-form textarea:focus { outline: 2px solid #111; outline-offset: 1px; }
.smf-form button {
  font: inherit; font-weight: 600; padding: 11px 16px; border: 0; border-radius: 8px;
  background: #111; color: #fff; cursor: pointer; justify-self: start;
}

Want a different accent, dark mode, Tailwind classes, or React and Vue versions? The contact form generator builds all of these from the same fields.

What happens when someone submits

1. The browser posts the fields to the endpoint. Nothing about email is in the page.
2. The endpoint checks the honeypot, rate limits by IP, and runs spam classification.
3. Clean submissions are stored and emailed to your notification address, sent from an authenticated domain with the visitor as Reply-To.
4. The visitor lands on a thank-you page: the hosted default, or a URL you set in the form's settings.

Step 3 is why these forms do not land in spam. The classic mistake is sending the notification as the visitor, which fails authentication for a domain you do not control. Why form emails go to spam covers it if you are fixing an existing setup.

Customising the templates

• Add a field. Any input with a name is included in the email and the stored submission. No configuration needed.
• Make something optional. Remove required.
• Restrict what is accepted. Add server-side rules in the form's settings, so a phone field must look like a phone number or a budget must be a number. Validation rules return per-field errors to fetch() callers.
• Redirect after submit. Set the redirect URL in settings. It has to be on one of the form's allowed domains.
• Restrict which sites can submit. Add your domain to allowed domains, so the endpoint refuses posts from anywhere else.

Next steps

• Why the form cannot email you by itself, and every method compared: HTML form to email
• Same form, no page reload: submit a form with fetch()
• Design it right: form UX best practices
• Start free: get your form ID, 100 submissions a month, no card.