What is Checkbox Field
Checkbox fields are square boxes with a clickable toggle to check (a tick mark within the box) or uncheck. Just like normal checkboxes on a checklist, HTML has a checkbox field element in the input tag.
One benefit of having checkbox fields is that you can select more than one from a given set. Checkboxes are similar to radio fields. The difference between the two is that radio fields allow for only one of the many options to be selected.
We can have the checkbox pre-ticked by including the ‘checked’ HTML attribute within the input tag.
HTML Checkbox
What is Radio Field
Radio Fields are similar to checkboxes but are circular rather than squares. They can be pre-checked by including ‘checked’ in the input tag.
The benefit of having these is that they allow the user to only select a single option from a given set of radio fields. This is the main differentiation between a radio field and a checkbox field.
The examples for having only one option selected on websites are many. Payment options, method of account recovery on a website, address for product delivery, etc. These cases need radio fields where one option makes sense.
HTML Radio
How to Style Gravity Forms Radio and Checkbox Fields
Gravity Forms is among the most widely form builder solution for WordPress. It doesn’t have too many inbuilt design controls but can be easily fixed with 3rd party free plugins like Styles & Layouts for Gravity Forms. Although Styles & Layouts is a pretty versatile plugin and you can make a lot of design changes but if you want to change the design of checkbox and radio input boxes then you have to use Checkbox & Radio Styler along with it.
Requirements for Styling Gravity Forms Radio and Checkbox Inputs
Require Plugins
Steps to Change Styling of Checkbox and Radio Inputs
- Once you have installed and activated the required add-ons, then open the page in which you have added the form in frontend.
- Now open Customizer in this page. If you are new to WordPress or don’t know about how to open customizer then you can check the tutorial here.
- Go to Styles & Layouts panel and select the form.
“Style and Layout” pannel in customizer - Now you will get the ‘Custom Checkbox’ and ‘Custom Radio’ sections in customizer. Once you open any of this section you will have the option to enable the styling for that particular field.
“Custom Checkbox” and “Custom Radio” in customizer
Detailed Explanation of Styling Controls available for Checkboxes & Radio Inputs
- Type: You can select the type of checkbox or radio inputs from here. It can be set to basic, icon, image or switch. Image option is not available for radio inputs.
- Shape: You can set the shape of checkbox input to be either default( square), curve or round.
- Style: This option let you decide how the checkbox or radio input will look once it is checked by the user. The options available are: default, fill and thick.
- Unchecked Color: This setting lets you change the color of inputs in their unchecked state. You can choose a color using the color picker control or provide a hex code.
- Checked Color: This setting is similar to ‘unchecked color’ but it is for the checked state of radio or checkbox inputs.
- Animations: This setting lets you set animations when the state is changed from unchecked to checked. There are five different animations available: smooth, jelly, tada, rotate and pulse.
- Note: Animations don’t work for certain combinations of type, shape, and style. It works for most of the combinations though.
- All the style changes you make will be live previewed instantly. Once you have finalized the design for radio and checkbox inputs then you can ‘Publish’ the changes.
Available styling options for checkbox in customizer
Step by Step Video Tutorial for Checkbox and Radio Styler Gravity Forms
Frequently Asked Questions
Can I have different styles for checkbox and radio inputs of the same form?
Yes, you can have separate design for radio and checkbox inputs. However, you can’t have separate design for all the different checkboxes or all the different radio buttons. It means that once you have applied design for checkboxes then it will be the same for all the checkboxes of that form. Similarly, the design you applied for radio will be the same for all the radio buttons of that form.
Can I have a different checkbox and radio inputs for different forms?
Yes, you can apply different design for radio and checkbox inputs of different forms.
Why certain customizer style options are only available for certain types?
There are certain options like images which are only available for checkboxes. Similarly, if you are using images as checkbox inputs then you can set the checked color as the color won’t be visible in checked state.
How many Icons are available for checkbox and radio inputs?
There is support for 400+ font awesome icons and you can also change their color.
Will the image automatically resize to fit the checkbox inputs?
Yes, the image will automatically resize according to the checkbox input dimension. Although it is recommended to use small images it is still fine if you use large ones.
Can I create a multi-column layout for checkbox and radio inputs?
Yes, checkbox and radio styler addon is fully compatible with Grid Layout for Gravity Forms add-on.
If you have any queries or questions regarding this addon then feel free to leave a comment below or use the contact form to send a message.
0 Comments