Elementor Forms are useful for creating contact forms, inquiry forms, survey forms, booking forms, lead generation forms, and many other types of forms on a WordPress website.

Elementor allows you to easily add basic fields like name, email, phone number, textarea, checkbox, and radio buttons. But a form is not only a place where users enter information. It is also an important part of the user experience.

If your form looks clean and easy to understand, users are more likely to complete it. 

That is why styling your form is important.

In this blog, we will explain how to style Elementor Forms using checkbox fields, radio buttons, and image-based selection fields, with Cool FormKit.

Why Cool FormKit?

Elementor lets you add checkbox and radio button fields to your forms, but customizing their appearance can be challenging. 

While you can change the overall style of your form, you have limited control over how the fields display.

That’s where Cool FormKit comes in.

It extends Elementor Forms with advanced styling options, making it easy to customize checkbox fields, radio buttons, labels, and create image-based selection fields with Checkbox & Radio Styles for Elementor Form.

For example, imagine you’re creating a quote request form for a digital agency. Instead of displaying a plain list of services, you can let visitors choose from visually appealing options like Web Design, SEO, Mobile App Development, or Digital Marketing, each represented by an icon or image. This not only makes the form look more professional but also helps users find and select the right option more quickly.

How to Style Radio & Checkbox in Elementor Forms

Follow the steps below to customize the default radio buttons and checkboxes in Elementor Forms using Cool FormKit: 

Step 1: Enable Form Elements

• From your WordPress dashboard, navigate to Elementor > Cool FormKit > Form Elements.
• Turn on the required feature and save your changes.

Step 2: Edit Elementor Form

• Edit the page with Elementor and add the Form widget

Step 4: Choose a Style

After adding the form, choose whether you want to add an Image Radio Field or add the Radio & Checkbox Fields. 

Add Image Radio Field

• Navigate to the Content section of your Form Field. From the Field Type dropdown, select Image Radio Field.

• Once you’ve added the image radio field, you can customize it by using the following options:

• Field Type: Choose between Radio (single selection) or Checkbox (multiple selections).
• Choose Style: Select vertical or horizontal style for the image radio according to your requirements.
• Label/Value: Set a custom label (display text) and value (submitted data) for each image radio item.
• Image/Icon: Upload an image or select an icon to visually represent each option.
• To add more choices, click the “Add Item” button.
• To customize the image radio in your Elementor form, go to the advanced section and use the following settings

• Selected Border color: Changes the border color when input is selected.
• Selected Background color: Define the background color of a selected item.
• Selected Text color: Sets the text color of input fields that will change during selection.
• Hover Border color: Adjust the border color when users hover over an option.
• Image/Icon size: Increase or decrease the size of images or Icons.
• Gap between fields: Adjust the gap between fields using this setting.
• Min Width: Set the minimum width of checkboxes or radio.
• Padding: Adjust the space between the content (such as text or images) and the element’s border.

Add Style Radio & Checkbox Fields 

• Navigate to the Content section of your Form Field. From the Field Type dropdown, select Radio & Checkbox Fields.

• Once you’ve selected the Radio & Checkbox Fields, you can customize its appearance using the following options:

• Choose a preferred style option from the style dropdown.
• The following style controls will appear:
  • Size: Adjust the size of the radio & checkbox icon.
  • Unselected Color: Select the color that will display on the radio & checkbox icon as default unselected option.
  • Selected Color: Select the color that will display on the radio & checkbox icon as the selected option.

Step 5: Update and Preview

• Click Update to save your changes.
• Preview your page to ensure the selected label style is applied across all form field labels and matches your website’s overall design.

Form Selection Fields

Customize form fields with styled checkboxes, radio buttons, labels, and image-based selections.

Explore →

Does It Work with Elementor Free?

Yes, Cool FormKit supports both Elementor Pro and Elementor Free setups.

For Elementor Pro users, it works with the native Elementor Form widget.

For Elementor Free users, it can work with supported form widgets such as Hello Plus, Pro Elements, or the Cool FormKit form widget.

This means you can still create styled checkbox and radio fields even if you are not using Elementor Pro.

Final Thoughts

Checkboxes, radio buttons, and image-based options may seem like small parts of a form, but they can directly affect how users interact with it.

If the options are easy to see, easy to understand, and simple to select, users are more likely to complete the form without confusion.

Cool FormKit makes this easier by giving you styling controls inside Elementor itself.

You can adjust the appearance of radio buttons, checkboxes, selected states, colors, spacing, and image-based options without writing custom CSS.

It also extends Elementor Forms with 25+ advanced form fields and features, allowing you to create everything from image selection fields and calculators to conditional forms, signature fields, rating fields, and much more. To explore everything it offers, check out the features of Cool FormKit.

So, instead of keeping your Elementor forms plain and basic, you can make them more visual, user-friendly, and aligned with your website design while unlocking powerful form-building capabilities beyond Elementor’s default fields.

FAQs