Send Next.js Form Data to a Zapier Webhook API
This article provides detailed instructions on successfully sending form data to a Zapier catch webhook using a JavaScript function for form submission.
Published
Jun 1, 2025
Example Form
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 name="firstName" id="firstName" type="text">
<input name="lastName" id="lastName" type="text">
<!-- more fields here -->
<button type="submit">Submit</button>
</form>The handleSubmit Function
When the form above is submitted, our handleSubmit function will be executed. Here's what that function looks like for our use case:
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);
if (response.ok) {
console.log("Form submitted successfully");
} else {
console.error("Form submission failed");
}
}Zapier Configuration
To configure Zapier to catch the payload from your form, follow these steps:
Create a new zap.
Add the trigger called Webhooks by Zapier (this is a premium app).
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.
Table of Contents
Table of Contents
We Build Amazing Websites That Amplify Your Marketing and Accelerate Business Growth
14309 Larsen St
Overland Park, KS 66221
Website Services
Marketing Services
Demand Stack, All Rights Reserved 2026