Build an HTML5 Form With on-Off Input Sliders Using jQuery

Mobile app interfaces have been utilizing on/off sliding switches for a while. These are most commonly found on the settings page where users can update preferences for their account. But web designers have taken notice and have built many open platforms to generate your own on/off switch sliders.

In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update. Plus, you have the option of triggering click or slide events, which may also tie into a form checkbox on the page. Anyone running a modern JavaScript-enabled browser should be able to experience the full effect. Take a peek at my live demo to catch a glimpse of what we are building.

22+ Million Digital Assets, With Unlimited Downloads

Get unlimited downloads of 19+ million design resources, themes, templates, photos, graphics and more. An Envato subscription starts at $16 per month, and is the best unlimited creative subscription we've ever seen.

Graphic Templates

Graphic Templates

Logos, Print & Mockups
 Fonts

Fonts

Sans Serif, Script & More
 Presentation Templates

Presentation Templates

PowerPoint & Keynote
 CMS Templates

CMS Templates

Shopify, Tumblr & More
 Web Templates

Web Templates

Landing Pages & Email
 Graphics

Graphics

Icons, Vectors & More

See More

Live Demo – Download Source Code

Getting Started

The first step is to download a copy of the jQuery Toggles plugin. You can grab this from the Github repo which also contains a small live example. I have already downloaded a local copy of jQuery into a relative /js folder. Move the file toggles.min.js into this folder as well.

Now for the CSS you’ll need to copy toggles.css along with the entire themes/ directory. This will include the main stylesheets which come bundled along with the plugin. Note that your toggles.css file should be located in the same directory as the themes/ folder to get everything working properly.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>On/Off jQuery Input Sliders - Live Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="https://designshack.net/favicon.ico">
  <link rel="icon" href="https://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/toggles.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/themes/toggles-soft.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/toggles.min.js"></script>
</head>

Also notice that I am referencing another theme file by the name toggles-soft.css. This allows me to apply a soft CSS class onto a container which will then affect all my internal toggle elements(as targeted by jQuery later on). Other theme choices include light, dark, iPhone, or modern, and you can see what they look like on the plugin’s homepage.

Now the form itself doesn’t have much out of the ordinary except for a switch slider. When we press submit, the form will trigger a jQuery function which stops the typical page refresh. Instead we output direct values of the fields down below the form to check how you might handle responses in your own web application.

Creating the Form

Inside my body content I’ve created a form element with the ID #basicform. This can be targeted using jQuery to better handle submission functionality. Also I’ve appended the class .toggle-soft which is my default choice of themes when designing this layout.

  <form id="basicform" method="post" action="#" class="toggle-soft">
    <div class="formrow clearfix">
      <label for="username">Username</label>
      <input type="text" name="username" id="username" tabindex="1" class="basetxt">
    </div>
    
    <div class="formrow clearfix">
      <label for="email">Email</label>
      <input type="email" name="email" id="email" tabindex="2" class="basetxt">
    </div>
    
    <div class="formrow clearfix">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" tabindex="3" class="basetxt">
    </div>
    
    <div class="formrow clearfix">
      <label for="emailupdatescheck">Email Updates?</label>
      <div id="emailupdates" class="toggle floatright"></div>
      <input type="checkbox" disabled="disabled" class="checkbx" id="emailupdatescheck">
    </div>
    
    <input type="submit" name="submit" class="submitbtn" value="Submit">
  </form>

If we skip down towards the bottom of the form you will notice a div with the ID #emailupdates. The on/off slider in my example will determine if a new user should be added onto the newsletter subscriber’s list. The additional class .toggle is how we target all the elements via jQuery. .floatright is just additional positioning rules to get the switch fitted nicely into the form.

Also notice the checkbox element underneath using the ID #emailupdatescheck. I have this disabled from use and hidden on the page using display: none; so that users are not confused. Thankfully we can still update the checkbox dynamically in jQuery by setting it as an option parameter.

Generating the Switch

Keep in mind there are a large number of additional parameters you may set on this function to customize the display. Check the example codes on Github for a full list. In my example we can update a good portion of the useful options which can impact user experience.

$(function(){
  $('.toggle').toggles({
    drag: false,
    text:{
      on:"YES",
      off:"NO"
    },
    checkbox:$('#emailupdatescheck'),
    width: 90,
    height: 30
  });

You will find this JS code at the bottom of the page right before the closing tag. The selector class .toggle works for any other toggle element added onto this page. It allows you to generate practically infinite on/off switches with less hassle – although you will need to create a new checkbox for each slider as well. The toggles() function gets called with internal parameters contained inside curly braces.

drag and click are two options which allow you to specify which type of interaction will change the value of the slider. My example sets drag to false meaning that you only need to click on the slider to change values. The text should be self-explanatory on how to update the inner display content. Remember to encapsulate these values inside another set of curly braces otherwise it won’t work.

The checkbox parameter is very useful so we can pass a real form element to be attached onto this slider. It will take any jQuery object selector and, in this case, I am targeting our hidden checkbox. Both values initially load in the OFF position and we can see how this value updates by displaying some output text.

Form Output Values

Once you hit the submit button you may notice a new block of code appears underneath. This will display the current text value of the username and password fields, along with a value for the slider checkbox. Let’s take a look at the final block of jQuery code:

 $('#basicform').submit(function(e){
    e.preventDefault();
    
    var emailtoggle = $('#emailupdatescheck');
    if(emailtoggle.prop("checked")) { var toggleval = 'on'; }
    else { var toggleval = 'off'; }
    
    var usernameval = $('#username').val();
    var emailval    = $('#email').val();
        
    var outputhtml = "{
username:"+usernameval+"
";
    var outputhtml = outputhtml+"email:"+emailval+"
";
    var outputhtml = outputhtml+"updates:"+toggleval+"
}";
    
    $('#codeoutput').html(outputhtml);
  });
});

Whenever a user submits the form we run e.preventDefault() to stop the submission. Then we determine if the hidden checkbox is currently checked or not. If yes, then the slider value is set to “on” (otherwise it is set to “off”). You could theoretically make these values anything you like as long as it makes sense. Also there are two other variables containing the username and email input values.

Finally I’ve put together a concatenated set of string variables which makes up my sample HTML. This gets appended onto the page in a div with the ID #codeoutput. It will not display anything at first but once there is some internal HTML it appears like monospaced code. This is merely one method to determine a slider’s value but it works great and even allows you to pass it into a backend script using Ajax.

Live Demo – Download Source Code

Final Thoughts

Not every form will require a checkbox or switch element. User profile settings pages are a common place to use these sliders. Other places may include online forums or social networks where users may switch between sharing and display options.

Ultimately this plugin is a fantastic choice for implementing quick & simple UI input sliders. Feel free to download a copy of my source code and try creating your own similar form design.