Toggle switch in wordpress contact form 7

Question

I would like to create a toggle switch looking like the image attached.

It needs to be integrated with contact form 7 as a field of choice. I want a visitor to choose (in this example) for "ik ben op zoek naar werk" or "ik ben op zoek naar talent" and send the result in the contact form email combined with their details. Creating the text field for the names is no problem. But making the toggle switch is.

I'm only able to make checkboxes or radio buttons. But i dont know how to change the design/css to make it look like a toggle switch. Now it lookes like this: before and after

I think i need to change the css code of the checkbox or radio button to make it look like a toggle switch

I found this page where the design is there but it doesnt "send" the result "left or right" https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

Answer 1

To achieve the desired result you need to add a class (togglebuttons) to the checkbox like this [checkbox checkbox-932 class:togglebuttons use_label_element ""].

then you will add the CSS to the child theme

    .togglebuttons .wpcf7-list-item {
  margin: 0 2px 0 0;
  display: inline-block;
}

.togglebuttons > span input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.togglebuttons > span .wpcf7-list-item-label {
  cursor: pointer;
  display: inline-block; 
  color: #333;
  border-radius: 30px; 
  background: #efefef;
  padding: 15px 30px; 
  position: relative; /
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  /*border: 1px solid #e0e0e0;*/
  transition: background 0.3s, border 0.3s, color 0.3s;
}

.togglebuttons > span input[type="checkbox"]:checked + .wpcf7-list-item-label {
  background: #27396A; 
  color: #ffffff;
}


.togglebuttons > span input[type="checkbox"] + .wpcf7-list-item-label::before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px; 
  background: #ffffff; 
  border-radius: 50%; 
  top: 50%;
  left: 25%; 
  transform: translate(-50%, -50%);
  transition: left 0.3s; 
}


.togglebuttons > span input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  content: '';
  display: block;
  position: absolute;
  width: 20px; 
  height: 20px; 
  background: #ffffff; 
  border-radius: 50%; 
  top: 50%;
  left: 75%; 
  transform: translate(-50%, -50%);
  transition: left 0.3s; 
}

if you have a problem with the checkbox field, you can add a word "Yes". For example. [checkbox* checkbox-932 class:togglebuttons use_label_element "Yes"] and then you can hide it with jquery

function footer_scripts() {
    ?>
    <script>
        jQuery(document).ready(function($){
            $('.wpcf7-list-item-label').text(''); 
        });
    </script>
    <?php
}

add_action('wp_footer', 'footer_scripts');