Skip to content
Netlify Docs
For the complete Netlify documentation index, see llms.txt. Markdown versions of this page are available by appending .md to the URL.

Unlimited seats on Netlify Pro for $20/month โ†’ Learn more ๐Ÿ‘ฅ

add-a-contact-form

For the complete documentation index, see llms.txt
Back to templates

Add a working contact form powered by Netlify Forms. Submissions appear in your Netlify dashboard โ€” no backend or database needed.

ยทUpdated Mar 18, 2026ยท2 variables
Using your project's framework, add a working contact form to this site using Netlify Forms. Form purpose: {{FORM_PURPOSE}} Placement (defaults to a new /contact page if not specified): {{PLACEMENT}} The form should: 1. Include fields for name (required), email (required), and message (required, textarea). If additional fields are specified in the purpose, add those too. 2. Use Netlify Forms by adding `data-netlify="true"` to the form element so submissions are captured automatically โ€” no backend code needed. 3. Add a honeypot field: set `data-netlify-honeypot="bot-field"` on the form and add a hidden `<p>` with a `bot-field` input. Hide it with CSS (`position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0`), not `display: none` (bots ignore `display: none`). 4. Submit the form via AJAX using `fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams(new FormData(form)).toString() })`. This avoids a full page redirect and lets you show a success message inline. 5. **Important for JS-rendered frameworks (React, Vue, Preact, etc.)**: Add a hidden HTML form in the page that Netlify's build bot can detect. Add a hidden input `<input type="hidden" name="form-name" value="contact" />` to the visible form. The hidden form needs `name`, `data-netlify="true"`, and all the same field names. 6. Include client-side validation with clear error messages. 7. Be fully responsive and match the existing site design. 8. Add a "Contact" link to the site navigation if one doesn't already exist. Submissions will appear in the site owner's Netlify dashboard under Forms, where they can set up email notifications, Slack alerts, or webhook integrations.

Variables

Where to put the form. Defaults to a new /contact page.

What the form is for โ€” this determines the fields and copy.