After you've built a functioning contact form with Next.js, you need to send that data somewhere. The advantage of sending form data to Zapier is that you have a lot of options for where to send 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 be using to send 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 is 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 I had issues arise. I was adding 'application/json' content-type headers to the options and this was producing 'failed to fetch' errors. I removed the headers from the options and everything worked great after that.

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, just follow the steps below.

  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