I love using Caldera Forms as it is one of the most comprehensive form solutions available for WordPress. I was working on a contact form where I wanted to offer the user multiple options to select from. Initially I used the toggle switches with “yes” and “no” for each option but decided I wanted a simpler solution to improve the user experience. So after experimenting with styling different form elements with CSS I finally found a snippet on Codepen that worked on styling checkboxes, which traditionally is difficult, and modified it to produce iOS style toggle switches, that not only has elegant styling but also makes selecting options easier for users on mobile devices. I’m sharing this hoping other WordPress users and designers can benefit from this snippet.

Disclosure: Some of the links in this post are affiliate links. This means if you click on the link and make a purchase I will receive an affiliate commission which in turn helps supporting me to continue building tutorials and resources.”

*** UPDATE: 6 November 2017

I picked up a little discrepancy in the original CSS when checkboxes were set to inline under Caldera forms. I’ve updated the CSS and the article so if you used the stylesheet from the original post please update to the latest.

⇐⇒

How to create iOS style toggle switches for Caldera Forms

In this tutorial we’ll create iOS style toggle switches for Caldera Forms.

  • Create a new form
  • Add options as checkboxes
  • Add CSS styling to your Divi/Extra theme
  • Colouring your iOS toggle switches.
  • Test your final layout

Create a new form

Log into your WordPress admin area and create new form with Caldera Forms, for the purpose of this tutorial I named my form
“iOS Toggle Tutorial”

Add options as checkboxes

Now drag and drop “Add Field” unto the existing block.

In the module that opens up click on “Select” in the left side menu and click on the “Set Field” button for a Checkbox.

Enter a Name for your field type, once again for the purpose of this tutorial I named it “iOS Toggle Tutorial”. Caldera Forms will automatically create a sanitized entry in the slug field for you. Scroll down and click on “Add Option” to create your first checkbox.

In the “Label” field enter a name of your choice for your label, e.g., “Checkbox One”. Add two more checkboxes and name them.

We’ve finished setting up our checkboxes, click on “Save Form” and after the “Updated Successfully” notice displayed click on “Preview Form”. Depending on your theme’s styling your form should look similar to this.

We’re done with setting up the form, time to move on to styling.

Add CSS styling to your Divi/Extra theme

First we need to “shape” the text box to look like a slider toggle switch. Copy the code below and go to your Divi or Extra theme options and paste it into the “Add Custom CSS” field.


/**
 * @author: Theuns Coetzee
 * @URL: https://theunscoetzee.com
 * @version: 1.0
 * @license: GPLv3;
 * 
 * @credits: Adapted from Leonard Meagher's pen https://codepen.io/LeonardMeagher2/pen/NvOLZr
 */

.caldera-grid .checkbox-toggle-switch .checkbox {
  padding-bottom: 5px;
}

  /* OPTIONS: Set the width and height to your needs */
  .caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 60px;
  height: 30px;
  border: 1px solid #c0c0c0;
  border-radius: 100em;
  background: #eeeeee;
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  transition: background 0.3s;
  box-sizing: border-box;
}

/* OPTIONS: Set the width and height. IMPORTANT: Make sure it's the same as in the selector above this one. */
.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 30px;
  height: 30px;
  background: white;
  border: 1px solid #c0c0c0;
  border-radius: 100em;
  transition: left 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

  /* Toggle switch's background when checked */
.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:checked {
  background: #d5d5d5;
  border-color: #888888;
}

  /* Toggle switch's button position and background when checked */
.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:checked:after {
  left: 30px; /* This distance should be equal to your width specified at the top */
  border-color: #888888;
  background: #ffffff;
}

  /* Set cursor to pointer */
.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:hover:not(:disabled) {
  cursor: pointer;
}

.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:hover:not(:checked):not(:disabled):after, .caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:focus:not(:checked):not(:disabled):after {
  top: -1px;
  left: -1px;
}

.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:hover:checked:not(:disabled):after, .caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:focus:checked:not(:disabled):after {
  left: 30px; /* This distance should be equal to your width specified at the top */
}

.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:disabled {
  opacity: 0.5;
}

.caldera-grid .checkbox-toggle-switch .checkbox input[type="checkbox"]:focus {
  outline: none !important;
}

/* Add iOS toggle switch styling when using "inline" checkboxes */



Now save to update your theme settings and go back to Caldera Forms and open your form again. Add “checkbox-toggle-switch”,
without the exclamation marks, to the Custom CSS Class field.

Save and Preview Form.

Colouring your iOS toggle switches.

Now that we have the checkboxes looking like iOS toggle switches/sliders, we want the add a touch of colour to give it an
authentic look. Copy this code section and add it below the previous custom CSS in your Divi or Extra theme options.


/* Color slider green on select */
.caldera-grid .checkbox-toggle-switch.green .checkbox input[type="checkbox"]:checked, .caldera-grid .checkbox-toggle-switch.green .checkbox-inline input[type="checkbox"]:checked {
  background: #adebad;
  border-color: limegreen;
}

/* Change button border color to green on select */
.caldera-grid .checkbox-toggle-switch.green .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.green .checkbox-inline input[type="checkbox"]:checked:after {
  border-color: limegreen;
}

Return to your form’s edit console and add the class “green”.

Save and Preview

VOILA!

Test your final layout

You can now add any additional form fields and a submit button to your form. Save and test. If you find the buttons are stacked to close to each other on mobile devices I have one more CSS snippet to help change the spacing for mobile browsers.


/* OPTION: Space toggle switches further appart for mobile devices*/
@media screen and (max-width: 779px) {
  .caldera-grid .checkbox-toggle-switch .checkbox, .caldera-grid .checkbox-toggle-switch .checkbox-inline {
    padding-bottom: 15px !important;
  }
  /* Align inline checkboxes below each other on mobile devices */
  .caldera-grid .checkbox-toggle-switch label.checkbox-inline {
    margin-left: 0 !important;
    display: block;
  }
}

Here’s a final example to give you use case scenario. If for instance you have a pizzeria with forms where people can order
this would be a great micro-interaction for the selection process.

Demo

iOS style toggle switches for Caldera Forms

Pizza Extras

You now have an easy-to-use additional styling that hopefully will improve your user experience when having to fill out forms. Don’t forget to
subscribe to my newsletter as I’ll be following this up with additional Caldera Form styling tutorials soon.

I’ve added Material style toggle switches if you’re interested 🙂