Pre-populate Forms for Advanced Targeting

Pre-populate formsA popular feature of online forms is the ability to personalize the form for each visitor. You can add known information to some form fields to make it easier to complete and reduce the likelihood of errors. You can even add data to hidden fields to track and target certain demographics and behaviors. Our Pre-populate function makes it possible by adding variable text to the URL that tells the form where and what to insert.

An overview of pre-populating can be found in a previous article which outlines the basic usage. An example of a pre-populate link is:

https://www.formsite.com/forms/pre-populate/fill?2=YourValue

 

What if you wanted to do the same thing with an embedded form? What about changing the value dynamically using Javascript or PHP?

Pre-populating Embedded Forms

Embedding forms is a simple matter of pasting the form’s embed code into your page code where you want the form to appear. As shown on the documentation page, the embed code has a prePopulate parameter where you can list values to automatically enter when the form is loaded. It looks like this:

prePopulate: { "2":"Alex", "3":"Powers","4-1":"1","4-2":"2"},

This line will add ‘Alex’ to the 2nd item, ‘Powers’ to the 3rd item, etc. Here’s where it gets interesting.

Dynamically Changing

Say you have a form to collect information after your visitors are logged in. Your site will already have some identifying information so you don’t need to ask for it again on your embedded form. You can write that information directly into your embed code as the page loads.

PHP:
Depending on your content management system or platform, your user information is accessed through a global variable. Using WordPress as an example, your code would look like this:

<?php
 $current_user = wp_get_current_user();
 ?>
prePopulate: { "2":"<?php echo $current_user->user_email ?>"},

Javascript:
Many times you can’t access the server-side code (PHP, Java, etc.) but you can still get user information using client-side tools like Javascript or jQuery. Let’s say your page renders with the account username in the header within an element with the id of “username”:

prePopulate: {"2":document.getElementById('username').innerHTML},

jQuery:
If your site uses jQuery it’s even easier:

prePopulate: {"5":$('#username').text()},

Get the Referrer

Here’s a trick that you can use to document where your visitors came from. Say you have a contest entry and you have lots of sites that send traffic your way. This will allow you to add the referring site to a hidden field in your form that you can tally at the end of your campaign to see who sent the most traffic.

prePopulate: {"1":document.referrer},

If the first item in your form is a Hidden Field item, this code will put the referring site into the value of that item as the page loads.

If you have any questions or any other tips for using prePopulate, let us know in the comments.

6 thoughts on “Pre-populate Forms for Advanced Targeting

  1. HI, is there any way to prepopulate/embed fields for a save and return form?

    For example, I’m using formsite to build a timesheet. I prepopulate each day of the time-period and then the user enters any hours worked that day. Right now it seems like the pre-populate info is lost.

    I tried this link but had no luck.

    https://fs23.formsite.com/outback/form82/fill?id25=02-14-2016&id44=02-27-2016&id1=02-15-2016&id49=02-15-2016/form_login.html

    This link worked if I have save/return turned off,

    https://fs23.formsite.com/outback/form82/fill?id25=02-14-2016&id44=02-27-2016&id1=02-14-2016&id49=02-15-2016.

    • Currently the pre-populate link doesn’t work with Save & Return. The issue is that there’s a possible conflict if you’re looking to pre-populate a field that already has saved information – which information do you use? So unfortunately you can’t use both together.

      • @Tom. I made a workaround using jquery and custom scripting that took the prepopulated values and stored it in a temp cookie. When the user had done the login sequence (I placed a login link on the first page) and returned ned to the form I inserted the values from the cookie if the user started a new form and ignored the cookie data if the user continued on a saved form. It might not be bulletproof but it saved Formsite a customer:-) The biggest problem is that you have to figure out some way the guess the state of the form (logged in, not logged in, starting from fill, starting from stratch etc.) It would be nice if Formsite exposed properties for this.

  2. I have a FormSite form embedded on my site, but would like to pre-populate it with data taken from my MailChimp list when a recipient clicks through. At the moment, the link looks like this:

    mysite.com/pagename.php/fill?id=0*|email|*

    When the link is clicked, the URL updates with the relevant data (so @|email|* becomes myname@mysite.com), but that doesn’t then feed into the relevant field on the form.

    Is there a workaround that can be used with PHP?

    • Yes, you can use the prePopulate parameter with your embed code then use PHP to write the value on page load. In this case you wouldn’t use the Formsite pre-populate link format but your own custom format instead.

      Example: mysite.com/pagename.php?email=*|email|*

      Then you would use PHP to grab that parameter and insert it into the embed code as the page is loading:

      <a name="formvtjqi9JE" id="formAnchorvtjqi9JE" rel="nofollow"></a>
      <script type="text/javascript" src="//www.formsite.com/include/form/embedManager.js?vtjqi9JE"></script>
      <script type="text/javascript">
      EmbedManager.embed({
        key: "www.formsite.com/form_app/FormSite?EParam=IRLY%2&vtjqi9JE",
        prePopulate: { "2":"<?php echo $_GET['email'] ?>"},
        width: "100%",
        mobileResponsive: true
      });
      </script>

      Let me know how that works for you. Thanks!