Buy me a coffee

How to make side by side checkbox

Suppose you have a form with a checkbox like this. You need to make Location field checkboxes side by side

How To Make Side By Side Checkbox 01 Min

#1. First, use below tool to find the ID of the Form Block. In my example, we will have:

  • #block-yui_3_17_2_1_1722761113944_3710

How To Make Side By Side Checkbox 02 Min

#2. Next, you find to know this.

  • First field (Name): 1
  • Second field (Email): 2
  • Third field (Subject): 3
  • …..

How To Make Side By Side Checkbox 03 Min

#3. Use this code to Custom CSS box

#block-yui_3_17_2_1_1722761113944_3710 {
fieldset.checkbox:nth-child(4) {
    display: block !important;
}
fieldset.checkbox:nth-child(4) .option {
    float: left !important;
    width: 45% !important;
    clear: none !important;
    margin-bottom: 10px;
}}
How To Make Side By Side Checkbox 04 Min

#4. Result

How To Make Side By Side Checkbox 05 Min