What happens if a visitor is in the middle of filling out your form but they get called away? Or maybe they accidentally close the tab or hit that refresh button? Forms are tedious at best, having to fill out the same field more than once is downright torture for some people.
What if there was a way to save a users responses while they were filling out the form, so they could leave and come back without losing their progress? That would be pretty great hey? Especially if you’ve got a long form or have multiple steps involved. Well local storage and Garlic.js to the rescue!
Capture Abandoned Form Submissions in Unbounce
Using the garlic.js library we can save partial answers to form fields in the browsers local storage and prefill the form fields if the page is abandoned and a user comes back.
You can see this in action (built in Unbounce) here:
http://unbouncepages.com/save-partial-form-data/
How to Install in Unbounce
Click Here for Instructions
🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.
One Step Installation
This is an easy one. Just a single step 😎
Paste this code into the javascripts tab and set the placement to Before Body End Tag:
https://gist.github.com/RobertCam/a1369f4e787d54abfe1a8583e8142291
That’s literally it!
🚀 Pro Tip If you want to use it on all your pages place it using Script Manager.
Optional: Set some limits!
Garlic.js gives you some options on how long to save the data in local storage and under what conditions. By default I’ve set the script to never delete the data from local storage.
Have a gander here to see a list of those options - http://garlicjs.org/
Change this line in the code to reflect the option you’d like to use. Heads up: This will likely require some javascript knowledge.
$("form").attr("data-destroy", "false");
Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀
Want to take your Unbounce landing pages + Convertables
to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks