Using hidden fields in forms to collect additional data

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.

Making visible fields hidden

1. To add a hidden field to a contact form, first open the editor, hover over the form and click on the "gear" icon:

2. Move to the new window with the form settings, click on the “Add field” text and select any of the available fields:
3. Locate the settings for the newly added field and click on the "Hidden field" switch:
4. Specify the value you’d like to transfer to third-party in one of the following ways:
  1. In the “Default value” field, enter any text that will be transferred as a separate parameter each time the form is submitted:
  1. 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  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:

  1. utm_source - source of incoming traffic (for example, utm_source=google);
  2. utm_medium - channel of incoming traffic (for example, utm_medium=cpc);
  3. utm_campaign - name of an advertising campaign (for example, utm_campaign=2021_summer_sale);
  4. utm_term - a keyword or phrase used to find the ad (for example, utm_term=buy_a car);
  5. utm_content - the type of content that brought the user to the site (for example, utm_content=link_in_text).
5. Make sure the form is connected to one of the available integrations
Note: Refer to the article Connect a form to integrated services to set up form integrations.

6. Publish the site to apply the changes.


Using hidden fields in practice

Let’s assume a website has a ‘Contact Us’ form that is placed

  1. at the top of the home page just below the header,
  2. at the bottom of the home page in the footer, and
  3. 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.




    • Related Articles

    • Customizing The Fields in a Contact Form

      After you've added a contact form on your site, make sure you change the layout so your customers submit only the relevant info. Add and remove the fields in the form, make some of them mandatory — that is up to you. Customizing the layout of a ...

    • Adding a Contact/ Lead Generation Form

      The contact (also lead generation, call-to-action) forms serve as a way of getting in touch with the business owner right through the site — for support, sales questions or for inquiries in general. With the help of contact forms, you can collect ...

    • Accessing Contact Form Replies

      With the help of the form replies feature you don’t need to worry anymore if submits from your contact forms might be lost or the integration may not go successful. Form replies feature gathers all replies from the contact forms on your website in ...

    • Adding an exact value to a field in the contact form

      You can add a specific field to the contact form that will force the visitor to enter the exact value. This feature can be useful for various purposes — for example, to create your own anti-spam, conduct basic polls, or even protect a page with the ...

    • Connecting reCAPTCHA to Your Website

      In addition to our native Honeypot protection, you can connect reCAPTCHA v3 to your contact forms to help you detect abusive traffic on your website without any user actions like clicking the “I'm not a robot” button. Tip: reCAPTCHA v3 runs in the ...