You can use the Hidden form field (in Form Blocks only) to pass a query parameter to a form on your site. This is useful for tracking referral sources.
Step 1 - Add the form
Click an Insert Point to add the Form Block.
Note: For more information on adding and editing the Form Block you can check out our guide here.
Step 2 - Add the hidden form field
To add a new Form Field, click + at the bottom of the Form Block Editor.
Tip: By default, the Form Block will include Form Fields for Name, Email Address, Subject, and Message. In the above example, we've removed two of the default Form Fields, as we only want to ask our newsletter subscribers for their names and email addresses.
Select Hidden from the Form Field Menu.
Step 3 - Customize the hidden field
Edit the Title of the Hidden Form Field. This will automatically change the name of the variable below beginning with SQF_. You can also keep it as the default text "Hidden."
This is the variable you'll use in your page's URL when you share the URL through different media.
Tip: Use a single-word variable for best results, especially if you're using Google Drive or Mailchimp as your storage service. Variables with multiple words or characters may not properly move your data.
You can also change the Default Value to pass a value when someone fills out the form and the Hidden variable is not available. This will most likely happen when someone finds the form by visiting your site directly.
Step 4 - Save the Form Block
When you're finished creating your form (don't forget to add storage), click Save.
Step 5 - Share your page
To pass a value to a Hidden form field, you must pass the field and value in a query string. Put simply, you need to add custom text to the end of your URL.
Use the following format:
- <field-title> is the variable name (or Title) assigned to your Hidden form field and
- <value> is the data you wish to pass to the Field.
Continuing with our example from above, our query strings will all begin with:
The <value> that comes after the equal sign is up to you.
For example, you might use:
- /?SQF_SOURCE=facebook for URLs you have shared on Facebook
- /?SQF_SOURCE=twitter for those on Twitter
This way, you can identify forms filled out by users who clicked the URL on Facebook and Twitter respectively.
You don't need to use "facebook" and "twitter" as your values, even if you're tracking Facebook and Twitter campaigns. They can be anything you want. Animals, colors, numbers, or even strings of random letters and numbers.
Note: Values passed must be 100 characters or fewer.
I have a website, awesomerestaurantsinc.squarespace.com. On my homepage, I have a signup form for my newsletter. I'm sharing this signup page using three campaigns:
- One on Facebook
- Another on Twitter
- A third on Google Ads
I'll use the Hidden Form field to track signups from each campaign.
On Facebook, I'll share this URL:
On Twitter, I'll share this URL:
On Google Ads, I'll share this URL:
I manually added the values "facebook", "twitter", and "google-ads". When someone submits a form after clicking a link I shared, "facebook, "twitter", or "google-ads" will record in the Source column for that form submission. This way, I can easily see which campaign attracted each subscriber.
Tip: You can use your internal domain or your custom domain when creating these links. If my website had a custom domain, I could share http://awesomerestaurantsinc.com/contact-us/?SQF_SOURCE=FACEBOOK .
Note: If I wanted to hide that I was tracking sources (from the more savvy users), I could rename my Hidden form field to something like "dragons" and then use the values "apple," "orange," and "lime." As long as you know what the values are referring to, they can be whatever you want them to be. Thus my URLs would be http://awesomerestaurantsinc.squarespace.com/contact-us/?SQF_DRAGONS=apple .
Step 6 - Test the Form Block (optional)
To test the hidden field, you'll need to log out of your site. After you're logged out, go to the full URL for the page, and manually add the field and value in the complete query string that you plan to pass to visitors.
If I'd like to test my query string for Twitter, I'd log out of my site and go to the following URL:
I can now test and verify that the hidden field is working as intended.
Tip: As an alternative to logging out, you can visit the URL in an private browser window. Use an incognito window in Google Chrome or private browsing in Firefox and Safari.
Step 7 - Viewing source data
To view the referral sources, open the Storage services connected to your Form Block.
The hidden field appears in email submissions next to Source.
The hidden field appears in the Source column in Google Drive.
The hidden field appears in the Source column in Mailchimp.
If someone completed your Form without going through one of these links, then Source appears with your Default Value (or blank, if you left it blank). In our example, we changed our Default Value to "Direct from website."
Tip: With a paid Mailchimp account, you can create conditional customized autoreply emails so subscribers from different sources can receive different messages upon subscribing. Learn more in Mailchimp's knowledge base.
Using multiple hidden fields
If you're using more than one Hidden form field, use an ampersand (&) to separate the fields.
For example, to track the progress of my three campaigns from month to month, I could add a second Hidden form field with the title "MONTH."
My URLs would then look like this:
- <value-1> is the value that relates to SOURCE ("facebook", "twitter", "google-ads")
- <value-2> is the value that relates to MONTH ("january", "february", "march", and so on through the year)