Sign inStart free

Free tool

Contact form generator

Pick your fields, set the order and the dropdown options, and copy code that is ready to send: plain HTML, Bootstrap 5, Tailwind CSS or React. Building is free and needs no account.

Updated 27 October 2026

Build your contact form

Choose the fields, their order and your dropdown options. The preview and the code update as you go, with the hidden spam trap and the right field names already in place. Nothing is sent anywhere while you build.

Start from:
A full address on your own website. Leave empty to show a simple confirmation.
Preview
contact.html
<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label for="hf-name">Name</label>
  <input id="hf-name" type="text" name="name" autocomplete="name" required />

  <label for="hf-email">Email</label>
  <input id="hf-email" type="email" name="email" autocomplete="email" required />

  <label for="hf-subject">What is it about?</label>
  <select id="hf-subject" name="subject" required>
    <option value="" disabled selected>Choose one</option>
    <option>Sales question</option>
    <option>Support</option>
    <option>Billing</option>
    <option>Something else</option>
  </select>

  <label for="hf-message">Message</label>
  <textarea id="hf-message" name="message" rows="5" required></textarea>

  <!-- Hidden spam trap: people never see it, bots tick it -->
  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send message</button>
</form>

The form needs an access key to send. Create a free form (no card needed), then replace YOUR_ACCESS_KEY with your key and register your website.

What the generated code includes

Every field gets a visible label and a field name that arrives as written, so your inbox and alert emails read the way you built the form. Email and phone fields use the right input types, so phones show the right keyboard and browsers check the address before sending.

  • Field types: short text, email, phone, long text, dropdown, choose one (radio buttons), choose any (checkboxes) and a single agreement box.
  • A hidden spam trap. People never see it; bots that fill in every field are quarantined instead of alerting you.
  • A subject line for every message, or a subject dropdown, and an optional thank-you page on your own site.
  • Four styles: plain HTML, Bootstrap 5, Tailwind CSS and a React component.

Make it send

A form on its own has nowhere to send. The code posts to Heartdove, which saves every message to your inbox first, then emails you an alert and tracks it until it is delivered or bounces.

  1. Create a free form. It takes about a minute and needs no card.
  2. Replace YOUR_ACCESS_KEY with your form’s key, and register the website the form will live on.
  3. Paste the code into your page and send yourself a test message.

The free plan includes 500 messages and 500 email alerts a month. See every plan.

Where it works

Anywhere you can paste HTML: a static site, a site builder that allows an embed or custom code block, or a React app. There are step-by-step guides for Framer, Webflow, Next.js, Astro and more platforms.

Questions

Is the contact form generator free?

Yes. Building and copying the code is free and needs no account. To receive messages you need a Heartdove form, and the free plan includes 500 messages a month.

Do I need PHP or a server?

No. The form posts straight to Heartdove, which stores the message and sends the email alert. There is no PHP mail script or server code to look after.

How do I stop spam?

The generated code includes a hidden trap field. Heartdove also checks that submissions come from your registered website, limits how often one visitor can send, scores each message and quarantines likely spam for review. Cloudflare Turnstile can be switched on per form.

Is my form saved?

Your fields are remembered in this browser only, so you can come back to them. Nothing is sent anywhere while you build.

Can I change the design?

Yes. The code uses plain elements and, for Bootstrap and Tailwind, those frameworks’ own classes, so it takes your site’s styles. Keep the action, the access key and the hidden trap field; everything else is yours to change.

Never lose another enquiry.

Connect your first form in a few minutes. Your existing design stays exactly as it is.

Start free See the demo