Turn Gravity Forms Image Choice Field into carousel

Problem

Recently, I saw a Gravity Forms user looking for a way to style the new Image Choice field. Specifically, they wanted to display the images in a carousel instead of the default grid.

 I was wondering if there are any styling options for the Image Choice field. Specifically we are looking for something like an image carousel. 

There are no built-in styling options for this field as of now, but I thought I’d see if there was a way to do this with custom CSS.

The Default Image Choice Behavior

This is how the Image Choice field looks out of the box; it displays the images in a grid based on the number of choices and the size of the screen:

Solution

The Custom carousel CSS

After a few minutes of trial and error I was able to come up with a simple CSS snippet that would turn this grid display into a carousel display targeting a specifici field.

This is the result:

How to Implement

You can simply copy paste the CSS snippet below, modify the formID_fieldID in code and you set.

/* Force the choice container into a horizontal scrollable row */
#gform_wrapper_678 #input_678_2 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
}

/* Each image choice becomes a "slide" */
#gform_wrapper_678 #input_678_2 .gchoice {
  flex: 0 0 auto;
  width: 250px;
  scroll-snap-align: start;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5rem;
  box-sizing: border-box;
  background: #fff;
}

/* Optional: tighten up the image spacing and size */
#gform_wrapper_678 #input_678_2 .gfield-choice-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

In the code above you will see 678 and 678_2 these are the form ID and field ID for the Image Choice field in my form used for this demponstration.

• 678 = Form ID
• 678_2 = formID_fieldID

You will need to replace these numbers with your form ID and the Image Choice field ID from that form.

Where to Put Custom CSS

I always recommend adding the code to the WordPress Customizer, however I understand not all sites have access to the Customizer with the changes in fullsite editing and other page builders.

To help identify the best place to put this CSS in your site, I suggest you review this Gravity Forms doc: Where to Put Your Custom CSS

The Wrap Up

I suspect we will see more design options come out in Gravity Forms core at some point for this new Image Choice field, but for now, we always have the option of doing some cool stuff with CSS.

If you’re not familiar with the Gravity Forms Image Choice field I would recommend reading about it or taking it for a test in your own site.

If custom CSS isn’t your thing and you rather use a solution that has built-in styling options you might consider the Jetsloth add-on called Image Choices.