Question

POST Response from Webhook opening in new tab

  • 29 July 2022
  • 1 reply
  • 133 views

Userlevel 1

 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.

 


This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

1 reply

Userlevel 7
Badge +12

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>