Easily build and embed forms on your site. Try HubSpot Forms for free.
Forms

Auto-populate form fields with a query string

Last updated: November 28, 2018

free

You can auto-populate field values in a form on a page by adding query strings to the page URL for the following field types: single-line text, multi-line text, dropdown select, multiple checkboxes, number, radio select, single checkbox, and date picker. This also works for hidden form fields.

  1. Copy the property's internal name
  2. Create the query string

Please note: it is not possible to use query strings to auto-populate dependent form fields.

Copy the property's internal name

  • In your HubSpot account, click the settings icon settings in the main navigation bar.
  • In the left sidebar menu, navigate to Properties.
  • Click the name of a property to pre-populate values for in your form.
  • Copy the Internal name of the property.

refresh-property-internal-name

  • Repeat this for any other properties you want to pre-populate values for in your form.

 

Create static query strings with pre-defined values

You can create static query strings to auto-populate form fields with pre-defined values. In your browser, navigate to the page your form is on and copy the URL.

  • Add a question mark (?) to the end of the page URL.
  • Add the internal name of the property, followed by an equal sign and the value to auto-populate in the field. Take note of the rules for adding values, depending on the field type of the property:
    • Single checkbox: query strings must contain either a true or false value, not yes or no.
    • Date picker: query strings must contain a date value in a YYYY-MM-DD format.
    • Multiple checkboxes: query string values must match the property's value options exactly, with a semi-colon separating multiple values.
    • Radio select/Dropdown select: query string values must match the property's value options exactly.
  • Separate multiple properties with an ampersand (&).

After creating the URL with static query strings, you can use it as a link in your content such as emails and pages. A contact that clicks the link will see the form on the page auto-populated with the pre-defined value(s) in the query string.

An example and breakdown of a URL with properly formatted static query strings:

http://www.domain.com/marketing-offer?firstname=John&lastname=Smith&email=jsmith@email.com
&favorite_season=Winter&favorite_natural_disasters=Blizzard;Hurricane&number_property=7&will_you_come_to_the_party=Maybe&do_you_like_parties=true&date_of_party=2018-10-24
  • Beginning of query string and single line text field: ?firstname=John
  • Single-line text field: &lastname=Smith
  • Single-line text field: &email=jsmith@email.com
  • Dropdown select field: &favorite_season=Winter
  • Multiple checkboxes field: &favorite_natural_disasters=Blizzard;Hurricane
  • Number field: &favorite_number=7
  • Radio select field: &will_you_come_to_the_party=Maybe
  • Single checkbox field: &do_you_like_parties=true
  • Date picker field: &date_of_party=2018-10-24

 

Create dynamic query strings with personalization tokens (Marketing Hub Starter, Basic, Professional, and Enterprise only)

You can use personalization tokens to create dynamic query strings that will auto-populate form fields based on known contact properties.

Please note: this will only function correctly on HubSpot pages with a HubSpot form. The link URL must also be placed in your HubSpot content or a external page with your HubSpot tracking code.
  • In your HubSpot account, navigate to Marketing > Email.
  • Click Create email or the name of a draft email.
  • In the rich text toolbar, click the personalization token icon contacts.

  • In the dialog box, select a personalization token to auto-populate in your form. Continue adding additional personalization tokens as needed.
  • The personalization tokens will now appear in the email body. In the rich text toolbar, click the source code icon codef to view the HTML of your email.

  • In the source code, you'll see the raw code for each personalization token added to the email body. Each token will be enclosed with double brackets {{ }}. Highlight a token (e.g., {{ contact.firstname }}), then right-click and select Copy
  • Repeat this for any personalization tokens you want to pre-populate in your form.
  • At the bottom of the dialog box, click Cancel and close to exit the source code.

  • In your browser, navigate to the page your form is on and copy the URL.

    • Add a question mark (?) to the end of the page URL.
    • Add the internal name of the property, followed by an equal sign and the personalization token. Ensure all spaces are removed from the token (e.g., {{contact.firstname}} ).
    • Separate multiple properties with an ampersand (&).

An example of a URL with properly formatted dynamic query strings:

http://www.domain.com/marketing-offer?firstname={{contact.firstname}}&lastname={{contact.lastname}}&email={{contact.email}}

After creating the URL with dynamic query strings, you can use it as a link in your HubSpot content such as emails and pages, or a external page with your HubSpot tracking code. A contact that clicks the link will see the form on the page auto-populated with their information if they have known values for the field(s) in the query string.

New Call-to-action

Was this article helpful?

If you still need help you can get answers from the , or to contact support.