View Categories

How to Add Hidden Fields to ‘New’ Wix Forms

This article walks you through how to add hidden fields in Wix’s New Form Builder.If you’re working with the Classic Form Builder, follow the steps outlined here. For instructions specific to Wix Studio, check the guide available here.

Attributer is a small script that you embed on your website to capture the source of your visitors—such as Paid Search, Paid Social, Organic Search, and more. It automatically populates hidden fields in your forms with this attribution data. When a form is submitted in Wix, this information is collected along with the user’s responses and can be forwarded to your CRM or other connected tools.

This article outlines the steps to configure Wix’s new form builder to work with Attributer.

Step 1: Add Additional Code Below the Main Attributer Code

Before proceeding, ensure that the main Attributer script has been added to the <head> section of your website. If it hasn’t been set up yet, you can follow these instructions for adding it through the Wix dashboard or refer to these steps for implementing it via Google Tag Manager.

Once the main script is in place, the next step is to insert an additional code snippet directly beneath it. The script you need is included in the section below:

<script>
window.onmessage = (event) => {
if (event.data.source != "ATTRIBUTERINTERNAL" || event.data.type != "ping" || !document.FlareTrk?.data) {
return;
}
console.log("External got message, sending data")
event.source.postMessage({ source: "ATTRIBUTER", type: "data", data: document.FlareTrk?.data }, "*");
};
</script>

As noted above, this additional snippet should be inserted immediately after the main Attributer script. The final result should resemble the following:

add additional code

Step 2: Add Six “Short Answer” Fields to Your Form

Open the form you want to use with Attributer and drag six Short Answer fields into it.

add six Short Answer fields

Next, select each of the newly added form fields and click the eye icon to set them as hidden.

set fields as hidden

Step 3: Configure Each Field

Next, assign Title and Field Key to each of the hidden fields:

configure title
configure field key

Each hidden field must have a specific Title and Field Key to ensure data is correctly assigned:

  • Field #1
    • Field Title = Channel
    • Field Key = channel
  • Field #2
    • Field Title = Channel Drilldown 1
    • Field Key = channel_drilldown_1
  • Field #3
    • Field Title = Channel Drilldown 2
    • Field Key = channel_drilldown_2
  • Field #4
    • Field Title = Channel Drilldown 3
    • Field Key = channel_drilldown_3
  • Field #5
    • Field Title = Landing Page
    • Field Key = landing_page
  • Field #6
    • Field Title = Landing Page Group
    • Field Key = landing_page_group

Here’s what the final configuration should look like:

the final configuration like this

Step 4: Insert an Embed element on the page that contains your form.

Navigate to the page containing the form you’ve set up for Attributer. Then, drag and drop an Embed Code block onto the page, placing it near the form.

Insert an Embed element

Place it near the form for optimal functionality.

place the element near the form

Step 5: Add Code to the Embed Block

Click on the newly added Embed block and select “Edit Code”.

add code to the embed block

Then, insert the following script:

<!--HTTPS only...-->
<script>
// Send messages to external until we get a response
let contacted = false;
function pingExternal() {
if (contacted) {
return;
}
window.parent.postMessage({ source: "ATTRIBUTERINTERNAL", type: "ping" }, "*");
window.setTimeout(pingExternal, 1000);
}
window.onmessage = (event) => {
if (event.data.source != "ATTRIBUTER") {
return;
}
contacted = true;
const data = event.data.data;
const send_data = {
"channel": data.drillData.channel,
"channel_drilldown_1": data.drillData.drillDown1,
"channel_drilldown_2": data.drillData.drillDown2,
"channel_drilldown_3": data.drillData.drillDown3,
"channel_drilldown_4": data.drillData.drillDown4,
"gclid": data.gclid,
"msclkid": data.msclkid,
"fbclid": data.fbclid,
"id": data.id,
"landing_page": data.landing_url,
"landing_page_group": data.landing_page_group
};
window.parent.postMessage({ source: "ATTRIBUTERINTERNAL", type: "data", data: send_data }, "*");
};
pingExternal();
</script>

Step 6: Hide and Configure the Embed Block

To proceed, activate Dev Mode in Wix by selecting “Dev Mode” → “Turn On Dev Mode” from the top menu.

turn on Dev Mode

Then, select the Embed Code block and configure these properties in the panel:

  • ID = attributer-internal
  • Hidden : Make sure this checkbox is ticked
  • Collapse : Make sure this checkbox is ticked
embed block id

Step 7: Retrieve and Store Your Form ID

Click on your form, locate its Form ID, and copy it. Store this ID in a note or document, as you’ll need it in the next step.

form id

Step 8: Generate Custom Code for Your Form

Replace the highlighted formId value with the one you copied from Wix.

$w.onReady(async function () {
$w("#attributer-internal").onMessage( (event) => {
if (event.data.type != "data") {
return;
}
let receivedData = event.data.data;

$w("#formid").setFieldValues(receivedData);
} );
});

Step 9: Insert the Custom Script into Your Page

Paste the generated code into the page’s designated code section. After completing these steps, publish your site to make the changes live.

insert the custom script into your page

What are your Feelings

Scroll to Top