How do dynamically populate hidden form fields in Wix Studio based on query parameters?

Ask the community
, ,
1

I’m having trouble with
Populate hidden field values dynamically

Working in
Wix Studio Editor

Site link

What I’m trying to do
Add custom code

What I’ve tried so far
Chat GPT

Extra context
This code doesn’t work

import wixLocation from ‘wix-location’;

import {local} from ‘wix-storage’;

$w.onReady(function () const query = wixLocation.query;

**const** referrer = globalThis?.document?.referrer || 'Direct';

local.setItem('referrer', referrer);

$w('#channel_drilldown_2').value = referrer;

// Current page URL

**const** currentUrl = wixLocation.url;

// Store for later pages if needed

local.setItem('referrer', referrer);

// UTM Source

**if** (query.utm_source) {

    $w('#channel_drilldown_1').value = query.utm_source; //Google

}

//Google gclid

**if** (query.gclid) {

    $w('#input7').value = query.gclid;

}

// Referrer field

$w('#channel_drilldown_2').value = referrer; //google.com

// Basic channel detection

**let** channel = 'Direct Traffic';

**if** (referrer.includes('google')) {

    channel = 'Organic Search';

} **else** **if** (referrer.includes('facebook')) {

    channel = 'Social';

} **else** **if** (query.utm_medium) {

    channel = query.utm_medium;

}

$w('#channel').value = channel; //Organic Search{

$w('#section81').onViewportLeave((event) => {

    $w('#section81').collapse();

})

});

2 
import wixLocation from ‘wix-location’;

import {local} from ‘wix-storage’;

$w.onReady(function () const query = wixLocation.query;

**const** referrer = globalThis?.document?.referrer || 'Direct';

local.setItem('referrer', referrer);

$w('#channel_drilldown_2').value = referrer;

// Current page URL

**const** currentUrl = wixLocation.url;

// Store for later pages if needed

local.setItem('referrer', referrer);

// UTM Source

**if** (query.utm_source) {

    $w('#channel_drilldown_1').value = query.utm_source; //Google

}

//Google gclid

**if** (query.gclid) {

    $w('#input7').value = query.gclid;

}

// Referrer field

$w('#channel_drilldown_2').value = referrer; //google.com
// Basic channel detection

**let** channel = 'Direct Traffic';

**if** (referrer.includes('google')) {

    channel = 'Organic Search';

} **else** **if** (referrer.includes('facebook')) {

    channel = 'Social';

} **else** **if** (query.utm_medium) {

    channel = query.utm_medium;

}

$w('#channel').value = channel; //Organic Search{

$w('#section81').onViewportLeave((event) => {

    $w('#section81').collapse();

})
});

pasted the code in th ecorrect format for better readability.

there seems to be erors in the code

Original:

$w.onReady(function () const query = wixLocation.query;

Correct:

$w.onReady(function () {
    const query = wixLocation.query;
});

This line had a broken comment/code merge:

$w('#channel').value = channel; //Organic Search{

The { at the end should not be there.

Make sure the element IDs actually exist on the page:

#channel_drilldown_1
#channel_drilldown_2
#input7
#channel
#section81

Also, if these are Wix Form fields inside a Wix Form app rather than standalone input elements, they may not be directly targetable with $w('#fieldId').value. In that case, you may need to use standalone input elements or handle the values through a custom form setup.

3

Everything @Dan_Suhr said!

There’s also this guide for tracking via hidden fields - Track which dynamic page a new Wix Form was submitted from - which might help :slight_smile:

4

Also to add to this, I notice that your code is using things like globalThis?.document?.referrer which isn’t supported in the Wix Editors.

The topic I shared above is probably the best resource and closest to what you’re trying to achieve :slight_smile: