Contact forms are supposed to make it easy for users to ask a question or just get in touch.
These days, with all the captcha and anti-spam methods attached, the chances of a form being filled in incorrectly and not being sent is highly likely. The number of people using mobile devices who might loose a connection and thus, information already entered is also rising. Hell, even clicking the wrong button and going to a different page will usually wipe all the information that has been entered into a form and make you have to re-enter it, or worse, not bother and give up.
So what can we do to make forms more user friendly? Localstrorage to the rescue!
If you check out the contact form on this site a little closer than usual you will see some interesting things happening.
I will assume that you are using Chrome browser and have developer tools open. Click on the 'Resources' tab and then open the contact form. Expand the local storage node and then start typing in the form fields. You should see something like the image below.
what you are seeing here is local storage fields being filled as you type.
The clever part is where we use that information to repopulate the fields if anything bad happens. That basically means loading up the stored information whenever the page is loaded and clearing it when the form has sent successfully.
Try it now. Add some text to the contact form fields then either browse to a different page or delete the tab completely then come back to the site and open up the form again to see your inputted text still in place.
So how is it done?
We first need to create a variable for each form input that we want to save and assign it to a localstorage item (wrapping in a function that we can call when we want) like this:
function savedata(){
var storName = $("#inputName").val();
var storEmail = $("#inputEmail").val();
var storMessage = $("#inputMessage").val();
localStorage.setItem('name', storName);
localStorage.setItem('email', storEmail);
localStorage.setItem('message', storMessage);
} So here I have created variables from the values of the form inputs and assigned them to the local storage items named 'name', 'email' and 'message'.
Next we need to tell the browser when to save this information. You could do it on a time basis using setInterval but I chose to save whenever anything is entered into the fields so nothing will be lost. To do this takes a little bit more than just an onchange event. To cover all the bases I ended up using this.
$("#inputName,#inputEmail,#inputMessage").on('change keypress paste focus textInput input',savedata); So, using the inputs in question as selectors and lumping together all the actions I can call the savedata function to store the in-putted values.
Next we need a function to get that info back should we need it.
function retrievedata(){
var storName = localStorage.getItem("name");
var storEmail = localStorage.getItem("email");
var storMessage = localStorage.getItem("message");
$("#inputName").val(storName);
$("#inputEmail").val(storEmail);
$("#inputMessage").val(storMessage);
} This basically takes the stored values and inserts them into the correct fields. After this I added a direct call to the retrievedata function so it runs on pageload.
retrievedata();
That's the basics. Information will stored when typed. The stored info will be inserted into the fields on pageload if it exists. All that is left is to clear the stored data when the form is sent successfully. This depends on how you are submitting your form. This one is using ajax, so when I get a successful callback I clear the storage like this.
localStorage.removeItem('name');
localStorage.removeItem('email');
localStorage.removeItem('message'); And that is it. No need for sticky php forms, let local storage do the work.