Templates / HTML, CSS
Basic HTML contact form
Portfolio sites, brochure pages, and any static host that only serves files.
Live preview
Preview only — does not submit. Copy the code block below for the real snippet.
Copy-paste code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Contact</title>
<style>
body { font-family: system-ui, sans-serif; max-width: 28rem; margin: 3rem auto; padding: 0 1rem; }
label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
input, textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid #d4d4d4; border-radius: 0.5rem; }
button { margin-top: 1rem; padding: 0.65rem 1rem; border: 0; border-radius: 0.5rem; background: #047857; color: #fff; font-weight: 600; cursor: pointer; }
</style>
</head>
<body>
<h1>Contact</h1>
<form action="https://formheron.com/f/YOUR_KEY" method="POST">
<label for="email">Email</label>
<input id="email" type="email" name="email" required />
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<input type="text" name="_hp" tabindex="-1" autocomplete="off"
aria-hidden="true" style="position:absolute;left:-9999px" />
<button type="submit">Send message</button>
</form>
</body>
</html>What to change
- Replace YOUR_KEY with the public key from your FormHeron dashboard.
- Optional: set a redirect URL on the form to your own /thanks page.
- Add your domain to the origin allowlist before launch.