Contact form template

A free contact us form with name, email and message fields. Copy the HTML, CSS and JS, or use the React, Next.js, Vue, Svelte or Astro version.

Use this template Copy the code

Free to use. Updated Oct 29, 2026

Live preview

Try it. The preview checks the fields like the real form, but nothing is sent.

Copy the contact form code

Pick your stack. Styled code matches the preview, with the fields, text, theme and color you set above. Unstyled code has the same fields as bare markup that picks up your own CSS, like Tailwind.

contact-form.html

1<form id="nf-contact-form" class="nf-form" action="https://api.nisuform.com/s/YOUR_FORM_KEY" method="POST">
2  <style>
3#nf-contact-form {
4  --nf-accent: #e60058;
5  --nf-on-accent: #ffffff;
6  --nf-text: #171717;
7  --nf-muted: #525252;
8  --nf-field: #f5f5f5;
9  --nf-field-text: #171717;
10  --nf-placeholder: #6b6b6b;
11  --nf-control: #8a8a8a;
12  --nf-error: #b91c1c;
13  color-scheme: light;
14  box-sizing: border-box;
15  width: 100%;
16  max-width: 480px;
17  margin: 0;
18  padding: 28px;
19  border: 1px solid rgba(0, 0, 0, 0.08);
20  border-radius: 16px;
21  background: linear-gradient(180deg, #ffffff, #ffffff);
22  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.12);
23  color: var(--nf-text);
24  font: inherit;
25  font-size: 16px;
26  line-height: 1.5;
27  text-align: left;
28}
29#nf-contact-form *, #nf-contact-form *::before, #nf-contact-form *::after { box-sizing: border-box; }
30#nf-contact-form [hidden] { display: none !important; }
31#nf-contact-form .nf-title { margin: 0; font-size: 1.25em; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: var(--nf-text); }
32#nf-contact-form .nf-desc { margin: 6px 0 0; font-size: 0.9375em; color: var(--nf-muted); }
33#nf-contact-form .nf-fields { display: grid; gap: 18px; margin-top: 22px; }
34#nf-contact-form .nf-head + .nf-fields { margin-top: 22px; }
35#nf-contact-form > .nf-fields:first-child { margin-top: 0; }
36#nf-contact-form .nf-field { margin: 0; padding: 0; border: 0; min-width: 0; }
37#nf-contact-form .nf-label { display: block; margin: 0 0 6px; padding: 0; font-size: 0.875em; font-weight: 600; color: var(--nf-text); }
38#nf-contact-form .nf-req { color: var(--nf-muted); font-weight: 400; }
39#nf-contact-form .nf-help { margin: 6px 0 0; font-size: 0.8125em; color: var(--nf-muted); }
40#nf-contact-form .nf-input { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--nf-field); color: var(--nf-field-text); font: inherit; font-size: 1em; line-height: 1.4; outline: 2px solid transparent; outline-offset: 1px; transition: border-color 150ms, box-shadow 150ms; }
41#nf-contact-form input.nf-input, #nf-contact-form select.nf-input { height: 2.75em; padding-top: 0; padding-bottom: 0; }
42#nf-contact-form textarea.nf-input { min-height: 112px; padding-top: 10px; padding-bottom: 10px; resize: vertical; }
43#nf-contact-form .nf-input::placeholder { color: var(--nf-placeholder); opacity: 1; }
44#nf-contact-form .nf-input:hover { border-color: color-mix(in srgb, var(--nf-text) 14%, transparent); }
45#nf-contact-form .nf-input:focus { border-color: var(--nf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
46#nf-contact-form .nf-input:user-invalid { border-color: var(--nf-error); }
47#nf-contact-form .nf-input:user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-error) 24%, transparent); }
48#nf-contact-form .nf-input:-webkit-autofill { -webkit-text-fill-color: var(--nf-field-text); caret-color: var(--nf-field-text); box-shadow: inset 0 0 0 100px var(--nf-field); }
49#nf-contact-form .nf-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--nf-field), 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
50#nf-contact-form input[type="number"].nf-input { -moz-appearance: textfield; appearance: textfield; }
51#nf-contact-form input[type="number"].nf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
52#nf-contact-form input[type="number"].nf-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
53#nf-contact-form input[type="date"].nf-input { min-width: 0; text-align: left; }
54#nf-contact-form input[type="date"].nf-input::-webkit-date-and-time-value { text-align: left; }
55#nf-contact-form input[type="date"].nf-input.nf-empty:not(:focus) { color: var(--nf-placeholder); }
56#nf-contact-form input[type="date"].nf-input::-webkit-calendar-picker-indicator { margin: 0; padding: 4px; border-radius: 6px; opacity: 0.55; cursor: pointer; transition: opacity 150ms; }
57#nf-contact-form input[type="date"].nf-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
58#nf-contact-form select.nf-input { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23525252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; cursor: pointer; }
59#nf-contact-form select.nf-input:has(option[value=""]:checked) { color: var(--nf-placeholder); }
60#nf-contact-form select.nf-input option { color: var(--nf-field-text); }
61#nf-contact-form .nf-options { display: grid; gap: 8px; }
62#nf-contact-form .nf-option { display: flex; align-items: center; gap: 10px; min-height: 2.75em; margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nf-text) 14%, transparent); border-radius: 10px; background: transparent; color: var(--nf-text); font-size: 0.9375em; line-height: 1.4; cursor: pointer; transition: border-color 150ms, background-color 150ms; }
63#nf-contact-form .nf-option:hover { border-color: color-mix(in srgb, var(--nf-text) 28%, transparent); }
64#nf-contact-form .nf-option:has(input:checked) { border-color: var(--nf-accent); background: color-mix(in srgb, var(--nf-accent) 8%, transparent); }
65#nf-contact-form .nf-option span { min-width: 0; overflow-wrap: anywhere; }
66#nf-contact-form .nf-option input { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--nf-control); border-radius: 50%; background: transparent; outline: 2px solid transparent; cursor: pointer; transition: border-color 150ms, box-shadow 150ms; }
67#nf-contact-form .nf-option input:checked { border-color: var(--nf-accent); background: radial-gradient(circle, var(--nf-on-accent) 0 3px, var(--nf-accent) 3.5px); }
68#nf-contact-form .nf-option input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
69#nf-contact-form .nf-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 0.9375em; line-height: 1.5; color: var(--nf-text); cursor: pointer; }
70#nf-contact-form .nf-check input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--nf-control); border-radius: 6px; background: var(--nf-field) center / 14px 14px no-repeat; outline: 2px solid transparent; cursor: pointer; transition: background-color 150ms, border-color 150ms, box-shadow 150ms; }
71#nf-contact-form .nf-check input:checked { border-color: var(--nf-accent); background-color: var(--nf-accent); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l5%205l10%20-10%22%2F%3E%3C%2Fsvg%3E"); }
72#nf-contact-form .nf-check input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
73#nf-contact-form .nf-check input:user-invalid { border-color: var(--nf-error); }
74#nf-contact-form .nf-rating { display: flex; flex-wrap: wrap; margin: 0 0 0 -4px; }
75#nf-contact-form .nf-rating label { display: inline-flex; padding: 4px; border-radius: 8px; color: var(--nf-control); color: color-mix(in srgb, var(--nf-control) 45%, transparent); cursor: pointer; transition: color 150ms; }
76#nf-contact-form .nf-rating svg { width: 30px; height: 30px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: transform 150ms; }
77#nf-contact-form .nf-rating input:checked + label, #nf-contact-form .nf-rating label:has(~ input:checked) { color: var(--nf-accent); }
78#nf-contact-form .nf-rating:hover input + label { color: var(--nf-control); color: color-mix(in srgb, var(--nf-control) 45%, transparent); }
79#nf-contact-form .nf-rating:hover label:hover, #nf-contact-form .nf-rating:hover label:has(~ label:hover) { color: var(--nf-accent); }
80#nf-contact-form .nf-rating label:active svg { transform: scale(0.88); }
81#nf-contact-form .nf-rating input:focus-visible + label { outline: 2px solid var(--nf-accent); outline-offset: 0; }
82#nf-contact-form .nf-file { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 16px; border: 1.5px dashed var(--nf-control); border-color: color-mix(in srgb, var(--nf-control) 55%, transparent); border-radius: 10px; background: var(--nf-field); color: var(--nf-muted); text-align: center; transition: border-color 150ms, background-color 150ms, box-shadow 150ms; }
83#nf-contact-form .nf-file-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
84#nf-contact-form .nf-file svg { width: 22px; height: 22px; margin-bottom: 4px; }
85#nf-contact-form .nf-file-text { margin: 0; max-width: 100%; font-size: 0.875em; overflow-wrap: anywhere; }
86#nf-contact-form .nf-file-cta { font-weight: 600; color: var(--nf-text); }
87#nf-contact-form .nf-file-types { margin: 0; font-size: 0.75em; color: var(--nf-placeholder); }
88#nf-contact-form .nf-file:hover { border-color: var(--nf-control); }
89#nf-contact-form .nf-file:focus-within { border-color: var(--nf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 24%, transparent); }
90#nf-contact-form .nf-file.nf-file-over { border-color: var(--nf-accent); background: color-mix(in srgb, var(--nf-accent) 8%, var(--nf-field)); }
91#nf-contact-form .nf-file.nf-file-chosen { border-style: solid; border-color: var(--nf-accent); }
92#nf-contact-form .nf-file.nf-file-chosen .nf-file-text { font-weight: 600; color: var(--nf-text); }
93#nf-contact-form .nf-file:has(.nf-file-input:user-invalid) { border-color: var(--nf-error); }
94#nf-contact-form .nf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
95#nf-contact-form .nf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
96#nf-contact-form .nf-captcha { margin-top: 18px; }
97#nf-contact-form .nf-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 22px 0 0; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--nf-accent); color: var(--nf-on-accent); font: inherit; font-size: 1em; font-weight: 600; cursor: pointer; transition: filter 150ms, transform 150ms; }
98#nf-contact-form .nf-submit:hover { filter: brightness(0.94); }
99#nf-contact-form .nf-submit:active { transform: scale(0.98); }
100#nf-contact-form .nf-submit:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 3px; }
101#nf-contact-form .nf-submit:disabled { opacity: 0.6; cursor: default; }
102#nf-contact-form .nf-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--nf-error) 10%, transparent); font-size: 0.875em; color: var(--nf-error); }
103#nf-contact-form.nf-sent { display: flex; flex-direction: column; justify-content: center; min-height: min(var(--nf-height, 0px), 440px); }
104#nf-contact-form .nf-success { display: flex; flex-direction: column; align-items: center; padding: 20px 0; text-align: center; outline: none; }
105#nf-contact-form .nf-success-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 20px; border-radius: 50%; background: var(--nf-accent); color: var(--nf-on-accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--nf-accent) 12%, transparent); }
106#nf-contact-form .nf-success-icon svg { display: block; width: 28px; height: 28px; margin: 0; stroke-dasharray: 1; }
107#nf-contact-form .nf-success-title { margin: 0; max-width: 24em; font-size: 1.125em; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; color: var(--nf-text); text-wrap: balance; overflow-wrap: anywhere; }
108#nf-contact-form .nf-success-text { margin: 0; max-width: 30em; font-size: 0.9375em; line-height: 1.5; color: var(--nf-text); text-wrap: pretty; overflow-wrap: anywhere; }
109#nf-contact-form .nf-success-title + .nf-success-text { margin-top: 6px; color: var(--nf-muted); }
110#nf-contact-form.nf-sent .nf-success { animation: nf-success-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }
111#nf-contact-form.nf-sent .nf-success-icon { animation: nf-success-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
112#nf-contact-form.nf-sent .nf-success-icon path { animation: nf-success-draw 360ms 160ms cubic-bezier(0.65, 0, 0.35, 1) both; }
113@keyframes nf-success-in { from { opacity: 0; transform: translateY(6px); } }
114@keyframes nf-success-pop { from { transform: scale(0.6); } }
115@keyframes nf-success-draw { from { stroke-dashoffset: 1; } }
116@media (prefers-reduced-motion: reduce) { #nf-contact-form * { transition: none !important; animation: none !important; } }
117  </style>
118  <div class="nf-head">
119    <h2 class="nf-title">Let’s talk</h2>
120    <p class="nf-desc">Send us a message and we will get back to you soon.</p>
121  </div>
122  <div class="nf-fields">
123    <div class="nf-field">
124      <label class="nf-label" for="nf-contact-form-name">Name<span class="nf-req" aria-hidden="true"> *</span></label>
125      <input class="nf-input" id="nf-contact-form-name" name="name" type="text" autocomplete="name" placeholder="Jane Smith" required>
126    </div>
127    <div class="nf-field">
128      <label class="nf-label" for="nf-contact-form-email">Email<span class="nf-req" aria-hidden="true"> *</span></label>
129      <input class="nf-input" id="nf-contact-form-email" name="email" type="email" autocomplete="email" placeholder="jane@example.com" required>
130    </div>
131    <div class="nf-field">
132      <label class="nf-label" for="nf-contact-form-message">Message<span class="nf-req" aria-hidden="true"> *</span></label>
133      <textarea class="nf-input" id="nf-contact-form-message" name="message" rows="4" placeholder="Tell us about your project" required></textarea>
134    </div>
135  </div>
136  <div class="nf-hp" aria-hidden="true"><input type="text" name="_gotcha" tabindex="-1" autocomplete="off"></div>
137  <button class="nf-submit" type="submit">Send message</button>
138  <p class="nf-error" role="alert" hidden></p>
139  <div class="nf-success" role="status" tabindex="-1" hidden>
140    <span class="nf-success-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M5 12l5 5l10 -10" pathLength="1"/></svg></span>
141    <p class="nf-success-title">Thanks!</p>
142    <p class="nf-success-text">We got your message and will reply soon.</p>
143  </div>
144</form>
145<script>
146(function () {
147  var form = document.getElementById("nf-contact-form")
148  if (!form || !window.fetch) return
149  var started = Date.now()
150  var button = form.querySelector('.nf-submit')
151  var error = form.querySelector('.nf-error')
152  var success = form.querySelector('.nf-success')
153  form.addEventListener('submit', function (event) {
154    event.preventDefault()
155    var data = new FormData(form)
156    data.set('_elapsed', String(Date.now() - started))
157    var label = button.textContent
158    button.disabled = true
159    button.textContent = 'Sending...'
160    error.hidden = true
161    fetch(form.action, {
162      method: 'POST',
163      headers: { Accept: 'application/json' },
164      body: new URLSearchParams(data),
165    })
166      .then(function (response) {
167        return response.json().catch(function () { return {} }).then(function (body) {
168          if (!response.ok || !body.ok) throw new Error(body.message || 'Something went wrong. Please try again.')
169        })
170      })
171      .then(function () {
172        var redirect = form.getAttribute('data-redirect')
173        if (redirect) {
174          window.location.href = redirect
175          return
176        }
177        form.style.setProperty('--nf-height', form.offsetHeight + 'px')
178        Array.prototype.forEach.call(form.children, function (child) {
179          if (child !== success && child.tagName !== 'STYLE') child.hidden = true
180        })
181        form.classList.add('nf-sent')
182        success.hidden = false
183        success.focus()
184      })
185      .catch(function (reason) {
186        error.textContent = reason && reason.message ? reason.message : 'Something went wrong. Please try again.'
187        error.hidden = false
188      })
189      .finally(function () {
190        button.disabled = false
191        button.textContent = label
192        if (window.turnstile) window.turnstile.reset()
193      })
194  })
195})()
196</script>

Includes the CSS and a small script that sends the form without a page reload and shows the success message. HTML guide

Your form key

Pasted into the code for you.

What's in this contact form

This form asks for a name, an email address to reply to and a message. All three fields are required, and the browser checks the email address before the form is sent.

Field	Name	Type	Required
Name	`name`	Short text	Yes
Email	`email`	Email	Yes
Message	`message`	Long text	Yes

The name is what each answer is saved under in your inbox and CSV export. To add, remove or rename fields, use the field editor above and copy the code again. Fields you add to the code by hand later are saved too, because Nisuform keeps every named input.

Add it to your site

Create a free form
Sign up for Nisuform and create a form from the Contact form template, so the dashboard knows its fields. Copy the endpoint from its Setup tab. The last part is your form key.
Paste the code
Copy the code for your stack and paste it where the form should appear. Replace YOUR_FORM_KEY with your key, or type the key under the code and copy it again.
Send a test
Submit the form once. It appears in your inbox, and you get an email within seconds.

When to use it

A "Contact us" page on a business or agency website
An enquiry form on a portfolio or freelancer site
A get-in-touch section at the bottom of a landing page
Static sites on GitHub Pages, Netlify or Cloudflare Pages, where there is no server to run PHP

Customize it

Open a field in the editor above to change its label, type, placeholder, options or help text, make it required, or move it up and down. The Text tab edits the title, description, button label and the message people see after they send the form.

Pick a theme and an accent color in the preview and the styled code updates to match. The colors live in CSS variables at the top of the style block, so you can also change --nf-accent by hand later. The button, focus rings and selected options follow it.

Add a subject or phone field

Copy one of the field blocks and give it a new name, like subject or phone. Nisuform saves every named field, so the new answer appears in your inbox.

Send messages to your team

Every submission is emailed to you. On Pro, notifications can also go to other addresses or to Slack, Discord and Telegram.

Reply automatically

On Pro, turn on auto-replies to email the sender a confirmation with their own answers in it.

Use your own thank-you page

The styled form shows its success message in place. The unstyled form shows the Nisuform thank-you page, or on Pro, redirects to a page on your site.

Spam protection is built in

Every version includes a hidden _gotcha field. People never see it, bots fill it in, and Nisuform drops those submissions without telling them. The JavaScript versions also send _elapsed, how long the form was open, so a form sent faster than a person could type is dropped too. Rate limits, link checks and duplicate checks run on every submission, and you can turn on Cloudflare Turnstile or Google reCAPTCHA on forms that get a lot of spam. Read more about spam filtering.

Works with any stack

The HTML version works anywhere you can paste HTML, including WordPress, Webflow, Framer, Squarespace and static sites. The React version is a component you import, and the Next.js version is the same component marked as a client component, so it works in the App Router and the Pages Router. The Vue version is a single-file component that also works in Nuxt, the Svelte version works in Svelte 5 and SvelteKit, and the unstyled Astro version ships no client-side JavaScript at all.

Frequently asked questions

Does this contact form work without PHP or a server?

Yes. The form posts straight to your Nisuform endpoint, which filters spam, stores the submission and emails you. You do not need PHP, a database or a server, so it works on any static site.

How do I get contact form submissions by email?

Create a free form in Nisuform, replace YOUR_FORM_KEY in the code with your form key and publish the page. Every new submission is emailed to you within seconds and saved in your inbox.

Can I use this contact form on GitHub Pages, Webflow or WordPress?

Yes. It is plain HTML, CSS and JavaScript, so it works anywhere you can paste HTML, including GitHub Pages, Netlify, Cloudflare Pages, Webflow embeds, Framer and WordPress custom HTML blocks.

Is this contact form template free?

Yes. The template is free to copy and change, and the Free plan includes 100 submissions a month and 3 forms with spam filtering and email alerts. No credit card is needed.

Contact form template

Live preview

Copy the contact form code

What's in this contact form

Add it to your site

Create a free form

Paste the code

Send a test

When to use it

Customize it

Add a subject or phone field

Send messages to your team

Reply automatically

Use your own thank-you page

Spam protection is built in

Works with any stack

Frequently asked questions

More form templates

Quote request form template

Support ticket form template

Newsletter signup form template

Start collecting form submissions