Webflow Multiple Forms & Single Webhook

Ed Martin

Hello All, first post.   = ]

Does anyone have experience using more than one form with Webflow's default form tools?

Each Webflow form has a unique name, of which I could filter on in Xano. 

The challenge I'm coming up against is different Webflow forms dumping into the same Xano table errors out.  The second form does not contain the same key value pairs (form questions and responses), where Xano appears to require input on all table columns from that form submit. 

The second challenge is that I'm not sure if it's possible to add multiple webhooks in Webflow and have Webflow post to the correct table in Xano. 

Third option, or challenge, is to have a unique table in Xano, for each Webflow form, and then connect the correct form in Webflow, to the correct table in Xano.  I believe this again bumps into the single webhook for Webflow pointing all form submissions to the same Xano table. 

I'm looking for a way to do this without Zapier (or other webhook wranglers), Hubspot (or other external forms tool).  

Hoping Xano can do some filtering magic to land the various from submissions into a single table, or dump into the unique Xano table matching the Webflow form.  
 
Thanks in advance for any help!

Ray Deck

I believe you have forms A, B and C, and you want data from them to go into tables X, Y and Z respectively, while running it all through a single webhook, W.

I think that the crux of this task is editing the W's API endpoint function stack so that you are managing the data differently based on what came in through input. You would set up "conditional" functions (if-then) to manage the case that "if" you see data like A, within the "then" nested stack you would execute a certain logic (leading to maybe sending to table X). Else, if iit looks like B, you would send to table Y, etc.

To get started, I'd open up the post endpoint, or even create a new endpoint to manage your logic. This doesn't need to be a super-long task - it is just a step more complicated than the auto-built endpoints Xano made for you. Let me know if you need help on this! 

Ed Martin

 Very good, thanks for the pointer and offer to assist.  I'll poke around with conditional functions and see how far I get.   Will share the success details or stuck points should I hit a wall. 

David Richardson

I'm working the same issue and found that creating a custom API from scratch in Xano the way to go.  I discussed this with the the Xano team in "office hours" a few weeks ago and they noted this was the best approach.

I have about 10 Webflow forms but I am also harvesting the button element within the form block to do different things in my site.  You can put parameter data in form elements and hide those form elements in a POST and expose just the button.  This is a workaround Prakash speaks to in Xano videos.

Prakash mentioned a site to expose form submission data - what Webflow sends.  The site is  https://webhook.site .  You get a personal URL at the https://webhook.site that you can then plug into the single Webflow form submission webhook.   Thereafter until you change it, Webflow form submissions are intercepted and the JSON payload is exposed in https://webhook.site.  There you can see the structure of the JSON payload.  (see below).  That is useful to build the xano customAPI to sort out what CRUD operations are appropriate for the form submitted.

What needs to get sorted in the custom API is the Webflow form name. That's the form name you enter in "Form Settings" in the "gear" panel in Webflow. That IS exposed in the payload too, but it is easier to include the form name in the Webflow form payload in the JSON "data" node.  I do that in a hidden text element in the Webflow form.

Below is a button submission.  The data.formName is "_formName_1"  The underscore identifies this form submission as a "button" as opposed to a form that includes data like name, email and address etc.  I use the underscore to filter out submissions that do not need processing in Xano.  You could use any character I suppose.

My custom API looks for that underscore in a conditional and if it's present stops processing the submission further.  If the underscore is NOT present in the formName:"value" pair, then I'll do additional conditionals in the custom API. 

if {
"If it's this form name do this CRUD"
} else {
"if it this form name do this other CRUD
} else {etc....}

The JSON payload is still in the "data" node and the CRUD operation follows the specific form submission name:value pair and processes the JSON payload accordingly as to the needs of your site.

That is BUILDING the custom API.  (see more below)[raw data.jpg]When you have completed the custom API and it sorts out all the forms change out the  https://webhook.site API (the single one in Webflow) for the custom Xano webhook (the URL for the custom API) you have been building in Xano.  Then ALL future form submissions go to Xano webhook API instead of  https://webhook.site API.