Transferring Form Submission Data from Wix Forms with hidden fields to a Webhook

admin81489 · December 23, 2021, 2:42pm

Hi guys,
I’ve come across a major problem, that I’m usually able to solve with Wordpress in a matter of seconds.

I have a Wix Form.
I’ve added some hidden fields to it.
By “hidden fields”, I mean that I’ve added additional text fields, placed them inside a container, and chose “Collapsed” in it’s settings:

When I check the live website using the inspect tool, everything seems to be well, these fields do exist inside of the form, the user just can’t see them:

Now, I wish to send all of these fields to a webhook (Zapier / Integromat) whenever there’s a successful form submission, so I can use these values in my automations.

I tried doing that using Wix Apps, I create an app and was manage to connect it to a webhook that triggers on a form submission, but I wasn’t able to get those hidden fields. It’s like the App just ignores them.

Is there a way to send all of these fields as a JSON payload to a webhook URL using some custom code?

Thanks in advance.

CODE-NINJA · December 23, 2021, 2:53pm

Yes it should be possible, but i think you will have to code all the SUBMISSION-PROCESS with VELO (JS).

When working with → PREDEFINED-STUFF ← not everything will be possible, because this predefined-stuff is not totaly customizable.

To be able to customize predefined-stuff, you will need APIs which will give you the ability to access to the predefined-stuff by code, to be able to modify or customize it.

BTW: → PREDEFINED-STUFF ← → APPs

However, you will surely use Wix-Forms? Right?

If so, the following link to another post, perhaps will give you new ideas…
https://www.wix.com/velo/forum/velo-pro-discussion/dynamic-pages-track-the-page-a-form-was-submitted-on

admin81489 · December 23, 2021, 4:17pm

Hi, so I ditched the Wix app, and instead I was able to push the form’s fields to a webhook using this request URL script:

import {fetch} from 'wix-fetch';
export function contactus_wixFormSubmitted() { 
    fetch( "https://hook.integromat .com/ia4ods8mjptw4e4exz", {
  "method": "post",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  "body":
  "first_name="+$w('#firstname').value
  +"&last_name="+$w('#lastname').value
  +"&email="+$w('#email').value
  +"&website="+$w('#website').value
  +"&message="+$w('#message').value
  +"&cid="+$w('#cid').value
     } )
  .then( (httpResponse) => {
    if (httpResponse.ok) {
      return httpResponse.json();
    } else {
      return Promise.reject("Fetch did not succeed");
    }
  } )
  .then( (json) => console.log(json.someKey) )
  .catch(err => console.log(err));
}

So the fields “firstname”, “lastname”, “email”, “website” and “message” are visible fields in the form.
#cid is the only hidden field in this instance:

(I tried all options, Hidden+Enabled, Collapsed+Enabled, Hidden+Collapsed+Enabled, and everyone by itself).

As long as this field is hidden to the user, I just can’t seem to get it’s value to the server:

(as you can see, there’s clearly a value in there)

BUT, if the field is visible, I do seem to get it’s value:

That beats the whole purpose of having hidden fields.
Any ideas?

admin81489 · December 23, 2021, 4:48pm

Okay so I found out what the main issue is.
I can’t seem to fill the hidden fields using simple javascript:

  var cid_field = document.querySelector('input[name=cid]');
  cid_field.setAttribute("value", 'TEST_VALUE');

(This doesn’t work, technically it does add a “value” attribute to the input tag, but it does not affect how Wix interprets it).

It seems like you can’t edit a field’s value without actively clicking on it and changing it’s value using your actual keyboard.

Any ideas about getting values from Google Tag Manager and populating them inside of Wix form fields?
Or instead, getting values from cookies / localstorage items?

CODE-NINJA · December 24, 2021, 2:51am

My logical idea would be a very simple one! I do not know if it would work in your case, but what if you just showi your hidden INPUTS for some milliseconds → getting your needed data → hiding it back again, without that the user even can see the input itself.

If you use → a fade-in-animation, the user even won’t see any box, because at the time where it starts to fade-in, you already got your data from that input-box and already are to hide it back again!

Where do you have running this code?

var cid_field = document.querySelector('input[name=cid]');   cid_field.setAttribute("value",'TEST_VALUE');

Seems like you are using a CUSTOM-ELEMENT ?

What about …

What about generating your own custom FORM, using seperate/single elements?

If you are verry familiar with HTM+CSS-Coding and you can handle the DOM → use a CUSTOM-ELEMENT and work in the environment you know.

Or use a HTML-Component.

You have a coding style/technique i am still not very familiar with. Where does it come from? → Wordpress? Where did you learn your stuff?

Just want to understand your way of thinking a little bit better.

admin81489 · December 26, 2021, 9:18am

I usually work with any platform besides Wix.
I gather all these hidden fields and send them to Hubspot.
These fields are basically the story of how this user came to be, along with some important cookie values that I can use later on when reporting from the CRM back to the marketing platforms (for example, Facebook ads, Google anaytics, etc…)

I use Google Tag Manage to store all these values in the browser’s localStorage, and then populate them inside hidden fields.

This does not work with Wix, your method shouldn’t work as well, since I found in my testings that you can’t edit a field’s value without actively clicking on it and changing it’s value using your actual keyboard.

For example, you can use the inspect tool to edit the input field’s value from value to value=“test value” .
From Wix’s perspective, the value is still empty.

