After building a functioning contact form with Next.js, you'll need to send that data somewhere. Sending form data to Zapier offers multiple options for where to forward the data next. Once your data is in Zapier, you can send it to your CRM, database, or Google Sheets using Zapier apps.

Below is the basic contact form we'll use for sending requests:

Basic Contact Form

<form onsubmit="{handleSubmit}">
  <input label="First Name" id="firstName" type="text">
  <input label="Last Name" id="lastName" type="text">    
  <!-- more fields here -->
<button mt="8" variant="blue500" type="submit">Submit</button>
</form>

When the form above is submitted, our handleSubmit function will be executed. Here's what that function looks like for our use case:

The handleSubmit Function

const handleSubmit = async (e) => {
    e.preventDefault();


    const data = {
      firstName: e.target.firstName.value,
      lastName: e.target.lastName.value,
	  // etc..
    }

    // Send the data to the server in JSON format.
    const JSONdata = JSON.stringify(data);

    // API endpoint where we send form data.
    const endpoint = 'YOUR ZAPIER WEBHOOK URL';

    // Form the request for sending data to the server.
    const options = {
      method: 'POST',
      body: JSONdata,
    };

    // Send the form data to our endpoint url
    const response = await fetch(endpoint, options);
 
    // Get the response data from server as JSON.
    // If server returns the name submitted, that means the form works.
    const result = await response.json();
        
  }

First, we create our data object using the data submitted in the form and assign it to the variable 'data', then convert that to a string using JSON.stringify. Then we define our endpoint and our options. 

This is where issues can arise. Adding 'application/json' content-type headers to the options can produce 'failed to fetch' errors. Removing the headers from the options should resolve this issue.

After all of this, we execute our fetch and post the data to Zapier.

Zapier Configuration

To configure Zapier to catch the payload from your form, follow these steps:

  1. Create a new zap.
  2. Add the trigger called Webhooks by Zapier (this is a premium app).
  3. Select the 'Catch Hook' event and leave the 'Pick off child key' field blank

Testing the webhook

The test section provides your webhook URL. In the handleSubmit function above, you need to replace the text 'YOUR ZAPIER WEBHOOK URL' with the provided webhook URL.

Once you've done that, you can submit a test lead on your form. If you don't already see a "We found a request" message, click 'Test Trigger'. If the test results in finding a request with the data you submitted (see screenshot below), you're done. 
 

zapier-test.jpg