Skip to main content

 Recently I have been tooling around with using POST requests with the Webhooks by Zapier feature to “catch” data from an html <form> and move it along to a CRM.

The goal is for there to be a webpage with a contact info form. The user fills it out and hits submit with the data sent along to the Zap.

Functionally, I have gotten it able to work fine. However, whenever a user clicks submit, the data response from Zapier is shown in a new tab at the URL of the webhook itself. I tried adding silent/ to trigger Silent Mode. However, the new tab at the webhook URL is still opened, this time with a blank screen representing the empty body of the response. How can I get that response to be received in the background and trigger a success message on the site. 

I am using html embedded on a Google Sites webpage.

 

Hi @dmend18 

You have to in a sense, hijack the form and prevent the default behavior. 

 

<html>
<!-- our form -->
<form id="form">  
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>



<script>
//a function that will make an AJAX request to Zapier
function submitForm(data) {
  console.log(data);
}


//the event listener that will hijack the form and rebuild the form data
document.getElementById('form').addEventListener('submit', function(event) {
event.preventDefault();
let data = {
'fname': event.currentTarget.fname.value,
}
submitForm(data);

//upon successful submission, you will need to add some code to redirect the user. 
})
</script>
</html>

 

Terms & Conditions