That’s my main problem at this point in time.

admin81489 · December 26, 2021, 9:41am

What would really solve my problem is to have the ability to fire a wix script using Tag Manager.
For example, firing this code when the page loads:

$w.onReady(function () {
  $w("#message").value = "TEST"
});

But using Google Tag Manager:

This of course doesn’t work, since “$w” is not defined.

All the values I need are currently in Google Tag Manager’s variables.
So on one hand, I can’t populate them inside the hidden fields using GTM.
On the other hand, I can’t get these values inside Wix’s scripts.

I’m kind of stuck at this point.

CODE-NINJA · December 27, 2021, 7:16pm

Back to your problem, especialy this part…
I tried doing that using Wix Apps , I create an app and was manage to connect it to a webhook that triggers on a form submission , but I wasn’t able to get those hidden fields. It’s like the App just ignores them.

Is there a way to send all of these fields as a JSON payload to a webhook URL using some custom code?

But then you …
Hi, so I ditched the Wix app, and instead I was able to push the form’s fields to a webhook using this request URL script:

And now you are using a custom created form with the following code…???

import {fetch} from 'wix-fetch';

export function contactus_wixFormSubmitted() {fetch( "https://hook.integromat .com/ia4ods8mjptw4e4exz", {
  "method": "post",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  "body":
    "first_name="+$w('#firstname').value+
    "&last_name="+$w('#lastname').value+
    "&email="+$w('#email').value+
    "&website="+$w('#website').value+
    "&message="+$w('#message').value+
    "&cid="+$w('#cid').value
  }).then((httpResponse) => {
     if (httpResponse.ok) {return httpResponse.json();} else {return Promise.reject("Fetch did not succeed");}
  })
  .then((json)=> console.log(json.someKey))
  .catch(err => console.log(err))}

But i am confused, because it seems like you are still using wix-forms…

export function contactus_wixFormSubmitted() {

And this is why you have still the issue (i think).

If i would be → YOU ← what i would do in your situation?

There are two 2-ways to get out of your issued situation (on my opinion).

You get rid of the wix-forms completely and you use your own created custom-form.
You continue using wix-forms, but first do some testing on it.

Let’s take way-2 (using Wix-Forms).

Step-1: Testing the EXACT behaviour of your form.
You say, that if a field is set to → hidden <–, or → collapsed <–, these hidden values do not submit any data on form-submission?

Test it! Hide oder collapse all your other FIELDS …

Just do not hide or collapse → FIRST-NAME <–!
So now, if we would follow your theory → you should get only the VALUE of → FIRST-NAME, because all other fields are either hidden or collapsed.

Theory prooved? ! ?

Step-2: Clariy if your additional field → “cid” is a part of the → Wix-Form <—, or is it a custom created (additionaly added field) ???

Tested? >>> Is your → cid-field ← a part of Wix-Forms ?

Step-3: Inspecting all given possibilities, regarding → Wix-Forms and it’s provided APIs…

admin81489 · December 29, 2021, 10:47am

@russian-dima Hi, thanks for the reply.
Let me clarify - I am no longer using Wix Apps for the connection to my webhook.
I just use the code I provided here and it works great, I get every single value to my webhook.

This is my current code:

export function contactus_wixFormSubmitted() {
  fetch("https://hook.integromat .com/ia4ods8mjptw4e4exz", {
    "method": "post",
    "headers": {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "body":
      "formID=contactUs"
      +"&first_name="+$w('#firstname').value
      +"&last_name="+$w('#lastname').value
      +"&email="+$w('#email').value
      +"&website="+$w('#website').value
      +"&message="+$w('#message').value
      +"&user_agent=useragent"
      +"&hubspotutk=hubspotutk_value"
   })
}

I deleted my hidden fields, since I found out there is no way for me to actually use them, since Wix Forms fields can only be populated with values in 1 of 2 ways:

Either you actually click on the fields and fill in a value using your keyboard.
Or you use the $w() selector using Wix code.

Now, I just transfer these “hidden” values using the code I provided above.
The only fields that exist in the actual Wix form are firstname, lastname, email, website & message (and non of them are hidden).

In user_agent, I’m looking forward to send the browser’s userAgent, can’t seem to get it to work though, I can easily get this value using a Google Tag Manager variable, but I’m not sure how I can use that variable inside Wix code.
In hubspotutk, I’m looking forward to send the value of a 1st party cookie called “hubspotutk”. It’s a cookie that’s being generated automatically by Hubspot when a user starts a session. I can’t find a way of pulling any cookies values using Wix code.

Can you help me with getting these values?
Thanks in advance.

admin81489 · December 30, 2021, 1:05pm

I was able to get the user agent, I’m just not sure how to get the cookie value.

Topic		Replies	Views
WixForm not saving hidden fields, sometimes, sometimes not Ask the community code , wix-forms , question	0	146	September 12, 2023
Contact Form Webhooks Ask the community code , question	20	1585	December 18, 2020
Setting hidden fields in form doesn't work Ask the community code , question	2	1591	May 17, 2020
Hidden form fields don't do anything? Ask the community wix-studio , code , wix-forms	2	704	November 1, 2023
How To Pass UTM Data into a Hidden Form Field Ask the community code , wix-forms , question	5	932	November 19, 2020

Transferring Form Submission Data from Wix Forms with hidden fields to a Webhook

Related topics