I’m currently trying to edit my request a meeting form page so that I can send the form data via webhook to Zapier. I’ve inputted this Javascript into the ‘This screen’ Javascript box for the particular page. Does anyone know what I’m doing wrong?
/* zapier */
Fliplet.FormBuilder.on(‘formSubmitted’, function (response) {
// Getting submitted form data
var formData = response.data;
Also, our hook is based on Promise’s hence you should chain your fetch requests for a reliable output.
See an example here on how to use fetch() as a promise: The JavaScript fetch() method | Go Make Things
I reformatted to this code but I’m still not getting pings in Zapier. For context, I’m previewing my app through the Fliplet iOS app - should this still be working?
Fliplet.FormBuilder.on('afterFormSubmit', function (response) {
return new Promise((resolve, reject) => {
var formData = response.data;
var zapierWebhookUrl = 'https://hooks.zapier.com/hooks/catch/3772441/**********/';
fetch(zapierWebhookUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
})
.then((response) => {
if (!response.ok) {
// Network request was successful, but there's an HTTP error (e.g. 404 Not Found)
reject('Failed to send data to Zapier. HTTP error: ' + response.status + ' ' + response.statusText);
}
return response.json();
})
.then((data) => {
console.log('Data sent successfully to Zapier Webhook:', data);
resolve();
})
.catch((error) => {
console.error('Error sending data to Zapier Webhook:', error);
reject(error);
});
});
});
Have you verified this is working in Fliplet studio first? If not I would recommend you do that first. You can put debuggers and console statements in the code at various places and check what is getting sent to zapier.
Once it is working in Fliplet studio I would then test in the Fliplet Viewer iOS app.
I just tried in Studio and it is still not working. I do not know where to look for console statements to test whether it is working or triggering at all. Where would I view these?
If you right-click inside the app window inside Fliplet Studio and choose “inspect” you will be able to see your console output in Chrome inspector window. I see that you already have some console statements so you should be able to see something in the console.
Ok I did that, and the console was providing messages like Logged in user:, but when I submitted the form nothing appeared in the console even though I have statements included in my code. Any advice?
I’m still not getting any console messages when submitting the form, even when adding in a generic “say something” console log. This is my current code. Can you please assist in getting this over the line? I only have a few more days until my event.
/* zapier */
Fliplet.FormBuilder.on('afterFormSubmit', function (response) { // Fixed the error here
console.log("say something", response);
return new Promise((resolve, reject) => {
var formData = response.data;
var zapierWebhookUrl = 'https://hooks.zapier.com/hooks/catch/3772441/3ifa6qy';
fetch(zapierWebhookUrl, {
method: 'POST',
body: JSON.stringify(formData),
})
.then((response) => {
console.log(response);
if (!response.ok) {
// Network request was successful, but there's an HTTP error (e.g. 404 Not Found)
reject('Failed to send data to Zapier. HTTP error: ' + response.status + ' ' + response.statusText);
}
return response.json();
})
.then((data) => {
console.log('Data sent successfully to Zapier Webhook:', data);
resolve();
})
.catch((error) => {
console.error('Error sending data to Zapier Webhook:', error);
reject(error);
});
});
});
I noticed you are using an incorrect hook, as I mentioned in my previous message you can ONLY use this hook. Form JS APIs | Fliplet Developers Documentation Your code will be something like this:
Fliplet.Hooks.on('afterFormSubmit', function(response) {
console.log("say something", response);
return new Promise((resolve, reject) => {
var formData = response.data;
var zapierWebhookUrl = 'https://hooks.zapier.com/hooks/catch/3772441/3ifa6qy';
fetch(zapierWebhookUrl, {
method: 'POST',
body: JSON.stringify(formData),
})
.then((response) => {
console.log(response);
if (!response.ok) {
// Network request was successful, but there's an HTTP error (e.g. 404 Not Found)
reject('Failed to send data to Zapier. HTTP error: ' + response.status + ' ' + response.statusText);
}
return response.json();
})
.then((data) => {
console.log('Data sent successfully to Zapier Webhook:', data);
resolve();
})
.catch((error) => {
console.error('Error sending data to Zapier Webhook:', error);
reject(error);
});
});
});