How to add a contact form to a static HTML site (no backend needed)

This post is part of our How to series on getting more from your htmlhost site. Every feature it mentions is documented in the docs.

A plain HTML site is fast, cheap and easy to host. The catch has always been forms: HTML can draw a contact form, but something has to receive what visitors type. Usually that means a server, a plugin or a paid form service.

On htmlhost, the hosting does the receiving. Any form on your published site can send straight to you.

The quickest way: drag one in

1. Open your site in the editor and go to Library → Elements → Forms.
2. Drag Contact Form onto your page. It picks up your site's existing button and input styles, so it looks like it belongs.
3. Publish.

That's it. When someone sends the form, the message appears under Messages on your site's page in the dashboard, and you get an email with it. If the visitor left their email address, replying to that email goes straight to them.

Need a different kind of form? Drop Input Field, Text Area, Dropdown or Checkbox inside it, or start from Email Signup for a newsletter box.

Already have a form?

If you pasted in a design that already has a form, click anything inside it in the editor. If it isn't connected yet, you'll see This form doesn't send anywhere yet with a Send to my inbox button. One click and it's connected. Publish again and it's live.

Writing it yourself

If you prefer to hand-code, point the form at /__hh/form with method="post" and give every field a name:

<form action="/__hh/form" method="post">
  <input type="hidden" name="_form" value="Contact">
  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="you@example.com" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

The hidden _form field names the form, so one site can run several (a contact form and a quote request, say) and you can tell them apart.

What visitors see

By default the form sends in the background and shows "Thanks! Your message has been sent." under it, so visitors stay on your page. You can change that message, or send people to a thank-you page, from your site's Forms tab (for every form) or by right-clicking a form in the editor → Form Settings… (for just that one).

Good to know

• Forms only send from your published site. In the editor preview, pressing Send just tells you so.
• Free accounts receive up to 50 messages a month across all sites; Pro receives up to 5,000.
• Spam protection is built in and needs no CAPTCHA. More on that in how to stop form spam without a CAPTCHA.

Open the editor and add your first form. It takes about a minute.