Home | Cool ClickDimensions Features | Pre-fill Forms from Links or Webpages

Pre-fill Forms from Links or Webpages

ClickDimensions includes a great profile management feature, but it is works only when an email is sent with a link to the profile management form, and is limited to data that is on the recipient’s contact or lead record in CRM. It has the advantage that it can all be configured in a graphical UI, but in some scenarios, you might want additional flexibility. Here’s a way you can pre-fill forms using URL parameters and a little javascript.

We’ve kept this example simple to illustrate how it can be done. This form has been pre-populated with an email recipient's first name, last name, job title and email address. (You can also use this technique without sending email, as long as you have a way to add useful parameters in the form’s URL.)

image

Here’s how this was done:

  1. Use our form designer to create a form. Here we have added fields for first and last name, job title, and email address. Notice the “Code Editor” button. We’ll come back to that in a moment.
    image
  2. Next, we’ll want to get the IDs for each of our fields. Click the “Embed” button and then click the link to where the form is hosted. With the form now open in your browser, you can view the HTML source and locate the IDs of the fields. Copy the fields IDs to add them to your javascript in the following steps.
    image
  3. Back in the Form Builder, click on “Code Editor”. We’ll be inserting some javascript.
    image
  4. Here’s the javascript you’ll want to insert. You can download this sample here. (Note that this is a sample, and will need to be modified for your requirements by a web developer.)
    image
  5. In my email template, I add a link to the form I designed, and I also add parameters to the URL and placeholders where the first and last names, job titles, and email addresses for each recipient will go. The parameters I’ve added to the form’s URL match what I have in the javascript above.

    image

Now, when I send the email to a recipient, the link will be personalized for each recipient, and the javascript will fill in the fields automatically.

There are other scenarios where this can be used. Instead of building the URL and its parameters in an email template, you could build it on your website. For example, if you have a product catalog, with links from each product page to a form where prospects can request a quote, you can pass the product ID and other information to the form via the URL so your prospect doesn’t need to type it in. There are endless possibilities!

Happy Marketing!

About the Author:

Matt Wittemann is an 11-time Microsoft Dynamics CRM MVP and ClickDimensions' Director of Technical Solutions.

8 Comments

  1. Vikram Patil June 30, 2014 at 2:10 am - Reply

    Can this feature be made available for Surveys.

  2. Vikram Patil July 25, 2014 at 2:12 am - Reply

    For Auto populating forms if there is a Space in the Job Title say for e.g. “marketing Manager” this value when passes to the url auto replaces the space between marketing and manager with %20 which shows on you form as “Marketing%20Manager” to remove this %20 from the field use the below code.

    var jobTitle = getParm(‘JobTitle’);
    var jobTitlen = jobTitle.replace(/%20/g, ” “); // Ads this line of code

    and pass the variable jobTitlen to the below

    JobTitleField.value = jobTitlen;

    Thanks
    Vikram

  3. Vikram Patil July 28, 2014 at 7:21 am - Reply

    Are the parameters passed to the the “Microsite”? else the users will get the wrong details on the form as “lead.firstname” etc in the input field on the form.

    Please let me know.

  4. ClickDimensions July 28, 2014 at 8:21 am - Reply

    No, microsites are not forms. They are just the HTML from your email templates. So they cannot be pre-populated.

  5. jamesd43 September 23, 2014 at 9:48 pm - Reply

    Does this feature work even when the form is embedded through the widget or an iframe?

  6. ClickDimensions September 24, 2014 at 6:15 pm - Reply

    Hi Jamesd43: You should be able to achieve similar results when the form is embedded in another page, rather than as a direct link. It might require a little tinkering with the javascript to reference the parameters in the URL.

  7. Greg Priestley September 13, 2016 at 4:48 am - Reply

    Does this work with embedding as a widget?

    The embed code for the form that we’re provided looks something like:

    var loc = “https://analytics-au.clickdimensions.com//pages/”;

    “>

    Where exactly do you append the parameters? I’ve tried a number of permutations but none work. My quick, non proficient, reading of the CDWidget.js is that you can’t append any parameters in – almost looks like you’ve have to hack the CDWidget.js to some custom version for it which obviously isn’t that desirable.

    What am I missing?

    Is there a way to do this?

  8. ClickDimensions September 13, 2016 at 3:26 pm - Reply

    Hi Greg, Please see the previous response. The script in this blog example won’t work with a widget, but you should be able to write similar javascript and place it in the code editor that will.

Leave A Comment