How to Style Checkbox Inputs in Gravity Forms

March 15, 2016 - By 

Checkbox inputs are used in a form when a user can select more than one choice from list of multiple choices. If you have created a form to get information about 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

  • Set font size for checkbox inputs
  • Font color of checkbox inputs
  • Maximum width of checkbox inputs
  • Padding for input boxes

If you want users to select only a single option out of a set of options then you can use and style radio inputs in your Gravity form.

Customize Design of Checkbox Inputs of Gravity Forms

To change the design of Gravity Forms checkbox inputs you don’t need to install any template/theme pack. You can do this using Styles and Layouts for Gravity forms plugin. You can style the complete form by changing its CSS attributes like colors, fonts, borders, margin, padding etc without the need of coding.

Modify Styling of Checkbox Inputs using Styles and Layouts plugin

  • Install and Activate Styles and Layouts for Gravity Forms plugin form WordPress.org plugin repository. You can also do a quick search for ‘Styles and Layouts’ from ‘Add New‘ submenu of Plugins in WordPress dashboard to install the plugin.

open customizer

  • Open the page which has the Gravity form you want to design. Now click on the customize button. It will open customizer in the left sidebar. Customizer is a WordPress core feature that lets user design the various aspects of the website with live preview. Style and Layouts plugin hooks directly inside Customizer Sidebar so that you can easily design Gravity forms.
  • Once the customizer is open then look for Styles & Layouts Gravity Forms menu. Inside this menu you will get the option to select Gravity form. Select the one which you have in your current page. Now Styles and Layouts plugin will automatically save the form and load the designing options after page refresh.

checkbox inputs section

  • Again go to Styles & Layouts Gravity Forms and then navigate to Checkbox Inputs.

designing of checkbox inputs

  • Here you will get the option to change  font colour, width and padding for all the checkbox inputs fields present inside the form. Width and  padding can have values in px, % and em. For setting the colour of checkbox inputs font you can use the inbuilt colour picker or add hex code.
  • Save your changes by clicking on Save and Publish button.

Here is the video tutorial to change the design of Checkbox inputs

 

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 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 above attributes to whatever that looks best on your website.

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

If you need any help about this tutorial then leave a comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 1 other subscriber