About Zapier Community
New to our Community? Get to know more about our space and how to make the most of your time here.

Code of Conduct Community FAQ's Zapier Common Questions What to Expect

Get Started With Zapier
New to Zapier? We have got you covered with our Zapier 101 Resources.

Zapier Essentials

Get Support
Have a question? Let's get you an answer!

How Do I...? Troubleshooting Code & Webhooks Developer Zone

Other Help Resources
Wait, there's more! Check out these Community sourced spaces for additional resources.

Zapier Help Center Hire an Expert

Zapier Reading
All of our best learning resources can be found here.

Featured Articles Show & Tell AI Hub Zapier Tools Hub

Learning Groups
Excited to meet other builders? Check out our interest areas full of doers, dreamers, and in-betweeners.

User Groups

Other Learning Resources
Some of our favorite additional ways to upskill your Zapier knowledge.

Zapier Learn Zapier Blog Zapier Webinars

Product Updates
Check out what is new and upcoming with Zapier with our regular product updates.

Product Updates

Early Access Program
Want to join Early Access? Learn more here.

Question

POST Response from Webhook opening in new tab

  • 29 July 2022
  • 1 reply
  • 217 views
D
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

GetUWired
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>

 

Terms & Conditions