Prefill & Prepopulate Jotform Fields Dynamically
Do you need to prefill (or prepopulate) fields to a Jotform form? In this blog post, I’ll go through the technical principles of prefilling Jotform fields. So whether you need to prefill the email, name, phone number, or something complex like Google Click ID (GCLID) for Google Ads Offline conversions, you’ll have an idea of how to do that.
Intro – Hire me to code this for you
Need help with prepopulating your Jotforms fields? Do you hate JavaScript coding? You can hire me as a freelancer to handle Jotform field prefilling for you. I’m quick, available via WhatsApp, and invoice using a simple payment link you can use with your credit card. I’ll even provide a nice receipt for accounting. It’s really as simple as sending a few emails or WhatsApp messages. You don’t have to read any more tutorials, you can just let me handle everything for you. You work so hard, you deserve a little break!
Please keep this offer in mind as we dig deeper into technical parts of prefilling Jotform fields 🙂 If you get anxious, just hit me up.
Don’t forget conversion tracking for Jotforms
If you use Jotform, in addition to prepopulating your forms, you also need normal conversion tracking for your Jotforms, to send conversions to Google Analytics, Google Ads and Facebook Pixel when users submit your Jotforms. So read my blog post about Jotform Conversion Tracking for Google Analytics, Ads & Meta
You can also hire me to implement conversion tracking for Jotforms. @hire
Why prefill Jotform fields?
There are a million reasons why you may want to prefill / prepopulate fields into your Jotform form. Perhaps you already know something like the email address and want to save your visitors the trouble. Perhaps you use multiple Jotform forms and want to pass on a field from one Jotform to another, prepopulating the same email they filled before. Or perhaps you want to have a hidden Jotform field to pass along extra information, like the Google Click ID GCLID for Google Ads offline conversions, or the referrer – from which website they arrived to your website so you don’t need an annoying “Where did you hear about us?” -field.
How to prefill Jotform fields?
For normal forms on a website like a <form> tag, we prepopulate them usually using Javascript. As a normal form like a WordPress or Squarespace form is part of the website flow, we have full access to edit it with Javascript, including filling, prepopulating or prefilling form fields.
Jotform however, is not a <form> element we could edit. Jotform is either
An <iFrame> element, which is kind of like a window to another website, has been added to our website. It may look like a seamless part of our website if the colours and fonts match, but it’s in fact a different website (mywebsite.com, with a different website like form.jotform.com/my-form inside it).
Or the Jotform is not embedded inside our website, we use a link so it’s living inside jotform.com, for example, form.jotform.com/my-form
In both of those cases, we do not have access to edit the HTML contents of the form directly. We cannot use javascript to get a form field ID and tell Google Chrome: “Hey Chrome, please add tom@me.com as the email for this form please”. We simply cannot edit it as we do not have access to jotform.com code, just like we cannot edit the contents of google.com or facebook.com.
The way we are able to prefill / prepopulate Jotform form fields is using the URL. So the basic way we can prepopulate / prefill the Jotform happens in two steps:
Get the field “unique name” of the Jotform field you want to prepopulate
Add it to the Jotform URL, after a question mark (?), then add the equal sign = and the desired value.
Step 1 - get the Jotform field unique name
Step 3 - add the Jotform unique name to the URL to prefill that specific field with our desired value
Jotform prepopulation formula
form.jotform.com/yourform?email=example@me.com
This will work for all Jotform fields and will prepopulate dropdowns, text fields, radio selects etc. The URL prefilling will work if you have Jotform embedded in your website, or if you link directly to it.
How to prepopulate Jotform when embedded?
iFrame embedded Jotforms
When you go to Jotform -> Publish -> Embed -> iFrame, you get a code that looks like this. It has two parts, <iframe> and <script>
<iframe
id="JotFormIFrame-231734225881356"
title="Contact"
onload="window.parent.scrollTo(0,0)"
allowtransparency="true"
allowfullscreen="true"
allow="geolocation; microphone; camera"
src="https://form.jotform.com/231734225881356"
frameborder="0"
style="min-width:100%;max-width:100%;height:539px;border:none;"
scrolling="no"
>
</iframe>
<script type="text/javascript">
var ifr = document.getElementById("JotFormIFrame-231734225881356");
if (ifr) {
var src = ifr.src;
var iframeParams = [];
if (window.location.href && window.location.href.indexOf("?") > -1) {
iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));
}
if (src && src.indexOf("?") > -1) {
iframeParam...If you edit the iframe src attribute, change it from
https://form.jotform.com/231734225881356
to
https://form.jotform.com/231734225881356?email=john@connor.com
…for example. It will be prepopulated while the Jotform is embedded in your website.
Javascript, source code and other Jotform embed prefilling
The same method will work for javascript embed, source code embed etc. You just edit the URL and add your parameters.
Prefill / Prepopulate Jotform with static data
Prefilling Jotforms with static data is pretty easy. Even if you don’t know any coding you can do this. Static prepopulation means that what we fill is the same for every visitor. Each visitor will have the same value prefilled to their forms. It’s not “smart”.
If you for example advertise a travel service like a tourist visa, and you have a Jotform field for “destination country”, you can create two landing pages: example.com/thailand-tourist-visa and example.com/japan-tourist-visa. You can make ads for both.
You can then add your Jotform form with prefilled like
form.jotform.com/1234567?destinationcountry=Thailand
However, this is often not enough. Most people want to prepopulate / prefill their Jotform using dynamic data, or data unique to the specific visitor, like their email address, name or their GCLID (Google Click ID). Let’s take a look at how that would work.
Prefill / Prepopulate Jotform using dynamic data
If we want to use dynamic data like the email address, name etc. it prefilling Jotform data gets much more complicated. But these are the basic steps regardless of what fields you want to prefill, and with what:
First, we must have our data we want to prefill, available in Javascript format. So it must be a variable, array, object, cookie or URL parameter we can access.
Instead of embedding the iFrame or other Jotform in your website (or linking to the Jotform if it’s outside our website) we must generate it dynamically with javascript.
Example of dynamically creating our Jotform
If our normal Jotform embed code looks like this
<iframe id="JotFormIFrame-231734225881356" title="Contact" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/231734225881356" frameborder="0" style="min-width:100%;max-width:100%;height:539px;border:none;" scrolling="no" > </iframe>
<script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-231734225881356"); if (ifr) { var src = ifr.src; var iframeParams = []; if (window.location.href &&....Our dynamic version would use a <div> instead of an iFrame
<div
id="JotFormIFrame-231734225881356"
class="jotform-iframe-container"
data-title="Contact"
data-style="min-width:100%; max-width:100%; height:539px; border:none;"
data-src="https://form.jotform.com/231734225881356"
allowtransparency="true"
allowfullscreen="true"
allow="geolocation; microphone; camera"
frameborder="0"
scrolling="no"
></div>❗ Notice that iFrame has turned into a div AND the some parameters from src to data-src and so on.
We would have a javascript snippet after it that turns the div into an iFrame
document.addEventListener("DOMContentLoaded", function () {
console.log("DOMContentLoaded");
let containers = document.querySelectorAll('div[id^="JotFormIFrame-"]');
// 👇👇👇 Your custom prepopulation parameters here
let customParameters = "email=test@test.com&country=Thailand";
containers.forEach(container => {
console.log("Processing container");
let id = container.getAttribute('id');
console.log("Container ID: ", id);
let src = container.getAttribute('data-src') + "?" + customParameters;
console.log("JotForm full URL will be: ", src);
// Creating a new iframe and replacing the placeholder div with it
let iframe = document.createElement('iframe');
iframe.id = id;
iframe.src = src;
iframe.title = container.getAttribute('data-title');
iframe.style = container.getAttribute('data-style');
iframe.allowtransparency = container.getAttribute('allowtransparency');
iframe.allowfullscreen = container.getAttribute('allowfullscreen');
iframe.allow = container.getAttribute('allow');
iframe.frameborder = container.getAttribute('frameborder');
iframe.scrolling = container.getAttribute('scrolling');
container.parentNode.replaceChild(iframe, container);
// Initializing JotForm JavaScript logic for each iframe
initializeJotFormJS(id);
});
});
Demo of prefilled Jotform
See the Pen Prepopulate and Prefill Jotform - create Jotform Dynamicically with Javascript by Code + Tonic (@CodeAndTonicHQ) on CodePen.
Quite often our source data we will prefill is many things, like the Google Click ID (GCLID) which is first a URL parameter example.com?gclid=Cj0KCQiAgP6PBhDmARIsAPWM…
Then it’s a cookie
And then it’s a javascript variable we use to populate our Jotform.
Prepopulate GCLID to Jotform
The Google Click ID is a way for Google to know which Google Ad brought the visitor to our website.
Google Ads Online Conversion vs Offline Conversion
Online conversion happens online. It’s a purchase, form submission, booking, click, download. But if our Jotform is only the first part of getting a lead, who may or may not convert later on, we need offline conversion tracking. Example
Visitor clicks on a Google ad for a physiotherapist
They fill the lead form, our Jotform and tell about their problems.
They become a client and purchase 5 sessions for $1500.
We sent the GCLID Google Click ID along the Jotform form submission, in a hidden field by prefilling the Jotform iFrame dynamically
We can now tell Google ads: “Hey, a visitor with GCLID of 123456789 converted in the offline world (IRL) for $1500.
We can now see our Google Ad campaign for “Back Pain” focusing on San Francisco area, works great and brings in not just visitors or form submits, but actual clients.
So how would we achieve something like this? Below is not a full code you can copy-paste, but the general idea. If you need help setting this up, dont’ hesitate to get in touch.
Create a hidden field in Jotform. Use a unique name of GCLID
Add Google Tag Manager to your website
Add the Conversion Linker Tag. This will get the GCLID from your URL and store it as a cookie called _gcl_aw.
Use Javascript to get the value of the _gcl_aw cookie.
Hidden field
Javascript demo code to get GCLID from Cookie
<!--get the Google Click Id from cookie created by Conversion Linker Tag-->
<script>
let gclidCookie = document.cookie.split('; ').find(row => row.startsWith('_gcl_aw='));
let gclidValue = gclidCookie ? gclidCookie.split('=')[1] : 'Cookie not found';
console.log(gclidValue);
</script>You can now use the GCLID value to dynamically generate a Jotform iFrame embed.
Jotform - prefill from another form
Want to prefill Jotform from another form? You can prepopulate a Jotform fields based on what a user filled to another Jotform. For example, if they put in email john@demo.com, you can get the value, and prepopulate second Jotform to have the email prefilled with john@demo.com.
Do do this you can use the Settings -> Thank You page to redirect your users to the second Jotform, and prepopulate it using the values from your first form, and prepopulating / prefilling the URL parameters for your second form. For example
Need help prefilling & prepopulating a Jotform? Let me do it for you.
Get in touch via my contact page. You are only a few emails or WhatsApp messages away from having it be done.