In this article, you can find examples of how to use JavaScript to prefill a form from different sources.
If you want to populate a form with data you already have or make a form more personalized, URL query parameters are the best option for that.
You can add query parameters manually or use placeholders(merge tags) to customize URL parameters in any automation platform, such as MailChimp, Power Automate, Zapier, etc. For instance, populate a form fields with the user’s contact details:
//use URL with parameters, for example:
//https://mydomain.plumsail.io/432d-9618-b81b32a4016b5?firstname=Jane&lastname=Doe&[email protected]
fd.rendered(function(){
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
fd.field('FirstName').value = urlParams.get('firstname');
fd.field('LastName').value = urlParams.get('lastname');
fd.field('Email').value = urlParams.get('email');
});
You can save data to the browser’s local storage for later use. For example, you can save some values while the user is working with one form and then autofill another form with data from the local storage using the code:
//store values in local storage like this:
localStorage.setItem('value1', 'Hello, world!');
localStorage.setItem('value2', fd.field('Text0').value);
//retrieve values from local storage
fd.rendered(function(){
var value1 = localStorage.getItem('value1');
var value2 = localStorage.getItem('value2');
if(value1){
fd.field('Text1').value = value1;
localStorage.removeItem('value1');
}
if(value2){
fd.field('Text2').value = value2;
localStorage.removeItem('value2');
}
});
You can also store all of the form’s data and populate form with same values when it’s opened again, like this:
//save form data before save
fd.beforeSave(function(){
localStorage.setItem('form-data', JSON.stringify(fd.data()));
});
//populate form data when form opens
fd.rendered(function(){
var data = JSON.parse(localStorage.getItem('form-data'));
if(data){
fd.data(data);
localStorage.removeItem('form-data');
}
});
You can make requests to an external API to retrieve values. You’ll need to make sure that you have the key if it’s needed and that you follow the instructions from the API developers. For instance, you can determine person’s location and IP with ipapi.co:
//make a request when the form opens
fd.rendered(function(){
$.getJSON('https://ipapi.co/json/', function (response) {
fd.field('Location').value = response.city + ', ' + response.region_code + ', ' + response.country_name;
fd.field('IP').value = response.ip;
});
});
You can populate a from fields and controls from any external data source: a web service or a public file:
//Populate Data Table from a public file
async function externalFile() {
const data = $.get('https://plumsail.com/assets/forms/data/source.json')
return data;
}
fd.rendered(function() {
externalFile().then(function(data){
fd.control('Control1').value = JSON.parse(data)
})
});