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">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
</head>
<body>

  <h1>Contact Us</h1>

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

</body>
</html>

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

Sign Up/Login: Sign up for a Netlify account or log in if you already have one.
Create a New Site: Click “New site from Git” and connect your Git repository where your project is hosted.
Configure Build Settings: Ensure that the build settings are configured correctly for your project.
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:

Go to Forms: In your Netlify dashboard, navigate to the “Forms” section.
Form Settings: Click on the form you want to configure.
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:

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

Summary

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.