How to Use Webhooks to Connect Any App with Web3Forms

Need to send form data to a custom application or CRM? Web3Forms webhooks let you connect to virtually any service that accepts HTTP requests. Whether it's Zapier, Make, HubSpot, or your own backend, webhooks make it possible.

In this comprehensive guide, we'll show you how to use webhooks to extend Web3Forms functionality.

What Are Webhooks?

Webhooks are automated HTTP requests sent when an event occurs. When someone submits your form, Web3Forms sends a POST request to your specified URL with all the form data as JSON.

Think of webhooks as a "push notification" for your server - instead of constantly checking for new submissions, your server receives them automatically.

Why Use Webhooks?

• Universal Compatibility: Connect to any service that accepts HTTP requests
• Custom Processing: Build your own submission handling logic
• Third-Party Integrations: Connect to Zapier, Make, n8n, and more
• CRM Integration: Send leads directly to HubSpot, Salesforce, etc.
• Database Storage: Save submissions to your own database
• Email Marketing: Add contacts to Mailchimp, ConvertKit, etc.

Prerequisites

Before you start:

1. A Web3Forms account (Starter plan or higher)
2. A webhook endpoint URL
3. A form already set up with Web3Forms

Setting Up Webhooks

Step 1: Create Your Webhook Endpoint

First, you need a URL to receive the webhook data. Options include:

Option A: Use an Automation Platform

Zapier:

1. Create a new Zap
2. Choose "Webhooks by Zapier" as the trigger
3. Select "Catch Hook"
4. Copy the webhook URL provided

Make (formerly Integromat):

1. Create a new scenario
2. Add "Webhooks" module
3. Select "Custom webhook"
4. Copy the webhook URL

n8n:

1. Create a new workflow
2. Add "Webhook" node
3. Copy the test/production URL

Option B: Use Your Own Backend

Create an endpoint in your backend:

// Node.js / Express example
app.post('/webhook/web3forms', (req, res) => {
  const formData = req.body;

  console.log('New submission:', formData);

  // Process the data...

  res.status(200).json({ success: true });
});

Step 2: Configure Webhook in Web3Forms

1. Log in to your Web3Forms Dashboard
2. Select the form you want to connect
3. Go to the Integrations tab
4. Click on Webhooks
5. Enter your webhook URL
6. Click Save

Step 3: Test Your Webhook

1. Submit a test form
2. Check your endpoint received the data
3. Verify the JSON structure

Webhook Payload Structure

Here's the JSON payload Web3Forms sends:

{
  "name": "John Smith",
  "email": "[email protected]",
  "phone": "(555) 123-4567",
  "message": "Hello, I'm interested in...",
  "attachments": [
    {
      "filename": "attachment.pdf",
      "url": "https://api.web3forms.com/download?file=attachment.pdf"
    }
  ],
}

All form fields are included as top-level properties.

Advanced Configuration

Webhook Security

Protect your webhook endpoint:

1. Use HTTPS: Always use secure URLs
2. Verify requests: Check for expected headers or signatures
3. Validate data: Sanitize incoming data
4. Rate limiting: Protect against abuse

Integration Examples

Zapier Workflow

Create a Zap that:

1. Trigger: Webhooks by Zapier (Catch Hook)
2. Action 1: Google Sheets (Add Row)
3. Action 2: Gmail (Send Email)
4. Action 3: Slack (Send Message)

HubSpot Integration

Send leads to HubSpot CRM:

app.post('/webhook/web3forms', async (req, res) => {
  const { name, email, phone, message } = req.body;

  await fetch('https://api.hubapi.com/contacts/v1/contact', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_HUBSPOT_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      properties: [
        { property: 'firstname', value: name },
        { property: 'email', value: email },
        { property: 'phone', value: phone },
        { property: 'message', value: message }
      ]
    })
  });

  res.status(200).json({ success: true });
});

Mailchimp Integration

Add contacts to a mailing list:

app.post('/webhook/web3forms', async (req, res) => {
  const { email, name } = req.body;

  const [firstName, lastName] = name.split(' ');

  await fetch(`https://us1.api.mailchimp.com/3.0/lists/LIST_ID/members`, {
    method: 'POST',
    headers: {
      'Authorization': 'Basic ' + btoa('anystring:YOUR_API_KEY'),
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      email_address: email,
      status: 'subscribed',
      merge_fields: {
        FNAME: firstName,
        LNAME: lastName || ''
      }
    })
  });

  res.status(200).json({ success: true });
});

Database Storage

Save to MongoDB:

app.post('/webhook/web3forms', async (req, res) => {
  const submission = new Submission({
    ...req.body,
    receivedAt: new Date()
  });

  await submission.save();

  res.status(200).json({ success: true });
});

Troubleshooting

Webhook Not Receiving Data?

1. Check URL: Verify the endpoint URL is correct
2. Test endpoint: Use a tool like webhook.site to test
3. Check firewall: Ensure your server accepts external requests
4. Review logs: Check your server logs for errors

Getting Errors?

Common issues:

• 401 Unauthorized: Check authentication headers
• 404 Not Found: Verify the endpoint path
• 500 Server Error: Check your server-side code
• Timeout: Respond within 30 seconds

Data Format Issues?

Ensure your endpoint:

• Accepts POST requests
• Parses JSON body correctly
• Returns a 2xx status code

Example Form Code

Here's a form ready for webhook integration:

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New Lead from Website">

  <!-- Bot protection -->
  <input type="checkbox" name="botcheck" style="display: none;">

  <div>
    <label for="name">Full Name</label>
    <input type="text" name="name" id="name" required>
  </div>

  <div>
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" required>
  </div>

  <div>
    <label for="company">Company</label>
    <input type="text" name="company" id="company">
  </div>

  <div>
    <label for="budget">Budget Range</label>
    <select name="budget" id="budget">
      <option value="<5k">Less than $5,000</option>
      <option value="5k-10k">$5,000 - $10,000</option>
      <option value="10k-25k">$10,000 - $25,000</option>
      <option value=">25k">More than $25,000</option>
    </select>
  </div>

  <div>
    <label for="message">Project Details</label>
    <textarea name="message" id="message" rows="4" required></textarea>
  </div>

  <button type="submit">Submit Inquiry</button>
</form>

Best Practices

1. Always respond quickly: Return a response within seconds
2. Process asynchronously: Queue heavy tasks for background processing
3. Log everything: Keep records for debugging
4. Handle failures gracefully: Implement retry logic
5. Secure your endpoints: Use authentication and HTTPS

Wrapping Up

Webhooks open up endless possibilities for form data processing. Whether you're building custom workflows, integrating with CRMs, or creating automated pipelines, webhooks give you complete control over your form submissions.

Ready to get started? Create your Web3Forms account and set up webhooks today!

Related Articles:

• How to Send Form Submissions to Google Sheets
• How to Get Slack Notifications for Form Submissions
• How to Send Form Data to Discord