Written by: Geoffrey Callaghan

How to setup Contact Form with Netlify Hosting

How To Setup Contact Form With Netlify Hosting

Setting up a contact form with Netlify hosting involves creating an HTML form, configuring form handling in your static site, and utilizing Netlify’s form submission capabilities. Here’s a step-by-step guide:

Step 1: Create the Contact Form

Create an HTML contact form in your project:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>

  <h1>Contact Us</h1>

  <form name="contact" method="POST" data-netlify="true">
    <input type="hidden" name="form-name" value="contact">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <label for="message">Message:</label>
      <textarea id="message" name="message" required></textarea>
    <button type="submit">Submit</button>


In this form:

  • The form element includes data-netlify="true", which tells Netlify to handle form submissions.
  • The hidden input with name="form-name" and value="contact" is required for Netlify form detection.

Step 2: Deploy Your Site to Netlify

  1. Sign Up/Login: Sign up for a Netlify account or log in if you already have one.
  2. Create a New Site: Click “New site from Git” and connect your Git repository where your project is hosted.
  3. Configure Build Settings: Ensure that the build settings are configured correctly for your project.
  4. Deploy: Click “Deploy site”.

Step 3: Test Your Contact Form

Once your site is deployed, visit the contact page and submit the form. Netlify will handle the form submission and provide a notification in the Netlify dashboard.

Step 4: Configure Form Notifications (Optional)

By default, Netlify will send you an email notification for each form submission. You can configure form notifications in the Netlify dashboard:

  1. Go to Forms: In your Netlify dashboard, navigate to the “Forms” section.
  2. Form Settings: Click on the form you want to configure.
  3. Notifications: Configure email notifications or integrate with other services like Slack or Zapier.

Step 5: Manage Form Submissions

Netlify provides a simple interface for managing form submissions:

  1. Netlify Dashboard: Log in to your Netlify account and navigate to the “Forms” section.
  2. Form Submissions: You can view, search, and download form submissions directly from the dashboard.


Setting up a contact form with Netlify hosting is straightforward. By following these steps, you can quickly add a contact form to your static site and leverage Netlify’s form handling capabilities for easy management of form submissions.