Wix Code + Zapier WebHooks

Ask the community
, ,
1

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 Velo API Reference - Wix.com

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!

2

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.

3

I’ll keep you updated.

4

Did it work Tim? I want to replicate this with my database.

5

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));

}

6

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?

7

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));
}
8

Is there something else we have to do on wix along with the code?

9

Can I apply this code to more than one form on my website?