Two form submission webhooks

Design help Data API
21

Hi, the easiest way to filter forms in Make.com/Integromat without using 3rd party solutions or create custom webhooks is to set up a filter on a connection link between Webflow and a router or another module. Just right click on a connection link between the modules and select “Set up a filter”, then choose a field with your form name and create a condition. Hope it helps!

image
image929×563 46.3 KB

22

I found a different solution to this issue that allows for multiple forms but also displays the standard ‘success’ message rather than redirecting. It uses custom JavaScript code and a make.com scenario to intercept the form submission, send the data to the webhook, and then allow Webflow to handle the form as if it was a normal submission. This way, the page won’t redirect, and Webflow’s success message will be displayed as intended.

You’ll need to create a scenario in make.com and choose the ‘custom webhook’ trigger. You’ll then copy the provided url and paste it into the code below, along with the ID of your form.

Paste the code into the custom code area of your page in webflow, save, and publish your site. Return to your make.com scenario, click ‘redetermine data structure’ on the custom webhook and then send some data through your form. Following that, you can connect to whatever service you’d like (google sheets, airtable, whatever). Finish your automation and set it to run, and you should be good.

For successive forms, just make sure that your forms have unique ids and that you create a new scenario and unique webhook for each form.

document.addEventListener("DOMContentLoaded", function() {
  var wfForm = document.getElementById('your-form-ID');

  wfForm.addEventListener('submit', function(e) {
    e.preventDefault(); 

    var formData = new FormData(wfForm);

    
    var object = {};
    formData.forEach(function(value, key){
        object[key] = value;
    });
    var json = JSON.stringify(object);


    fetch('your-webhook-url', { 
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: json,
    })
    .then(response => {
      if (response.ok) {

        wfForm.querySelector('.w-form-done').style.display = 'block';
      } else {

        wfForm.querySelector('.w-form-fail').style.display = 'block';
      }
    })
    .catch(error => console.error('Error:', error));


  });
});