How to Auto-Fill Form Fields for Returning Visitors

If leads visit more than one of your pages, this script saves the answers they submit in their browser's local storage and fills them in on your other forms, so they don't enter the same details twice.

You could also adapt the script for progressive profiling, where you ask for more information over time. To do this, use one form with all fields, then use JavaScript to hide the fields a visitor has already answered.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing JavaScript.

Add the script to your pages

Add the following script with placement set to Before Body End Tag on every page where you want auto-fill to work, or add it across your domain with Script Manager. You don't need to edit the code.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    // ##################
    // UNBOUNCE AUTO FILL
    // Do not remove this section; it allows our team to troubleshoot and track feature adoption.
    // TS:0002-05-055
    // ##################
    ls_prepend = "UB_AF_";
    retrieveFormData();
    // On click of form button / on form submit, save all available data to local storage
    $(".lp-pom-form .lp-pom-button").click(function(){
    	saveFormData();
    });
    function saveFormData() {
    	// save text fields
    	$(".lp-pom-form input[type='text']").each(function(i, obj) {
    		fieldValue = obj.value;
    		fieldID = obj.getAttribute("id");
    		localStorage[ls_prepend+fieldID] = fieldValue;
    	});
    	// save select fields
    	$(".lp-pom-form select").each(function(i, obj) {
    		fieldValue = obj.value;
    		fieldID = obj.getAttribute("id");
    		localStorage[ls_prepend+fieldID] = fieldValue;
    	});
    	// save checkbox fields
    	$(".lp-pom-form input[type='checkbox']").each(function(i, obj) {
    		fieldValue = obj.checked;
    		fieldID = obj.getAttribute("id");
    		localStorage[ls_prepend+fieldID] = fieldValue;
    	});
    	// save radio fields
    	$(".lp-pom-form input[type='radio']:checked").each(function(i, obj) {
    		fieldValue = "true";
    		fieldID = obj.getAttribute("id");
    		localStorage[ls_prepend+fieldID] = fieldValue;
    	});
    	$(".lp-pom-form input[type='radio']:not(:checked)").each(function(i, obj) {
    		fieldValue = "false";
    		fieldID = obj.getAttribute("id");
    		localStorage[ls_prepend+fieldID] = fieldValue;
    	});
    }
    function retrieveFormData() {
    	// look for and populate text fields
    	$(".lp-pom-form input[type='text']").each(function(i, obj) {
    		fieldID = obj.getAttribute("id");
    		fieldSavedValue = localStorage[ls_prepend+fieldID];
    		if(fieldSavedValue != undefined && fieldSavedValue != "" && fieldSavedValue != null) {
    			obj.value = fieldSavedValue;
    		}
    	});
    	// look for and populate select fields
    	$(".lp-pom-form select").each(function(i, obj) {
    		fieldID = obj.getAttribute("id");
    		fieldSavedValue = localStorage[ls_prepend+fieldID];
    		if(fieldSavedValue != undefined && fieldSavedValue != "" && fieldSavedValue != null) {
    			$(".lp-pom-form #" + fieldID + " option[value='" + fieldSavedValue + "']").attr('selected', true);
    		}
    	});
    	// look for and populate checkbox fields
    	$(".lp-pom-form input[type='checkbox']").each(function(i, obj) {
    		fieldID = obj.getAttribute("id");
    		fieldSavedValue = "";
    		fieldSavedValue = localStorage[ls_prepend+fieldID];
    		if(fieldSavedValue != undefined && fieldSavedValue != "" && fieldSavedValue != null && fieldSavedValue != "false") {
    			obj.checked = fieldSavedValue;
    		}
    	});
    	// look for and populate radio button fields
    	$(".lp-pom-form input[type='radio']").each(function(i, obj) {
    		// fieldValue = obj.value;
    		fieldID = obj.getAttribute("id");
    		fieldSavedValue = localStorage[ls_prepend+fieldID];
    		if(fieldSavedValue == true || fieldSavedValue == "true") {
    			$("#"+fieldID).prop('checked',true);
    		}
    	});
    }
    </script>

How it works

• When a visitor submits a form, the script saves the value of each field to local storage under the name UB_AF_ followed by the field ID, for example UB_AF_email.
• When a page loads, the script looks in local storage for each field ID and fills in any saved value.

Limitations

• It only works within a single domain. For example, data entered on try.yoursite.com isn't filled in on get.yoursite.com.
• It only works in the same browser. A visitor who fills in your form on their phone won't see their details filled in on their laptop.

If email fields aren't saved

Classic Builder email fields use type="email", which the original script doesn't cover. A community member shared the following loops to add to the script. Add this one to the save function:

	$(".lp-pom-form input[type='email']").each(function(i, obj) {
	fieldValue = obj.value;
	fieldID = obj.getAttribute("id");
	localStorage[ls_prepend+fieldID] = fieldValue;
	console.log(fieldID + ": " + fieldValue);
});

Add this one to the function that fills in the fields:

	$(".lp-pom-form input[type='email']").each(function(i, obj) {
	fieldID = obj.getAttribute("id");
	fieldSavedValue = localStorage[ls_prepend+fieldID];
	if(fieldSavedValue != undefined && fieldSavedValue != "" && fieldSavedValue != null) {
		obj.value = fieldSavedValue;
		console.log("Filled " + fieldID);
	}
});