Using hidden fields in forms to collect additional data
Hidden fields in contact forms allow website owners to collect and transfer additional information to third-party services, thus helping to segment users who have filled out this form. Hidden fields can transfer both set values and values obtained from UTM tags, so as you can see this functionality can provide a clear understanding of the effectiveness of site forms and acquisition channels.
Note: Hidden fields remain invisible on a published site.
To add a hidden field to a contact form, first open the editor, hover over the form and click on the "gear" icon:
Move to the new window with the form settings, click on the “Add field” text and select field Short text:
Locate the settings for the newly added field and click on the "Hidden field" switch:
Specify the value you’d like to transfer to third-party in one of the following ways:
In the “Default value” field, enter any text that will be transferred as a separate parameter each time the form is submitted:
In the “Set value from URL parameter” field, enter the name of the UTM tag you want to transmit when submitting the form:
Note: The UTM tag value is transferred only if a user came to the page through a URL that had a corresponding UTM tag (for example, the utm_campaign tag from the above image will work for users who came through https://example.weblium.site/?utm_source=facebook&utm_medium=cpc&utm_campaign=summer_sale_2021 since the link includes a corresponding utm_campaign tag with a valid value). One hidden field can transfer only one UTM tag value. It is necessary to create new hidden fields for each UTM tag value that must be transferred.
Here is a list of existing UTM tags along with their functions and examples of possible values that will be passed when submitting the form:
utm_source - source of incoming traffic (for example, utm_source=google);
utm_medium - channel of incoming traffic (for example, utm_medium=cpc);
utm_campaign - name of an advertising campaign (for example, utm_campaign=2021_summer_sale);
utm_term - a keyword or phrase used to find the ad (for example, utm_term=buy_a car);
utm_content - the type of content that brought the user to the site (for example, utm_content=link_in_text).
Make sure the form is connected to one of the available integrations
Note: Refer to the Connect a form to integrated services article to set up form integrations.
Publish the site to apply the changes.
Let’s assume that https://example.weblium.site has a ‘Contact Us’ form that is placed
at the top of the home page just below the header,
at the bottom of the home page in the footer, and
in the pop-up window that appears when trying to close the site.
By adding a hidden field with specific identifiers to all three forms, you can easily determine which of these forms performs best in terms of collecting user submissions. To do this, you just need to count the number of applications per each specific identifier.
Note: The submissions presented in the image below were collected in a Google spreadsheet through a Zapier integration.
Note: Hidden fields remain invisible on a published site.
Making visible fields hidden
To add a hidden field to a contact form, first open the editor, hover over the form and click on the "gear" icon:
Move to the new window with the form settings, click on the “Add field” text and select field Short text:
Locate the settings for the newly added field and click on the "Hidden field" switch:
Specify the value you’d like to transfer to third-party in one of the following ways:
In the “Default value” field, enter any text that will be transferred as a separate parameter each time the form is submitted:
In the “Set value from URL parameter” field, enter the name of the UTM tag you want to transmit when submitting the form:
Note: The UTM tag value is transferred only if a user came to the page through a URL that had a corresponding UTM tag (for example, the utm_campaign tag from the above image will work for users who came through https://example.weblium.site/?utm_source=facebook&utm_medium=cpc&utm_campaign=summer_sale_2021 since the link includes a corresponding utm_campaign tag with a valid value). One hidden field can transfer only one UTM tag value. It is necessary to create new hidden fields for each UTM tag value that must be transferred.
Here is a list of existing UTM tags along with their functions and examples of possible values that will be passed when submitting the form:
utm_source - source of incoming traffic (for example, utm_source=google);
utm_medium - channel of incoming traffic (for example, utm_medium=cpc);
utm_campaign - name of an advertising campaign (for example, utm_campaign=2021_summer_sale);
utm_term - a keyword or phrase used to find the ad (for example, utm_term=buy_a car);
utm_content - the type of content that brought the user to the site (for example, utm_content=link_in_text).
Make sure the form is connected to one of the available integrations
Note: Refer to the Connect a form to integrated services article to set up form integrations.
Publish the site to apply the changes.
Using hidden fields in practice
Let’s assume that https://example.weblium.site has a ‘Contact Us’ form that is placed
at the top of the home page just below the header,
at the bottom of the home page in the footer, and
in the pop-up window that appears when trying to close the site.
By adding a hidden field with specific identifiers to all three forms, you can easily determine which of these forms performs best in terms of collecting user submissions. To do this, you just need to count the number of applications per each specific identifier.
Note: The submissions presented in the image below were collected in a Google spreadsheet through a Zapier integration.
Updated on: 04/26/2024
Thank you!