Home | Forms | How to Pre-Fill Iframe Embedded Forms

How to Pre-Fill Iframe Embedded Forms

Using URL parameters and JavaScript, you can pre-fill forms with form fields that either appear on the form or are hidden. In a few of our previous blog posts, we have shown the backend process of setting up forms to have this capability for forms that are either linked to directly in an email or are embedded on a web page as a widget, but that leaves out the popular embedding method of iframes. Since parameters cannot be passed through iframes natively, a little bit of extra code is needed, which we will cover in this post.

In my example, a ClickDimensions form shows users the information you already have for them in CRM, and users can update any of the form data as they please.

The form fields I will be using include standard text fields, an email field and a hidden field.

This is the JavaScript in my form’s code editor that enables all of the fields to pre-fill. You can download the sample JavaScript code here. (Note that this is a sample and will need to be modified for your requirements by a web developer.)

Now for the code that will allow the parameters to pass through the iframe.

This is the JavaScript you will place on your web page or ClickDimensions landing page above the iframe code to enable the URL parameters to pass through the iframe (this code does not go in the form’s code editor):

<script>

$(function() {

var search = window.location.search;

$(“#foo”).attr(“src”, $(“#foo”).attr(“src”)+search);

});

</script>

If you are using the ClickDimensions landing page block editor, you can place the script into the header section of the external resources and the form’s iframe code can be placed into an HTML block. From there you will add an “id” to the iframe code, which allows the above script to target the iframe source. In my example, I used the id of “foo,” which you can see in the above script and in the beginning of my iframe code here:

<iframe id=”foo” src=”http://web.clickdimensions.com/clickdimensionscom-au9y6/pages/rf5huozoeeaulaavxwg1ya.html” allowtransparency=”true” width=”100%” height=”1000px” type=”text/html” frameborder=”0″ style=”border:0″ scrolling=”no”></iframe>

Once all the JavaScript code is placed in the form’s code editor and on the landing page, you’re well on your way to having the form pre-filled. Below is an example of the pre-filled form as is, and you might notice the characters of %20 being added between words. That is because the data in CRM includes a space between words, and a URL codes spaces as %20.

To remove the %20 characters in any fields that could potentially have spaces in the CRM values, you will use this JavaScript for each of those fields. The JavaScript will be added into the form’s code editor alongside the existing code. Here is what the additional code looks like by itself for the Street Address field:

var streetaddressn = streetaddress.replace(/%20/g,” “);

streetaddresscode.value = streetaddressn;

When you add that code alongside the existing JavaScript for the Street Address field, it will look like this:

var streetaddress = getParm(‘Street’);

var streetaddressn = streetaddress.replace(/%20/g,” “);

streetaddresscode.value = streetaddress;

streetaddresscode.value = streetaddressn;

For my form, I used this code for the Street Address, City and State fields.

With the additional %20 code in the JavaScript section of the Code Editor, the full code will then look like this:

Here is the landing page that was clicked on from a ClickDimensions email, where the form is embedded via an iframe. You can see the form has pre-filled with CRM data from parameters in the URL. When this form is submitted, a Posted Form record will come into CRM with the submitted fields and the hidden field value as well.

Marissa forms capture

Please note: The custom code in this blog post is provided as-is and we do not provide support on the implementation of this code.

2017-05-24T18:21:10+00:00 By |Forms|0 Comments

About the Author:

mm
Marissa Clontz is a Lead Marketing Success Manager at ClickDimensions.

Leave A Comment