Pre-fill fields for jotform cards while doing smart embed

Prefill the fields for jotform cards, while smart embed. Extremely helpful to work with utm parameters jotform cards with pure javascript. jot form cards

While we smart embed, the cards as of today, there is no direct method to pre-fill a hidden field (or normal fields)

Think about a scenario, where we want to capture utm_source from url

Let us do a case study

A smart embed button code will look something like the below

<script src="https://form.jotform.me/cardforms/feedbackEmbedButton.min.js"></script> 
<script> 
new JF_FeedbackEmbedButton({ buttonText: "Get a Quote", buttonFontColor: "#FFFFFF", buttonBackgroundColor: "#363636", buttonSide: "Bottom", buttonAlign: "Right", buttonIcon: "envelope", formId: xxxxxxxxxxxx}); 
</script>

if we try to change the form id with appended query parameters, the fields are not getting pre-filled.

The solution is

Read the query parameter

Rebuild the iframe src where we will append query parameters

Let us see it working

function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var appendParam = '?utm_source='+getParameterByName('utm_source')+'&utm_medium='+getParameterByName('utm_medium')+'&utm_campaign='+getParameterByName('utm_campaign');

<script src="https://form.jotform.me/cardforms/feedbackEmbedButton.min.js"></script> 
<script> 
new JF_FeedbackEmbedButton({ buttonText: "Get a Quote", buttonFontColor: "#FFFFFF", buttonBackgroundColor: "#363636", buttonSide: "Bottom", buttonAlign: "Right", buttonIcon: "envelope", formId: ('xxxxxxxxxxx'+appendParam)}); 
</script>

If you need more clarity, please fill out the comment.

Read more about jot form cards here.

Leave a Reply