# 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. 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. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/contact-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Message | `message` | Long text | Yes | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html ``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html ``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function ContactForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! We got your message and will reply soon.

return ( ) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function ContactForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! We got your message and will reply soon.

return ( ) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks! We got your message and will reply soon.

{:else} {/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" --- ``` ## 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 ### 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. ## 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.

Let’s talk