Web design & AI
Contact Form: How to Create One That Gets Leads, Not Spam
The fields you actually need, honeypot vs Cloudflare Turnstile vs reCAPTCHA, what CAN-SPAM and the CCPA mean for your form, a copy-ready HTML template and what Chrome let through.
A good contact form asks only for a name, an email and a message, stops spam without making anyone pick traffic lights and tells people what happens to their data. That's how you get more real leads and less junk in your inbox.
We read the documentation from Cloudflare, Google and the FTC, asked ChatGPT, Perplexity and Gemini the same question and tested in Chrome how a real form behaves. None of the three AI tools mentioned privacy law, and the browser happily accepts email addresses that don't exist.
Here's which fields to ask for, how to build the form step by step, which spam protection to use, what US privacy rules require and an HTML template you can adapt.
On this page
What is a contact form, and do you need one?
You need a contact form when you want organized inquiries from your site without posting your email address where bots can scrape it.
A contact form is a short web form (usually name, email and message) that sends a visitor's inquiry to your inbox or CRM. It saves customers from opening their email app and saves you from messages with no way to reply.
What it isn't: a lead-capture landing page or a newsletter signup, even if they share fields. And it isn't always the best option: Notablia, for now, uses one email address per language instead of a form. If your customers prefer texting, a WhatsApp link can work better. It all belongs to the web design of your contact page.
Every message is a potential customer. To track them that way, read what leads are and how to count them.
Forms of contact: form, email, phone or chat?
Customers reach you in five main ways: a contact form, email, phone, live chat and social or messaging apps. Offer two or three, not all of them, because every channel is an inbox someone has to watch.
| Channel | Best for | Watch out for |
|---|---|---|
| Contact form | Quotes and questions that need details | Needs a reply promise and spam protection |
| Email address | Simple businesses, a personal touch | Bots scrape it, and it has no structure |
| Phone | Urgent or high-value sales, local services | Needs a person to answer every call |
| Live chat | Stores with quick pre-sale questions | Needs staff, or a bot that actually helps |
| Social DMs and messaging apps | Brands whose customers already chat there | Messages scatter across apps |
Decide by where your customers already are and how fast you can answer. A plumber in Tampa should lead with a phone number; a consultancy with a long sales cycle should lead with the form. Whatever you pick, write the reply time next to it.
Contact form examples: which fields to include
Ask only for what you need to reply the first time; three fields are almost always enough.
The best-known case is old, from 2008: the agency Imaginary Landscape cut its form from 11 fields to 4 and its conversion rate rose from 5.4 % to 11.9 %, on a very small sample. Newer data points the same way: Zuko, which analyzed 1,362 forms, found the phone field causes a 6.28 % average abandonment rate, almost as much as the email field.
| Field | Required? | Why |
|---|---|---|
| Name | Yes | So you can address the person |
| Yes | So you can reply | |
| Message | Yes | So you know what they want |
| Phone | Optional | Only if you'll actually call |
| Topic (dropdown) | Optional | Useful if different people handle inquiries |
| Company, budget, job title | Better not | Ask in your reply |
A yoga studio in Denver doesn't need a date of birth to answer «Do you have evening classes for beginners?».
How to create a contact form, step by step
Decide who answers first, then choose the tool: that order prevents messages nobody reads.
-
Decide where messages go
An inbox someone checks daily, or your CRM. Set a reply time and write it next to the form.
-
Pick the tool
A WordPress plugin, Google Forms, your site builder's form block or an HTML form connected to a sending service.
-
Add three fields
Name, email and message. Add a fourth only if it changes how you reply.
-
Use visible labels and clear errors
Every field needs a label, not just gray placeholder text. It's what WCAG compliance asks for.
-
Add a privacy notice
Who you are, what you'll use the data for and a link to your privacy policy, right next to the button.
-
Layer your spam protection
A honeypot nobody sees, then Cloudflare Turnstile or reCAPTCHA if spam keeps coming.
-
Test it from another email address
Send three test messages and check whether they land in your inbox or in spam.
-
Build a thank-you page
Confirm the message arrived, repeat your reply time and offer something useful while they wait, like your about page.
WordPress contact form, Google Forms or HTML?
| Option | Best for | Watch out for |
|---|---|---|
| WordPress contact form plugin (Contact Form 7, WPForms) | WordPress sites | Spam protection and styling need setup |
| Google Forms contact form | No website yet, or starting today | It looks external and design is limited |
| Site builder form block (Squarespace, Wix) | Builder sites | Check where submissions are stored |
| Your own HTML contact form | Custom sites | Needs a server or service to send the email |
Good contact form design is mostly subtraction: one column, visible labels, a big button and nothing to make people think.
Contact us page examples: what goes around the form
A good contact us page puts the form where the eye lands first and everything that removes doubt right next to it.
Three layouts cover most businesses. They're patterns, not real companies' pages.
| Business | Above the fold | Below |
|---|---|---|
| Services or agency | Short form, reply time, one line on what happens next | Process, a testimonial, FAQ |
| Local business | Phone, address, hours, map | A form for questions that need detail |
| Online store | Links to order tracking, returns and FAQ | Form with an order-number field |
The contact page design rules that hold up everywhere: a single column, the form visible on a phone without scrolling, labels that stay on screen, one button and the reply time beside it. Skip the stock photo of a smiling person in a headset. That space is better used for the address or the real names of your team.
Put the page in your header and footer, and link it from your about page. Your details also belong in text on the page, not only inside an image.
Contact form with captcha or without: Turnstile, honeypot and reCAPTCHA
The best spam protection is the one customers never see: a honeypot first and, if needed, an invisible check.
| Method | How it works | For the visitor |
|---|---|---|
| Honeypot | A hidden field only bots fill in | Invisible |
| Cloudflare Turnstile | Checks the browser in the background | Almost always invisible |
| reCAPTCHA v3 | Scores each submission from 0.0 to 1.0 | Invisible |
| Image captcha | Asks people to pick photos or type letters | Annoying |
A honeypot is a practical trick, not a standard: OWASP doesn't document it. Turnstile, according to Cloudflare's Turnstile plans, is free with unlimited verifications and doesn't require other Cloudflare services. Google's reCAPTCHA Essentials tier is free up to 10,000 assessments a month and requires a billing account in Google Cloud. One detail almost nobody mentions: per Google's docs, past that quota the classic verification fails open and lets submissions through.
Why am I still getting spam with a captcha?
Because some spam is typed by people or by captcha-solving services, and because a bad setup lets everything through. Stack layers: a honeypot, a minimum time to submit and verification on the server, not only in the browser.
Website contact form privacy: what US law asks for
For a website contact form, US law asks you to keep your privacy promises; extra rules kick in if you email marketing or meet CCPA thresholds.
There's no general federal privacy law that covers every website. The FTC can act if you break the promises in your privacy policy, so write only what you actually do.
| Situation | What applies |
|---|---|
| You only reply to the inquiry | Your privacy policy, and keeping its promises |
| You add people to marketing emails | CAN-SPAM: honor opt-outs within 10 business days and include your postal address |
| Your business meets a CCPA threshold in California | A notice at collection, at or before the form |
The FTC's CAN-SPAM compliance guide covers the email side. For the CCPA, the revenue threshold is $26,625,000 since January 1, 2025, according to the California Privacy Protection Agency.
Do you need a consent checkbox on a contact form?
Not to reply to the person who wrote to you. If you also want to add them to your newsletter, a separate, unchecked box is the clean way to do it, and it's what European rules expect if you have customers there. Never pre-check it.
Basic contact form template you can copy
This basic contact form has labels, an accessible honeypot and a notice; you only need to add the address of your sending service.
<form action="/your-sending-service" method="post">
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<div aria-hidden="true" style="position:absolute;left:-9999px">
<input name="page" tabindex="-1" autocomplete="off">
</div>
<p>We'll only use your details to reply. See our privacy policy.</p>
<button type="submit">Send</button>
</form>On the server, drop any submission where the «page» field is filled. If you'd rather not code, WPForms or your builder's form block does the same in a few clicks.
Review this contact form from my website [paste the HTML or list the fields]. Tell me which fields I can drop for a first inquiry, whether every field has a visible label, whether the privacy notice says who we are and what we use the data for, and how to add an accessible honeypot. Don't invent legal requirements: if something depends on my situation, say so.
HTML contact form test: what Chrome let through
An HTML contact form validates less than you think: the browser accepts typos and a badly hidden honeypot traps real people.
Frequently asked questions about contact forms
How can I create a free contact form?
The fastest free option is Google Forms: create a form with name, email and message fields, then embed it or share the link. If your site runs on WordPress, free plugins like Contact Form 7 or WPForms Lite do the job inside your own pages. Most website builders, like Squarespace or Wix, include a form block at no extra cost. Whatever you pick, send a few test messages and check they reach your inbox, not your spam folder.
How do I make a contact form in Google Sites?
Google Sites doesn't have its own contact form, so you build it in Google Forms and insert it. Create the form at forms.google.com with name, email and message, then open your site, go to Insert and choose Forms to pick it from your Drive. Responses land in the form's Responses tab, and you can send them to a Google Sheet. Turn on email notifications for new responses so you don't miss a lead.
How do I add a contact form in Squarespace?
Edit the page, add a Form block and choose your fields: name, email and message are enough for most businesses. Then set where submissions go in the block's storage settings, such as your email address, and write a short confirmation message. Then test the form from a different email address. Keep the form on your Contact page and link to it from your About page and footer.
Why is my contact form not sending email?
Usually because the email leaves your web server without authentication, so Gmail, Outlook and other providers reject it or drop it in spam. Check the spam folder first. Then send through an authenticated service, such as an SMTP plugin or a transactional email provider, and use a From address on your own domain, not a free Gmail one. Make sure SPF and DKIM are set up for that domain. Finally, send a test from another address and check the plugin's log if it keeps one.
What is Contact Form 7?
Contact Form 7 is a free WordPress plugin for building forms with a simple markup editor. According to wordpress.org, it has over 10 million active installations, which makes it the most widely used option. It's lightweight and flexible, but it has no drag-and-drop builder and doesn't save submissions in your dashboard by default: you need an extra plugin like Flamingo for that. It has a built-in reCAPTCHA integration for spam protection.
What is Cloudflare Turnstile?
Cloudflare Turnstile is a free CAPTCHA alternative that checks whether a visitor is human without making them solve puzzles. It runs in the background in managed, non-interactive or invisible mode, and you don't need to use other Cloudflare services to add it. To set it up, create a widget in the Cloudflare dashboard, place the site key in your form and verify the token on your server with the secret key before accepting the message.
What is the best contact form plugin for WordPress?
There's no single best one; it depends on how you work. Contact Form 7 is free, light and the most installed, but you write the form in markup. WPForms Lite, with over 5 million active installations, gives you a visual builder and includes Turnstile in the free version. Formidable Forms suits more complex forms and calculations. For a basic contact form, choose the one that's easiest for whoever maintains the site, then add spam protection.
Keep going with these guides
- Web design & AI Mood Board: What It Is and How to Make One for Your Brand or Website Read the guide
- Web design & AI Free Stock Photos for Commercial Use: Where to Find Them and Use Them Legally Read the guide
- Web design & AI About Us Page: How to Write One That Builds Trust (with Examples) Read the guide