Because I love data, I've come to love forms too. One of my concerns when building a website is how to get people to fill out my forms, so that they will graciously give me their data.
From 2009 to 2011, the prevalence of smart phones more than doubled, expanding from 18% to 44% (Nielsen - The Mobile Media Report). Because of this explosion, many companies have been scrambling to transform their website to be mobile-ready. And for the forms in your website, there is an even more basic step than resizing that you can take to prepare your website for the mobile world.
Look at your fingers. Unless you are under the age of two, your fingers are poorly designed for checkboxes. Checkboxes are frustrating to check on your phone! You have to zoom in and be precise in your tapping. And when you're just trying to get a visitor to hit the very last "I accept these terms and conditions" box to complete their form, the last thing you want is to have them abandon ship out of frustration.
Luckily, it turns out that transforming checkboxes to buttons is actually a lot simpler than I originally thought.
A Simple Form
In this example, I'm going to build a form for a puppy hotel, where owners can share the puppy's name and breed, and select whether or not he/she wants to shell out the extra money for playtime.
app/views/puppies/_form.html.erb
Convert Your Checkbox to a Button
Have you ever noticed that clicking the checkbox label on a form checks the checkbox for you? This piece of information is enough to get us started.
First, hide your checkbox, by adding a style selector to it.
app/views/puppies/_form.html.erb
Next, update your stylesheet by choosing different color schemes for the 'unchecked' and 'checked' classes.
app/assets/stylesheets/puppies.css.scss
Finally, add the 'unchecked' class to your label to give your label an initial styling when the page first loads.
app/views/puppies/_form.html.erb
So now, you’ve hidden an ugly checkbox. The only problem is that we've just used the 'unchecked' class for styling, and the user doesn’t know if the checkbox (or now - button) has been selected or not. To fix this, we need to add some jQuery to implement toggle functionality.
Add Toggle Functionality to Your New Button
Because we want the button style to change when we click on the label, we need to add an id to our label, so we can reference it with jQuery.
app/views/puppies/_form.html.erb
Next, create a new javascript document, and add a bit of jQuery to toggle the class of the label when the checkbox is checked. In this case, we’re toggling the class ‘checked’. When the checkbox is unchecked, the label will just have the class we assigned previously: ‘unchecked’. When the checkbox is checked, another class will be added, so the label will have the class: ‘checked’.
app/views/assets/javascripts/puppies.js
And that’s it. Your form has replaced a menacing checkbox with a user-friendly toggle button!
