# How to Prefill Form Fields

Popup forms often contain generic input fields that many users will fill the same way, such as email addresses and names. Making respondents fill in these fields manually can be repetitive and time-consuming.

Instead, you can use Popupsmart’s Prefill feature to pre-populate form fields for your customers and prospects.

Additionally, prefill forms fields can be used as hidden inputs, which remain hidden from users. Even though these fields are hidden, you will still collect user data and see it on your Popupsmart Leads table once the user clicks on the popup button.

# How Prefill Feature Works

Popupsmart uses smart tags (dynamic text replacement) to collect dynamic user information (i.e., usernames, email addresses, location, etc.) You can add smart tags (specifically formatted placeholder texts) in your popup’s form field names to prefill them with user data.

Smart tags can also pull users’ information from special URL parameters if there are any. A URL parameter fills in the data when it includes the information you want to be prefilled in the form.

For example,”examplewebsite.com/?name=erica”

You may copy our predefined smart tags or use Google Tag Manager to create a tag. (Learn more on the Smart Tags documentation.)

Note: Smart tags are case-sensitive; use them as in the case they should be. Otherwise, they won’t operate.

# Use Prefill Form Fields for Your Popup Campaigns

# 1. Create a Popup Campaign / Open an Existing One

# 2. Go to Customize & Edit Form Fields

# 3. Add a Dynamic to a Popup Form Field’s Input Name

Copy a predefined smart tag and paste it into an Input Name field. For example, paste {{email}} into the selected input’s name field. This will prefill that input. You can use different smart tags for different fields as you need.

# 4. Add a Smart Tag to a Hidden Form Field

Collect user data without showing users the input field. Click on “Add a new form field” and select “Hidden Input.” Add a smart tag into the Input Name.

# 5. See The Pulled Data on Your Leads Table

You can access the collected user data (both from hidden and visible form fields that are prefilled) through your Leads table.

# Popupsmart’s Predefined Smart Tags/Dynamic Texts

• The following are predefined smart tags available to use right on your Popupsmart campaigns. The text following a colon ( : ) is for exemplary purposes of how the dynamic content will look with the pulled data.

  {{ip”: “3.23.78.141}},

  {{date_MM_dd_yyyy}}: “03/05/2021",

  {{date_MMMM_dd}}: “May 03",

  {{date_dddd_dd_MMMM_yyyy}}: “Monday, 03 May 2021",

  {{country}}: “United States”,

  {{region}}: “Ohio”,

  {{city}}: “Ohio”,

  {{countryCode}}: “US”,

  {{language}}: “Turkish”,

  {{os}}: “Mac OS X 10.15",

  {{browser}}: “Chrome 90.0",

  {{referrer}}: “”,

  {{utmCampaign}}: “”,

  {{utmSource}}: “”,

  {{utmMedium}}: “”,

  {{utmContent}}: “”

Note: These tag names are reserved names (e.g., <code v-pre>) and should not change.

• You don’t need to define custom variables for system fields such as;

  {{utmCampaign}}: “”,

  {{utmSource}}: “”,

  {{utmMedium}}: “”,

  {{utmContent}}: “”

If you’d like to define custom variables in addition to the pre-defined ones, you may see How to Set up Custom Variables Using Google Tag Manager.

# How Prefill Forms Find Data

# Method 1: Using Google Tag Manager to Define Custom Variables

One method to prefill popup forms is to implement the Popupsmart JavaScript API on GTM. First off, you’ll need to create a tag for your prefill Popupsmart campaigns on your Google Tag Manager account.

Step 1: Go to your business GTM account and click on Add a New Tag.

Step 2: Click Tag Configuration and select Custom HTML as your tag type.

Step 3: Paste the following code snippet in the HTML field. Note that the variable part is exemplary; you may change it as you need.

<script> psMetaData.add({ name:  }) </script>

Step 4: Click on the “+” button to set up your tag’s trigger.

Step 5: Click on Trigger Configuration and choose Window Loaded, as seen below.

Step 6: There are two options you may select; All Windowloaded Events or Some Window Loaded Events.

• If you select “some,” then you’ll need further configuration to use this trigger only on specific Page Hostname, URLs, Paths, or Referrers. Besides, you have the option to choose a built-in variable or add a new variable.

• Does this sound advanced to you? Then, just select All Windowloaded Events.

# Method 2: Using Email Service Providers for Auto-Filling Forms

If you’d like to target your newsletter subscribers, some of whose information you already have, then it’s a great way to prefill a popup form for them and boost conversions.

Just link the CTA button on your email content with a page URL that contains the user information. For example; domain.com/page?name=firstname&country=canada

Basically, the popup form on the linked page will be pre-populated with the data provided on the URL parameter.

# Method 3: Using URL Parameters

As we mentioned in the method below, you can manually enter URL parameters to prefill popup forms. This method works as “examplewebsite.com/?name=firstname”

We recommend using this one when you already know the user data and will link to the page from a source that contains the required user information.

Still have questions? Contact us via live chat or email us at [email protected]