How to pre-fill fields on your ActiveCampaign form

You can pre-fill form fields for known contacts with information you already have in your ActiveCampaign account. To pre-fill form fields, you need to append the web page's URL path or form URL with a query parameter.

Take note

  • You need to turn on and implement Site Tracking to use this solution
  • Contacts will see their information pre-filled on a form if they have a contact record in your account and if they have been identified through the ActiveCampaign Site Tracking feature
  • Each query string you add to a URL path will differ based on fields you wish to auto-fill for a form
  • Contacts can edit the information they see pre-filled on a form
  • It is not possible to use this solution with ActiveCampaign landing pages. Landing pages do not natively support query parameters

How it works

Appending a URL path with a query string is quick and easy. You only need to know which field you want to pre-fill on a form and the field's corresponding personalization tag. Once you have identified the fields you want to pre-fill on the form, you are ready to create your query string.

After you add the query string to the web page or form URL, known contacts who land on your page will see their own information pre-filled on the form.

How to pre-fill form fields

This solution works for the following form field types:

  • Text input
  • Text area
  • Date
  • Date Time
  • Hidden

Step 1: Identify form fields and personalization tags

The Manage Fields page in your account lists all standard and custom contact fields. To locate the Manage Fields page, click "Settings" (gear icon), then click "Manage Fields."

On the Manage Fields page, you will see a list of your standard and custom fields. Each field has a personalization tag. Copy the personalization tag for each field you want to pre-fill on the form, then paste it to your clipboard or another file.

As an example, we will pre-fill the following form fields: First name and Email address. The First Name field has a personalization tag of %FIRSTNAME% and the email address field has a personalization tag of %EMAIL% .

Step 2: Create the query string

Next you need to create the query sting using the format below:

?fieldname=%PERSONALIZATION-TAG%

If you want to pre-fill multiple fields, then your query string will have this format (note the "&" between each field name):

?fieldname=%PERSONALIZATION-TAG%&?fieldname=%PERSONALIZATION-TAG%

Continuing with the example above, here is a query string that will pre-fill the first name and email address fields on a form:

?firstname=%FIRSTNAME%&email=%EMAIL%

Step 3: Append your webpage or form URL with the query string

Once you create your query string, you can add it to the end of the URL path of your webpage or form URL.

Webpage URL

  • This will pre-fill fields for any form type
  • You will need to work with your web host provider to add the query string to the end of your webpage URL path in the address bar
  • An example of a webpage with a query string could look like this:
    www.activecampaign.com/support?Firstname=%FIRSTNAME%&email=%EMAIL%

Form URL

  • This works with inline forms only
  • You can add the query string to the end of the form's URL path then share or use the Form's URL however you like. For example, you can pre-fill form fields for a multi-page form or add the query string to the end of the Form's link when sharing your form

To retrieve the URL for your inline form:

1. From your ActiveCampaign account, click "Site" then click "Forms."

2. Click "Edit" for the form you want to work with.

3. Click the "Integrate" button.

4. Click the "Link" tab.

The Form's link will look something like this:

https://youracaccountname.activehosted.com/f/213

5. Next, add the query string to the end of the form's link.

As an example, I want to pre-fill the email address on my ActiveCampaign form. To do so, I would format the form URL like this:

https://youracaccountname.activehosted.com/f/213?email=%EMAIL%

Once the query string is added to your form's link, you can share it anywhere you wish.

Advanced: Use JavaScript to pre-fill single and multi-select fields

Before you start:

  • This is for advanced users only
  • The ActiveCampaign Support team is not able to help you implement or troubleshoot any code you add to your webpage
  • The examples below use standard JavaScript code. There are other ways to write this code

If you are comfortable with coding your own solutions, you can use JavaScript to pre-select answer options for checkbox and dropdown form fields. This JavaScript needs to be added to the source code of your webpage.

The examples shown below are for the dropdown menu and radio button field types. However, you should be able to use JavaScript to pre-select answer options for the following field types:

  • Dropdown
  • Radio button
  • Checkbox

Click each link below to view examples.

Load ActiveCampaign JavaScript

To automatically load our JavaScript once the page loads, we use the window.onload method, like this:

<script>
window.onload = () => {
    ...
}
</script>

To set the auto selection on a specific element, we search for it by using the document.querySelector() method.

Select radio button by value

To auto-select a specific radio button on page load, inspect the radio button you want to auto-select and note the value attribute:

<input type="radio" value="blue">

To auto select blue, we write our JavaScript like this:

<script>
window.onload = () => {
    /** Checked the 'blue' value on page load */
    document.querySelector('input[value="blue"]').checked = true;
}
</script>
Select option by index

To auto-select a specific option from the dropdown menu, we count the first option starting at zero:

<select id="food">
  <option> --- </option>
  <option>Pizza</option>
  <option>Spaghetti</option>
  <option>Cheeseburger</option>
</select>

To auto-select Spaghetti, we write our JavaScript like this where the index value 2 is written using the bracket, [2]:

<script>
window.onload = () => {
    /** Select the Spaghetti option on page load */
    document.querySelector('[id="food"]')[2].selected = true;
}
</script>
Alternative: Select option by index

An alternative, a more advanced way of auto-selecting a dropdown value, is to write a custom function without reusing the document.querySelector() method:

/**
 * Auto-select the option value from the drop down menu
 * 
 * @param {string} node    The node data-name to set the selection
 * @param {number} value   The option index value to select on page load
 * @return {void}
 */
function setSelectedValue(node, value) {
    var elem = document.querySelector(node);
    for (var i = 0; i < elem.options.length; i++) {
        // Count by index
        var nodeIndex = elem.options[i].index;
        // Select the intended option
        if (nodeIndex == value) {
            // Set the option to 'selected'
            elem.options[value].selected = true;
            return;
        }
    }
}

and calling it on page load:

window.onload = () => {
    /** Select the 'Spaghetti' option on page load */
    setSelectedValue('[id="food"]', 2);
}
Complete example code
<script>
window.onload = () => {
    /** Select the 'Spaghetti' option on page load */
    setSelectedValue('[id="food"]', 2);
}

/**
 * Auto-select the option value from the drop down menu
 * 
 * @param {string} node    The node data-name to set the selection
 * @param {number} value   The option index value to select on page load
 * @return {void}
 */
function setSelectedValue(node, value) {
    var elem = document.querySelector(node);
    for (var i = 0; i < elem.options.length; i++) {
        // Count by index
        var nodeIndex = elem.options[i].index;
        // Select the intended option
        if (nodeIndex == value) {
            // Set the option to 'selected'
            elem.options[value].selected = true;
            return;
        }
    }
}
</script>
Have more questions? Submit a request