I’ve decided to do another design style for Caldera Form’s checkboxes. The iOS style toggle switch for Caldera Forms might not necessarily suit your site’s design style, so as an equally beautiful alternative we can use Material style toggle buttons. This tutorial will be part of a series of styling tutorials for Caldera Forms. If you would like to a specific form element for Caldera Forms styled let me know in the comment section of this article and I’ll see if I can include it in this series.
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.
In this tutorial we’ll create Material style toggle switches for Caldera Forms.

How to create Material style toggle switches for Caldera Forms

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

Creating your form
Log into your WordPress admin area and create new form with Caldera Forms, name your form, e.g “Material Toggle Tutorial”.
I’m reusing the form setup section from the iOS toggle switch tutorial, as you’ll notice in the form name.
 

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 “Material 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 Leanard Meagher's pen https://codepen.io/LeonardMeagher2/pen/NvOLZr
 */

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

/* OPTIONS: Set the width and height to your needs */
  .caldera-grid .checkbox-toggle-switch.material .checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 60px;
    height: 24px;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background: #f1f1f1;
    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.material .checkbox input[type="checkbox"]:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 24px;
    height: 24px;
    background: white;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    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.material .checkbox input[type="checkbox"]:checked {
    background: #d7d7d7;
    border-color: #8b8b8b;
  }

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

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

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

  .caldera-grid .checkbox-toggle-switch.material .checkbox input[type="checkbox"]:hover:checked:not(:disabled):after, .caldera-grid .checkbox-toggle-switch.material .checkbox input[type="checkbox"]:focus:checked:not(:disabled):after {
    left: 36px;
  }
  
  .caldera-grid .checkbox-toggle-switch.material .checkbox input[type="checkbox"]:disabled {
    opacity: 0.5;
  }
  
  .caldera-grid .checkbox-toggle-switch.material .checkbox input[type="checkbox"]:focus {
    outline: none !important;
  }

/* Set Material Styling for when checkboxes are set as "inline" */

  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 60px;
    height: 24px;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background: #eeeeee;
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    transition: background 0.3s;
    box-sizing: border-box;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 24px;
    height: 24px;
    background: white;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    transition: left 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:checked {
    background: #d5d5d5;
    border-color: #888888;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:checked:after {
    left: 36px;
    border-color: #888888;
    background: #ffffff;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:hover:not(:disabled) {
    cursor: pointer;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:hover:not(:checked):not(:disabled):after, .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:focus:not(:checked):not(:disabled):after {
    top: -1px;
    left: -1px;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:hover:checked:not(:disabled):after, .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:focus:checked:not(:disabled):after {
    left: 36px;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:disabled {
    opacity: 0.5;
  }
  
  .checkbox-toggle-switch.material .checkbox-inline input[type="checkbox"]:focus {
    outline: none !important;
  }
  

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

Save and Preview Form.

Colouring your Material toggle switches.

Now that we have the checkboxes looking like Material toggle switches/sliders, we want the add a touch of colour to give it an authentic look. For the Material toggle switches I’ve added extra colors and additionally snippets to flip the color of the toggle switch button to give it an authentic “Material” look and feel. 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 !important;
    border-color: limegreen !important;
  }

/* 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 !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.blue .checkbox input[type="checkbox"]:checked, .caldera-grid .checkbox-toggle-switch.blue .checkbox-inline input[type="checkbox"]:checked {
    background: #b7dbff !important;
    border-color: dodgerblue !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.blue .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.blue .checkbox-inline input[type="checkbox"]:checked:after {
    border-color: dodgerblue !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.yellow .checkbox input[type="checkbox"]:checked, .caldera-grid .checkbox-toggle-switch.yellow .checkbox-inline input[type="checkbox"]:checked {
    background: #ffef99 !important;
    border-color: gold !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.yellow .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.yellow .checkbox-inline input[type="checkbox"]:checked:after {
    border-color: gold !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.orange .checkbox input[type="checkbox"]:checked, .caldera-grid .checkbox-toggle-switch.orange .checkbox-inline input[type="checkbox"]:checked {
    background: #ffb599 !important;
    border-color: orangered !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.orange .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.orange .checkbox-inline input[type="checkbox"]:checked:after {
    border-color: orangered !important;
  }

/* Change the toggle button color with a "btn-{#color}" class */
  .caldera-grid .checkbox-toggle-switch.btn-green .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.btn-green .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: limegreen !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.btn-blue .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.btn-blue .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: dodgerblue !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.btn-yellow .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.btn-yellow .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: gold !important;
  }
  
  .caldera-grid .checkbox-toggle-switch.btn-orange .checkbox input[type="checkbox"]:checked:after, .caldera-grid .checkbox-toggle-switch.btn-orange .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: orangered !important;
  }
/* *********************************************************************** */
/* Change button border color to green on select */
.caldera-grid .checkbox-toggle-switch.green .checkbox input[type="checkbox"]:checked:after {
  border-color: limegreen;
}

Return to your form’s edit console and add the class “blue” and “btn-blue”.

Your Material Toggle Switches

Now you have beautifully styled material switches with custom colors.

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 apart for mobile devices*/
@media screen and (max-width: 779px) {
  .caldera-grid .checkbox-toggle-switch.material .checkbox {
    padding-bottom: 15px;
  }
}

Demo

Material style toggle switches for Caldera Forms

Pizza Extras

That’s that for the Material Toggle Switch tutorial.
Don’t forget to leave a comment if you want a tutorial on styling a specific form element and also subscribe to my newsletter so you know as soon a  new tutorial is published.