Populating an Ontraport Smart Form with Pilotpress Merge Fields without PHP

If you have a WordPress website using the Pilotpress plug-in, some functionality you may be interested in is populating an Ontraport form (whether it’s a legacy smartform or a form on an Ontrapage) using Pilotpress merge fields.

It turns out that you can’t simply put the Pilotpress merge fields in as the “value” attribute of the corresponding HTML form fields, or use them as the prefill values on the Ontraport form, or even set the form fields equal to the values of the corresponding merge fields directly by putting the merge fields into some Javascript variables. When the Pilotpress merge fields (which are actually WordPress shortcodes provided by the Pilotpress plugin) are put into places like these on a WordPress page, they don’t get processed (i.e., they show up as unprocessed, for example: “[pilotpress_field name=’First Name’]” ).

Unless you know how to write a little PHP code, doing it without PHP code requires a clever work-around (one that I didn’t come up with myself, but maybe I’m the first to apply it to Ontraport forms..?).

In short, what you want to do is put hidden DIV elements on your page that are filled with content using Pilotpress merge codes. You give them unique CSS IDs that you can use to then populate the Ontraport form on the page using some Javascript.

Here’s a simplified version of some form code you would see if you viewed the source HTML code of a form on your WordPress page or Ontrapage:

<form>
First Name: <input name="firstname" type="text" />
Last Name: <input name="lastname" type="text" />
Email: <input name="email" type="email" />
<input type="submit" value="Submit" />
</form>

You’ll see a bunch of other stuff when viewing the source code of one of your Ontraport forms; but the important thing to notice for our purposes is the “name” of each input field you want to pre-populate. In this case “firstname”, “lastname” and “email” are fields who values we want to populate. Note that inputs of type “submit” are the form submission buttons.

Say we want to pre-populate these three form fields using Pilotpress merge fields. The Pilotpress merge fields that correspond to these 3 fields (in order) are:

  • [pilotpress_field name=’First Name’]
  • [pilotpress_field name=’Last Name’]
  • [pilotpress_field name=’Email’]

However, as I mentioned, you can’t simply put these in a prefill values on your Ontraport forms; WordPress won’t process them and show their rendered values.

What you can do is add some hidden DIV elements–either on your WordPress page (in the WordPress editor’s “text” view) or in a custom HTML block on an Ontrapage like this:

<div style="display:none;" id="firstname">[pilotpress_field name='First Name']</div>
<div style="display:none;" id="lastname">[pilotpress_field name='Last Name']</div>
<div style="display:none;" id="email">[pilotpress_field name='Email']</div>

WordPress is going to process these merge fields/shortcodes, but you won’t see them on the page because they’re in invisible DIV elements (“display:none;”). But be assured, the actual first and last name of the logged in user–along with their email address–will in fact be there in the source code on the page.

But how do you get these into the form??

This is where you use a little Javascript magic to “pull” information from the invisible DIV elements and put them into the form/s on the page. You would put the following code into the HEAD section of the page if you can (it should work OK in a custom HTML block on an Ontrapage into which you inserted a form in the Ontrapage editor too):

<script>
window.onload = setVar;
function setVar() {
var theform = document.getElementsByTagName("form");
theform[0].elements["firstname"].value=document.getElementById('firstname').innerHTML;
theform[0].elements["lastname"].value=document.getElementById('lastname').innerHTML;
theform[0].elements["email"].value=document.getElementById('email').innerHTML;
}
</script>

This script is grabbing the content from the hidden DIV elements and putting it into the corresponding elements in the first form on the page (“theform[0]”). If you have more than one form on the page, the next form is “theform[1]” and so on.

Conclusion

I think the easiest way to pre-populate a form at a WordPress + Pilotpress website is using some PHP. However, the work-around described in this post is not a bad alternative if you don’t know PHP, don’t want to hire a PHP programmer, feel comfortable doing some HTML and Javascript coding, and/or don’t want to mess around with plug-ins to get the job done.

Caveats:

  1. Make sure to not let errant spaces get into your hidden DIVs–i.e., between the DIV tags and the merge fields–or these spaces will also get transferred to your form fields. For example, there should be no spaces on either side of the Pilotpress merge field code where these orange characters are: <div style=”display:none;” id=”firstname”>[pilotpress_field name=’First Name’]</div>
  2. This method works for Ontraport “Smart Forms”. It may not work with Ontraforms.
  3. If the form input fields also have ID attributes, make sure the IDs you use in your hidden DIVs don’t conflict with them (i.e., the IDs you use for the hidden DIVs must be unique on the page).