I'm trying to 'post' data from a Wix Custom Form using a webhook through Zapier and Zapier says it cannot find my webhook.
Here is the code I am using.
Do you see anything that prevent that hook from working?
Also, here is the published page link: https://www.timjrobertson.com/client-form
---------------------------------------------------
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import {fetch} from 'wix-fecth';
$w.onReady(function () {
//T: write your page related code here...
});
export function submit_click (event, $w) {
//When the send button has been clicked we need to post the forms data to Zapier
const url = "https://hooks.zapier.com/hooks/catch/2912587/fkdumo/" ;
let email = $w("#email").value;
let fullName = $w("#fullName").value;
let phone = $w("#phone").value;
let companyName = $w("#companyName").value;
let companyDomain = $w("#companyDomain").value;
let industry = $w("#industry").value;
let companyAddress = $w("#companyAddress").value;
let socialMedia = $w("#email").value;
let vision = $w("#vision").value;
let brandingPackage = $w("#brandingPackage").value;
let whyNow = $w("#whyNow").value;
let audience = $w("#audience").value;
let whyMe = $w("#whyMe").value;
let keywords = $w("#keywords").value;
let styleGuide = $w("#styleGuide").value;
let data = {
"email" : email,
"fullName" : fullName,
"phone" : phone,
"companyName" : companyName,
"companyDomain" : companyDomain,
"industry" :industry,
"companyAddress" : companyAddress,
"socialMedia" : socialMedia,
"vision" : vision,
"brandingPackage" : brandingPackage,
"whyNow" : whyNow,
"audience" : audience,
"whyMe" : whyMe,
"keywords" : keywords,
"styleGuide" : styleGuide,
} ;
console.log(data);
var bodyData = JSON.stringify(data);
fetch( url, {method:'post', body: bodyData})
.then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
else {
return Promise.reject("Fetech did not succeed");
}
} )
.then(json => {
console.log(JSON.stringify(json));
$w("#submit").disable();
$w("#submit").label = "Thanks for submitting the data!";
})
.catch(err => console.log(err));
}
Thanks!
Can I apply this code to more than one form on my website?
Is there something else we have to do on wix along with the code?
Here is the working code.
Source: https://www.wixshow.com
import {fetch} from 'wix-fetch'; //We need this to use the fetch command export function sendButton_click(event, $w){ //When the send button has been clicked we need to post the forms data to Zapier const url = "https://hooks.zapier.com/hooks/catch/951308/w4culi/"; let from = $w("#from").value; let to = $w("#to").value; let subject = $w("#subject").value; let message = $w("#message").value; let data = { "from": from, "to": to, "subject": subject, "message": message }; console.log(data); var bodyData = JSON.stringify(data); fetch(url, {method: 'post', body: bodyData}) .then ((httpResponse)=>{ if(httpResponse.ok){ return httpResponse.json(); }else{ return Promise.reject("Fetch did not succeed"); }}) .then(json=>{ console.log(JSON.stringify(json)); $w("#sendButton").disable(); $w("#sendButton").label="Thanks for submitting the data!"; }) .catch(err=>console.log(err)); }
Hey,
I tired this code mentioned above but the web-hook but still its says that no hook was found.
Can you help me with a link to the video for this Zap?
I am having the same problem my webhook. Zapier is giving me a success message but says there is no data in my webhook to read. Code below:
//In this codesample we will post data from Wix Code to a Google Sheet
import {fetch} from 'wix-fetch';
//We need this to use the fetch command
export function button1_click(event,$w){
//When the send button has been clicked we need to post the forms data to Zapier
const url = "https://hooks.zapier.com/hooks/catch/2560455/a9eoqe/";
let firstName = $w("#firstName").value;
let lastName = $w("#lastName").value;
let contactEmail = $w("#contactEmail").value;
let contactCompany =$w ("#contactCompany").value;
let contactNumber = $w("#contactNumber").value;
let contactStaffN = $w("#contactStaffN").value;
let contactComments = $w("#contactComments").value;
let data = {
"firstName":firstName,
"lastName":lastName,
"contactEmail":contactEmail,
"contactCompany":contactCompany,
"contactNumber":contactNumber,
"contactStaffN":contactStaffN,
"contactComments":contactComments
};
console.log(data);
var bodyData = JSON.stringify(data);
fetch (url, {method: 'post' ,body: 'bodyData'})
.then((httpResponse)=>{
if(httpResponse.ok){
return httpResponse.json();
}else{
return Promise.reject("Fetchdidnotsucceed");
}
})
.then(json=>{
console.log(JSON.stringify(json));
$w("#button1").disable();
$w("#button1").label="Thanks for submitting the data!";
})
.catch(err=>console.log(err));
}
Did it work Tim? I want to replicate this with my database.
I'll keep you updated.
Hi,
I"m not sure about the hook at this point, but the first thing you need to do is to change this in line 3:
import {fetch} from 'wix-fecth'; to this: import {fetch} from 'wix-fetch'; // <==
Please update in your progress.
Roi.