On this page
Your options, compared
The ways a static site can receive a form, and what each ties you to.
| Approach | Works on any host | Code to maintain | Spam protection | If you change host |
|---|---|---|---|---|
mailto: action | Yes | None | None | Nothing changes |
| Your host’s form feature | No, that host only | None | The host’s own | Rebuild every form |
| A serverless function | No, hosts that run functions | A function and a mail key | You build it | Port the function |
| Form endpoint | Yes | None | Built in | Nothing changes |
The minimal integration
This is the whole integration. It is plain HTML, so it works in any template language and on any host, with no build plugin and no JavaScript.
<form action="https://mtform.co/f/your-form-key" method="POST">
<label>
Name
<input name="name" autocomplete="name" required>
</label>
<label>
Email
<input type="email" name="email" autocomplete="email" required>
</label>
<label>
Message
<textarea name="message" required></textarea>
</label>
<!-- Spam trap: hidden from people, tempting to bots. Leave it empty. -->
<input
type="text"
name="_mtf_honeypot"
tabindex="-1"
autocomplete="off"
aria-hidden="true"
style="position:absolute;left:-9999px"
>
<button type="submit">Send</button>
</form>Paste it into any page or partial. Swap in your own endpoint and fields; keep the _mtf_honeypot input.
Step by step
- 1
Create a form endpoint
Create a form in MakeTheForm. You get a public endpoint URL, which is an address rather than a secret, so it is safe in a public repository.
- 2
Add the form to your template
Paste the form into the page, layout or partial where it belongs, with its action set to the endpoint and method set to POST. Keep the hidden _mtf_honeypot input.
- 3
Choose where visitors land
By default they see a hosted success page. To bring them back to your own thank-you page, add your site to the form’s allowed domains and a hidden _mtf_redirect field that points at the page.
- 4
Deploy and send a test
Deploy as you always do, verify your recipient address once, and submit the live form. It arrives by email and in your inbox.
Common pitfalls
Tying the form to one host
A host’s built-in form feature is convenient until you move. Then every form breaks at once, and the submissions stay behind in the old host’s dashboard.
Fix: Post to an endpoint that does not depend on the host, so a move changes nothing.
Using a relative action
action="/contact" posts back to your own static host, which has no handler and answers with a 404 or a 405.
Fix: Use the full https:// endpoint URL as the action.
Leaving out spam protection because the site is small
Bots find forms by crawling, not by traffic. A static form with no protection gets spam within days of going live.
Fix: Keep the honeypot field from the snippet. It costs visitors nothing.
Troubleshooting
| Symptom | What’s happening | Fix |
|---|---|---|
| 404 or 405 | The form posted to your own site. | Set the action to the absolute endpoint URL, not a path on your domain. |
| 403 | Allowed domains is on and the site’s address is not listed. | Add every address the site is served from, including preview and www variants, or leave the form in public mode. |
Frequently asked questions
Can a static website have a contact form?
Yes. The form is ordinary HTML; only the handling needs a server. Point the form’s action at a hosted endpoint and the static site keeps working exactly as before, with submissions emailed to you and stored.
How do I receive form submissions on a static site?
Send them to a service that runs the server part for you. A form endpoint receives the POST, filters spam, emails you, and keeps a searchable copy, so nothing has to run on your host.
Does this work with Hugo, Jekyll, Eleventy and Astro?
Yes. They all output HTML, and the form is plain HTML. Put it in a layout, partial, include or component and it works the same in each.
Is it safe to put the endpoint URL in a public repository?
Yes. The public form key is an address, not a credential, and it is designed to sit in page source. Your email address never appears in it. To stop other sites posting to your form, restrict it to your own domains.
Keep going
Last reviewed by the MakeTheForm team.