Contact Form 7 toggle buttons

You don’t need any fancy plugins to turn your checkboxes or radiobuttons into actual buttons. Just good old CF7 with some basic CSS will do.


    Styled buttons

    What's your gender (radio buttons)

    What are your favorite fruits (checkboxes)

    Without syle

    What's your eye color

    What are your favorite colors (checkboxes)

    Press "Send" for a preview of the email message


    Simply create your form like this:

    <p>What's your gender (radiobuttons)</p>
    [radio your-gender use_label_element class:togglebuttons "Male" "Female" "Other"]
    
    <p>What are your favorite fruits (checkboxes)</p>
    [checkbox your-fruits use_label_element class:togglebuttons "Apple" "Banana" "Orange"]
    
    [submit]

    It’s very important to include: use_label_element and class:togglebuttons.

    Then add these CSS style rules to your theme (or via the Customizer):

    .togglebuttons .wpcf7-list-item {
      margin: 0 2px 0 0;
      display: inline-block;
    }
    .togglebuttons > span input {
      opacity: 0;
      position: absolute;
    }
    
    .togglebuttons > span .wpcf7-list-item-label {
      cursor: pointer;
      display: block;
      color: #333;
      border-radius: 2px;
      background: #ffffff;
      padding: 2px 8px;
      background: #efefef;
      box-shadow: 0 1px 1px rgba(0,0,0,.2);
      border: 1px solid #e0e0e0;
    }
    
    .togglebuttons > span input:checked + .wpcf7-list-item-label {
      background: #0193c2;
      border: 1px solid #0193c2;
      color: #ffffff;
      font-weight: bold;
    }

    Extra: tabs

    Did you notice how these toggle buttons feel a bit like tab-controls? Well, with Conditional Fields for Contact Form 7, you can easily create a tab-like experience like this:

    [radio choose-tab use_label_element class:togglebuttons default:1 "Tab 1" "Tab 2" "Tab 3"]
    [group tab-1 class:tab]
      <!-- Content of tab 1 -->
    [/group]
    [group tab-2 class:tab]
      <!-- Content of tab 2 -->
    [/group]
    [group tab-3 class:tab]
      <!-- Content of tab 3 -->
    [/group]

      Welcome to tab one

      ...

      Welcome to tab two

      ...

      Welcome to tab three

      ...