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
- 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
- It is not possible to use this solution with a preference center form. Preference center forms already have the email address and list subscriptions prefilled
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 Fields page in your account lists all standard and custom contact fields. To locate the Fields page, click Contacts > Fields on the left menu.
On the 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 string 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:
- From your ActiveCampaign account, click Website.
- Click the "Edit design" button for the form you want to work with.
- Click the "Integrate" button.
-
Click the "Link" tab.
The Form's link will look something like this:
https://youracaccountname.activehosted.com/f/213
- 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 Customer Experience 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:
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.
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>
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>
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);
}
<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>