Skip to main content
Act-On Software

Using Form Customization Script to Convert URL Query Strings into Form Inputs

 

This guide will review how to use UTM parameters to allow a contact to follow a link that will pre-fill hidden fields on your Form.

Introduction

Query Strings are sets of variables that can be placed in a URL that, when accessed, will pass data. With the instructions in this guide, you can use query string parameters to allow data to pass from a URL into an Act-On Form.

Doing this will allow contacts to enter minimal information on a form and for information to pass as data in the background.

Examples of when you might want to do this:

  • Passing the Email address via the confirmation email link for Double Opt-In forms
  • You have purchased ads on a network with which Act-On is not directly integrated
  • The referral information to attribute where the link came from is expressed in a query string
  • For example, your link to examplecustomerdomain.com has ?referrer=adNetworkName 
    • Your complete URL is http://examplecustomerdomain.com?referrer=adNetworkName. This URL takes the clicker of the ad to http://examplecustomerdomain.com. The additional URL query string components of ?referrer=adNetworkName are for reporting only in your visitor referral data.
  • Checking how many hits come from these specific URLs with the query string allows you to evaluate the success of your ad campaign 
  • With this script, you will be able to easily see which form submissions contained this query string in a way that is easily searchable and 'query-able' since the query string values will be in separate columns

Note: The instructions in this guide pertain to Hidden Fields only.

Step 1: Set up Your Form to Accept Query String Parameters

Instructions for Classic Forms:

  1. Navigate to Content > Forms and click Edit on an existing form, or New Form.
  2. Create an input in your Act-On form.
    • This can be a standard One Line Text input or a Hidden input
    • You will most likely want to use a Hidden input, since you would not need your form submitters to see that you are storing this information in a form input.
  3. Next, you will be prompted to name your input. The Data Field Name in the input in the form needs to match the field name of the query string you are hoping to capture.
    • Example: If your new visitors are coming in with the query string [URL]?referrer=adNetworkA
      • Your field name is "referrer". This is a field on the form and will also be a column on your form submission list.
      • The field value that populates into your list would be "adNetworkA"
    • You will need to have a matching input for each field name you hope to capture. If there is a query string field name that does not have a matching Act-On form input, the script will skip it and it will not be saved.
  4. Once the field is created, go to Settings.
  5. Copy the script below into the External Web Analytics text area.
    • The following script needs to be placed in your form editor, rather than in the landing page editor.
    • This works in Classic Forms only, not in Labs Forms.
    • Please see the article Using JavaScript in Email Messages, Forms, and Landing Pages for more information on other sections of the platform where scripts may be run.
<script>
var urlParams;
var query = (window.location != window.parent.location) ? document.referrer.split('?')[1] || '' : window.location.search.split('?')[1]|| '';
(window.onpopstate = function () {
var match, search = /([^&=]+)=?([^&]*)/g;
urlParams = {};
while (match = search.exec(query))
urlParams[encodeURIComponent(match[1])] = match[2];
}
)();
for (i in urlParams) {
var urlParamsArray = urlParams[i];
try {
document.getElementsByName(i)[0].value=decodeURIComponent(urlParamsArray);
}
catch(err) {
}
};
</script>
Additional Notes for using this Javascript in classic forms:
Embedded Forms:
  • This code will read the query string from the URL for your Act-On form if appended to your Act-On form's public URL.
Forms in an iframe:
  • This code will read the query string from the URL for your Act-On form within an iframe
  • If your form is embedded within an iframe but you do not want to read the URL from the parent page (instead you want to read a query-string from the iframed form's URL):
    • Replace the line above at the top of the screen where you see this:
var query = (window.location != window.parent.location) ? document.referrer.split('?')[1] || '' : window.location.search.split('?')[1]|| '';

With this line:

var query = window.location.search.split('?')[1]|| '';
External Forms:

This script can also be adapted to work on non-Act-On web pages with external forms. See the article Posting External Forms to Act-On for further information.

Instructions for Labs Forms

  1. In the Design screen, drag and drop a Hidden Field block into the form content.
  2. Edit Hidden Field:
    1. Enter a Label. This is for display only and does not display on the contact form.
    2. Check the box for “Grab URL Parameter”
    3. Enter the URL Parameter. Requirements:
      • Must be one word - the name cannot contain a space, however, an underscore is accepted.
      • It does not need to match the column name but must match the field label in the URL.
    4. Enter a Default Value (optional).
      • This will provide a default value on the form submission if the parameter is empty for some reason.
      • You may enter a personalization field here to bring in cookie data as well. Click on the blue wand and use that drop-down to select the field you are gathering. This will show the personalization field with curly brackets:
        {{Email}}
    5. Field Mapping will be the same as with regular form fields and associate with the column name on your list and field names in your CRM, if applicable.
  3. Click Submit.

Repeat these steps for each of the hidden fields you wish to auto-populate with contact information.

Place the new form into a Landing page and grab the Lading Page URL for the next step.

Step 2: Creating Query Strings in your URL

To create query strings that will send data into your form, proceed with the following steps. (This is the same for Labs and Classic forms).

 http://act-on-form-url-goes-here?Email={{Email Address}}

When testing forms, please be sure to clear your browser cache & cookies for all time, or use a private / incognito browser window.

  1. Start with your landing page URL (or form URL for Classic):

    http://act-on-form-url-goes-here
  2. Add a question mark to the end:

    http://act-on-form-url-goes-here?
  3. Enter the first parameter name after the question mark, followed by an equal sign:

    http://act-on-form-url-goes-here?LeadSource=
  4. Enter the parameter value afterward the equal sign

    1. If using a static value (ie lead source), enter the value as it should enter the form.

      http://act-on-form-url-goes-here?LeadSource=PROMO123
      • A space is not allowed here.

    2. If using a Dynamic value (ie email address), enter the personalization variable with curly brackets:

      http://act-on-form-url-goes-here?Email={{Email Address}}
  • This variable insertion will work with URLs sent from within an Act-On email, but is otherwise not recommended.
  • A space is allowed here.
  1. If entering additional parameters, enter an ampersand (&) and enter the next parameter and value:

    http://act-on-form-url-goes-here?Email={{Email Address}}&FirstName={{First Name}}
    • You may use any combination of parameters, however, an excessively long URL may cause issues loading the page, so proceed with caution.

  2. Once you have all UTM parameters defined, test the URL you’ve created:

    • If the URL only has static values, access the URL in your web browser and submit the form. Then review the form submission data.

    • If the URL contains variables and you will be sending it in an email, send a test email. Add your test URL to the message and click through the link. Submit the form and then review the form submission data.

  • Was this article helpful?

Have a question about this topic?

Ask the community!