Overview

Using button design over plain old checkboxes and radio inputs has several advantages. They are easy to click with larger click areas available, visually more appealing, and can also offer better differentiation between checked and unchecked states. So, they offer both functional and aesthetic advantages.

In this article, we have a step-by-step guide for converting Gravity Forms radio and checkbox inputs into button design and exploring various style customizations without the need for any coding or custom CSS.

Pre-requisites

It goes without saying that you should have Gravity Forms installed and activated. Along with it you will need the following addons which allow you not only to convert the checkbox and radio inputs to buttons and a lot of other styling customizations too.

• Gravity Booster
• Checkbox & Radio Styler for Gravity Forms

Steps to Convert Gravity Forms Checkbox & Radio Inputs to Buttons

• After you have installed and activated the prerequisite plugins then navigate to Forms -> Booster.
• Select the form in which you want to convert checkbox & radio inputs to buttons. After form selection, the page will reload with styling settings on the left and preview on the right.
• Go to the Checkbox & Radio panel and then go to either the Checkbox or Radio section. 
• Let’s assume you went to the Radio section. Here check the Enable Custom Radio option.
• Now under the Radio Type dropdown select the Button option. The form preview will refresh immediately showing you the live preview of how the radio buttons will look in the form.
• Save your changes and your form will now show radio inputs as buttons in the frontend as well.

Follow the same process for converting checkbox inputs to buttons. With this method, all the checkbox & radio inputs in your form get converted to buttons in one go.

Styling Options for Checkbox & Radio Buttons

Checkbox & Radio Styler for Gravity Forms not only lets you convert the checkbox & radio inputs to buttons but it also has plenty of styling controls to make your buttons blend with the overall theme of your website.

You will get the following styling controls:

• Shape: The button shape can be set to square, rounded, or pill design.
• Button Size: It can be set to small, medium, or large.
• Button Text Color: You get to choose any color from the color picker for the button text. It also accepts values in RGB, hex, and HSL.
• Checked Icon: This is the icon that you want to show when the checkbox or radio input button is in a checked state. You can also leave it blank in case you don’t want an icon to show.
• Unchecked Icon: This is an icon that you want to show when the checkbox or radio input button is in an unchecked state. Similarly for this also you can leave it blank in case you don’t want to show the icon.
• Checked Color: This is the background color of the button when the radio or checkbox button is in checked state.
• Unchecked Color: This is the background color of the button when the radio or checkbox button is in an unchecked state.

All the design changes will also be live previewed and once you have the desired design then click on the Save button to make the changes live.

Advanced Styling for Checkbox & Radio Buttons

The settings provided by the Checkbox & Radio Styler plugin for Gravity forms will be able to meet the needs of most people. However, if you want to further customize the look and feel of the buttons then that is also possible without any need for coding as well.

Steps for Advanced Styling for Checkbox & Radio Inputs

• From the Gravity Booster interface, navigate to the Styler panel.
• Now go to either the Checkbox or Radio section. In the next steps, we will see the advanced styling options for radio buttons. These same controls are also available for checkbox buttons as well.

Under Radio Inputs you will get the following customization options

• Width: It will set the width for buttons. This option is great if you want to increase or decrease the size of radio buttons.
• Font Style: It lets you make the radio button text to be bold, italic, uppercase, or underlined.
• Font Size: In case you want to increase or decrease the font size of the button text then it can be done from here.
• Line Height: It can be used to vertically increase the size of the button. 
• Font Color: It has the same effect as the button text color.
• Padding: This adds space inside the button container. It can also be used to make the button small or large.

After doing the advanced styling, don’t forget to Save the changes.

If you have any questions or queries then don’t forget to leave a comment below and we will get back to you.