Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Use a Radio Button or Checkbox with Image

Last Updated: January 10, 2022

Knowledge Base → Forms → Form Building → Field Options → Use a Radio Button or Checkbox with Image
— Premium Feature —

You can enhance Radio Buttons and Checkboxes with images. Image options can be customized for an image survey, quiz, poll, purchase form, and many more. This option will replace the radio button or checkbox with images you select.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
Subscribe on YouTube

By default, text labels are shown with images but can be hidden. Choose the image size that works best for your form. Then set the colors and other styling features in the visual form styler.

Checkbox with Image in WordPress form

Add radio or checkbox with images

To add images in a Checkbox or Radio Button field:

  1. Add a Radio button or Checkbox field to your form.
  2. Select Images as the Display Format.
    Checkboxes Radio Display Format
  3. Select a size for the images in the Image Size dropdown.
  4. Select the Hide option labels box if you don't want the labels to show.
  5. Select the Use separate values box if you want to store an entry as a value distinct from the selected value. Read more about separate values.
  6. Each option includes an image and a text label. Fill in a text label. Each option must have a text label, even if you're not showing it in the form.
    Checkboxes Radio Upload Image
  7. Click on the Upload Image button to choose an image. You can upload a new image or select an image that already exists in the Media Library.
  8. Click the Add Options link to add more options to your field.
You can also use images in a button-style layout. Learn more about using images in a button.

Replace selected image

To change a radio button or checkbox image:

  1. Click Delete to remove the currently selected image.
  2. Click on the Upload Image button to select a new image.

Image sizes

All image sizes are displayed as a square. The size options are:

  1. Small: 150px (the default size)
  2. Medium: 250px
  3. Large: 320px
  4. Extra large: 400px

To set a custom size, go to Formidable → Styles → Custom CSS and add this CSS:

#frm_field_160_container.frm_image_options {
--image-size:100px;
}

Replace 160 with the ID of the field to change, or remove #frm_field_160_container to apply to all fields.

Styling image options

Image options use values from your form styling settings. You can change the appearance of image options with the following Style settings:

  • Default border: Field Colors → Border
  • Border hover/selected color: Field Colors → Active Style → Border
  • Checkmark background color: (same as Border hover/selected color)
  • Border width: Field Colors → Thickness
  • Border radius/corners: Field Settings → Corners

Display image choices

Display selected images in a form confirmation message, email, or View.

Shortcode options

  • Show image and label: By default, images will be displayed. Labels will be displayed if labels are displayed in the field. You can override these defaults with the show_image and show_label params.

    [x]

    Replace x with the ID of the radio/checkbox field.

  • Hide image: Hide the image and show only the label:

    [x show_image=0]

    Replace x with the ID of the radio/checkbox field.

  • Hide label: If the label is set to show in the form, it will show by default here. To hide it, use:

    [x show_label=0]

    Replace x with the ID of the radio/checkbox field.

  • Show label: If the label is set to be hidden in the form, it will be hidden by default here. To show it, use:

    [x show_label=1]

    Replace x with the ID of the radio/checkbox field.

  • Add link: Link to the full-sized image.

    [x add_link=1]

    Replace x with the ID of the radio/checkbox field.

  • Open link in new tab: Open the link to the image in a new browser tab. The new_tab=1 parameter must be used in conjunction with the add_link=1 parameter.

    [x add_link=1 new_tab=1]

    Replace x with the ID of the radio/checkbox field.

  • Image size: Set the image display size using either size=thumbnail, size=medium, or size=full. The default size displayed is the thumbnail. In WordPress, the default thumbnail size is a 150x150 image. Specify a different size to show a bigger image.

    [x size=full]

    Replace x with the ID of the radio/checkbox field.

  • Show attachment ID: Display the attachment ID of the selected image.

    [x show=id]

    Replace x with the ID of the file upload field.

You can display a field that has image options using field shortcodes like [100] or the frm-field-value shortcode.

Default email message

By default, images selected in radio buttons and checkboxes will be shown with the default-message shortcode in HTML emails and the frm-show-entry shortcode.

In plain text emails, the labels will be shown without images.

To hide images in the default-message or frm-show-entry shortcodes, add show_image_options=0.

For example:

[default-message show_image_options=0]

Limitations

  • The option to display images is not included in Lookup and Dynamic fields.
  • The bulk editor is not available for use with image options.
  • Image options aren't designed to work with Add Other options.

Related Articles

  • How to Create an Emoji Rating Scale in WordPress How to Create an Emoji Rating Scale in WordPress
    Read More
    WordPress poll plugin with images The Ultimate WordPress Poll Plugin (with Images)!
    Read More
    Replace Radio Buttons with Images in WordPress How to Replace Radio Buttons with Images in WordPress Forms
    Read More
  • Add radio or checkbox with images
    • Replace selected image
    • Image sizes
  • Styling image options
  • Display image choices
    • Shortcode options
  • Default email message
  • Limitations
  • Related Articles
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews