Introduction

Checkbox inputs allow users to select more than one choice from a list of multiple choices. If you have created a form to get information about a user’s hobbies then it is more appropriate to use checkboxes as a user can have multiple hobbies.

By the end of this tutorial, you will be able to

1. Use Images, Fontawesome icons, switches or buttons as checkbox inputs.
2. Set font size for checkbox inputs
3. Font color of checkbox inputs
4. Maximum width of checkbox input labels
5. Padding for input boxes
6. Increase the size of checkbox input boxes

If you want to style radio inputs, you should check out our detailed tutorial here.

Styling Gravity Forms Checkbox Input Boxes

Use of Images, FontAwesome Icons, or Switches

If you plan to make your checkboxes input boxes stand out, you can do that by using images, font awesome icons, or switches. You don’t need to know any CSS or coding skills to implement this option. It is easily doable using the Checkbox & Radio Styler Gravity Forms add-on. You can check the detailed tutorial for adding icons here. You can also convert checkboxes in buttons using Checkbox & Radio Styler.

Here is the demo form showing all the different styles of implementations for checkbox and radio inputs.

Creating Coloured Gravity Forms Checkbox Input Boxes

Checkbox inputs are usually difficult to style because browsers don’t let you apply most of the CSS. This is why you will usually see the same type of checkboxes on different websites. If you really want to make your checkboxes stand out, you must rely on JavaScript.

We have material design and bootstrap addon for Gravity Forms which modify the design to make them look pretty. If you use either material design or bootstrap then it won’t change only the checkbox inputs but the whole look of your form. This way the form design will be consistent for all fields and your checkbox and radio inputs won’t look out of place.

You can check the below demo forms to see the material and bootstrap design in action.

• Material outline design demo form
• Material filled design demo form
• Bootstrap design demo form

If you are comfortable doing the custom CSS then you can use the following code. It will make your checkbox input boxes look like the below image.

Note: Replace FORMID with the real form ID of your Gravity Form

Changing the size of Gravity Forms checkbox inputs

Usually, the checkbox inputs box where checked and unchecked marks are shown in good size by browsers. However, there can be a reason for you to alter the sizes of the boxes. Like if your checkbox input option labels are very big or small in size then you may want to increase or decrease the sizes of input boxes as well. This can be achieved using custom css code as shown below.

In the above code, you should replace the FORMID with the form of your form. You can change the values of width and height according to your needs. We recommend that you should keep the same value for width and height as that will render your checkbox input boxes to be square in shape.

Styling Gravity Forms Checkbox Input Option Labels

Gravity Booster is a free WordPress plugin that lets you style checkbox input options labels with ease. It has an intuitive display and we recommend you use it for styling any part of the form be it input boxes, form wrapper, radios, checkboxes, buttons, etc.

Steps to Style Checkbox Input Option Labels with Gravity Booster

Once you have installed and activated the Gravity Booster plugin then go to the Forms menu from your backend.

Now edit the form that you want to style and then click on the Styler option from the form editor toolbar. In the Booster interface you will get styling options on the left sidebar and the right content area will contain the preview. From preview click on any of the existing checkbox fields. This will automatically open the checkbox styling options. Alternatively, you can also find the checkbox styling options from the left sidebar.

From the Checkbox Styling option, you can do the following things

• Width: You can set the width which each option label can take. It can be set differently for desktop, tablet, and mobile interfaces. If you only set it for desktop then the save will apply on all devices.
• Font style: It can be used to make the option labels bold, italic, underlined, or uppercase.
• Font Size: It can be used to set the font size of the option labels. Like width, it can be set differently for different screen sizes.
• Line Height: It can be used to increase or decrease the space between the labels of two options.
• Font Color: From here you can use the color picker or set the colors manually in hex, HSL, or RGB format.
• Padding: This option can be used to set space around the label. It can be used to change the space between the input box and label or different option labels. It depends upon what padding values you are giving.

Once you have made the design changes then click on the ‘Save’ button to implement them on your website.

Modify Styling of Checkbox Inputs with CSS Coding

The CSS code required to change the font color,  padding, and width of checkbox inputs is as follows

Note:– Replace FORMID with the real form ID of your Gravity Form
After you have saved the above CSS code in your style.css file then you will notice that the font color is set to blue. The maximum width is now set to 150px with padding around the inputs to 19px.

You can change the value of the above attributes to whatever that looks best on your website.

After making changes you should clear the cache of your browser as sometimes a cached CSS file is loaded.

Creating Multi-Column Layout for Checkbox Inputs

If you don’t want to show all your checkbox options in one column which is the default and only option possible from the Gravity Forms interface then we have a no-code solution for you. The Checkbox and Radio styler addon for Gravity Forms lets you do that and much more.

Steps to divide Checkbox inputs into multiple columns

• Install and activate the Checkbox & Radio Styler addon. 
• Now open the form editor for the form for which you want to divide the checkbox into multiple columns.
• Click on the styler option. This will open the Gravity Booster interface for you. 
• Now click on the checkbox & radio panel. From here go to Checkbox inputs.
• Under the Columns dropdown select the number of columns in which you want to divide your checkboxes. You can create up to 5 columns with this.
• Save the changes to make them live.
• Checkbox & Radio styler supports checkboxes, post tags, post custom fields, post categories, product quantity, product options, and product and survey fields for multi-column layout.

Please note that these columns are responsive, so they will become a single column on mobile devices.