Contact form examples
21 contact form templates in plain HTML and CSS — free to copy, styled six different ways, and written out for every framework worth naming. Point one at your endpoint and it sends to your inbox.
Contact form designs
Same three fields, six different looks. Every one is plain HTML and CSS you can paste straight into a page.
Simple contact form
Three fields, a button, and about forty lines of CSS. The one to start from.
Modern contact form
A soft card, a gradient button and a proper focus ring. Pure CSS, no library.
Minimal contact form
Underlines instead of boxes, a serif face and a lot of white space.
Responsive contact form
Two columns on desktop, one on a phone. CSS grid and a single media query.
Dark mode contact form
Follows the visitor's system theme through CSS custom properties.
Contact us page
The whole page: address, phone and hours beside the form, in two columns.
By framework
The markup barely changes between stacks — what changes is where the submit handler lives. Pick yours.
HTML contact form
Pure HTML that sends email. No JavaScript, no PHP, nothing to install.
CSS contact form
Every state styled: hover, focus-visible, invalid, disabled, placeholder.
JavaScript contact form
Vanilla fetch with a real status message and proper error handling.
React contact form
One component, four states, no form library and no field-by-field state.
Next.js contact form
A Server Action, so it submits with client JavaScript switched off.
Vue contact form
A single-file component with submit.prevent and a status ref. Works in Nuxt.
Tailwind contact form
Utility classes only — no @apply, no component layer, no config changes.
Bootstrap contact form
Bootstrap 5 classes as they come — form-control, form-label, btn-primary.
PHP contact form
The mail() version, and the reason most people should delete it.
Contact forms that do more
File uploads, captcha, validation, auto-reply. All of it without adding a server of your own.
Contact form with file upload
One enctype and a file input. Attachments ride along with the email.
Contact form with captcha
Turnstile, hCaptcha or reCAPTCHA — plus the honeypot that does most of the work.
AJAX contact form
Submit without a page reload and swap in a real confirmation.
Contact form with validation
Native constraints, custom messages, and errors a screen reader announces.
Contact form with auto-reply
Acknowledge the sender in seconds, in your words, with their message quoted.
Contact form without a backend
For static sites: no server, no database, no serverless function.
What every one of these has in common
One attribute. A contact form is an ordinary HTML form until you tell the browser where to send it, and the action is what turns it into something that reaches your inbox:
<form action="https://submit.formemailapi.com/YOUR_FORM_ID" method="POST">That is the whole integration. There is no script tag, no package to install, no build step and no server of your own — which is why these work identically on GitHub Pages, Netlify, a page builder, or a folder on shared hosting. Swap YOUR_FORM_ID for the id of a form you created and the example is live.
Which one should you take?
If you are not sure, take the simple contact form — three fields and about forty lines of CSS, which is what most sites need and all most sites should ask for. Building a whole page rather than dropping a form into one? The contact us page example puts an address, a phone number and opening hours beside it, for the visitors who were never going to fill anything in.
Already in a framework? The markup barely changes — what changes is where the submit handler lives, so go straight to the React, Next.js or Vue version. And if you came here to replace a PHP script, the PHP contact form page has an honest account of what mail() gets wrong.
Before you put one live
- Give every input a name attribute. Browsers only submit fields that have one, and this is the usual reason a field silently disappears from the email.
- Add the hidden honeypot field. It is one line, it is invisible to people, and it stops most automated submissions without asking anybody to solve a puzzle.
- Set a redirect so visitors land on your own thank-you page rather than ours.
- Send yourself a real message from the finished page. Most broken contact forms are broken because nobody ever pressed the button.
Contact form templates: common questions
- Are these contact form templates free?
- The code is free to copy and use however you like, including commercially — there is nothing to attribute and no licence to accept. Sending the submissions is free too, up to 250 messages a month with unlimited forms, and nothing expires.
- How do I make an HTML contact form actually send email?
- Set the form's action to an endpoint that handles the sending. HTML on its own cannot open a mail connection, which is why contact forms traditionally needed a PHP script or a serverless function; pointing the action somewhere that already does it removes both.
- Do I need a backend or a database?
- No. Every example here is a static HTML file. The submission is emailed to you and kept as a searchable record, so there is no server of yours involved and nothing to deploy or keep patched.
- Can I change the fields and the styling?
- All of it. These are ordinary form elements with ordinary CSS — no widget, no iframe, no class names you have to keep. Any input with a name attribute is delivered, so add or remove fields freely.
Pick one and give it an endpoint
Creating a form takes about a minute and costs nothing. FormEmailAPI handles the sending, the spam and the record of what came in; the markup stays yours.
Create your form