How to Add Images in Gravity Forms Drop Downs and Multi Selects

1. What You’ll Need
2. Enabling Advanced Select
3. Adding Image Choices
4. Populate Anything with Image Choices
5. Your Selections, Enchanted 

Did you know dropdown fields trace their roots back to 1995? They were designed to solve one problem: present many options in a compact way. Fast forward three decades, and they’re due for a magical upgrade. Why rely on text alone when images can help show you exactly what each option is?

Imagine joining a tech conference. You land on the registration form, “Select Your Workshop,” and… scroll, scroll, scroll. Twenty workshop titles blur altogether. “Was it the JavaScript session with Dr. Reed? Or the one with Professor Chen?”

Enter our enchanted duo. GP Advanced Select transforms your Drop Down and Multi Select fields into neat, searchable lists. Pair it with JetSloth’s Image Choices, and suddenly every workshop title comes with a face.

Come, let’s make picture-perfect choices. 🧙🏼

What You’ll Need

1. Advanced Select
2. JetSloth Image Choices: Installed and activated on your site.

Enabling Advanced Select

Before we dive in, make sure Advanced Select is enabled on your field/s.

If this is your first time, we’ve got a handy guide on how to upgrade Drop Down and Multi Select fields into searchable lists. Give it a quick read and hop back here when you’re all set.

Adding Image Choices

With JetSloth’s Image Choices activated, you can now assign an image to each choice in your field.

For our registration form, let’s imagine 10 workshops where we add the speaker’s headshot next to each title.

Here’s how:

1. Navigate to your Drop Down’s or Multi Select’s field settings.
2. Under General › enable Use Image Choices.
3. For each choice, click the image icon to upload or select an image from your Media Library.
4. Add images to all remaining choices.
5. Save your form.

Voila! Here’s what the setup looks like, and the dropdown showing our speaker’s headshots:

And here’s the same setup applied to our Multi Select field for our Attendee Requirements:

Populate Anything with Image Choices

Okay, but what if your conference is huge? Say, 20 workshops stored in a custom post type on your site, like “Speakers”? You definitely don’t want to add all 20 manually.

For this, we summon GP Populate Anything into the mix. It pulls in choices directly from any custom post type or data source. And yes, it works beautifully with Image Choices.

Here’s how:

1. Open your Spellbook and activate GP Populate Anything.
2. In your form, open your Drop Down or Multi Select field’s settings. 
3. Go to General › enable Populate choices dynamically.
4. Set the Type to Post.
5. Add a Filter and set it to Post Type is Speaker (or your custom post type).
6. In Choice Template, map your data:
   • Value: Post Title
   • Label: Post Title
   • Image: Featured Image URL

This tells Populate Anything to use Post Title as the label and the Featured Image URL as the image that appears next to it.

And just like that, we’ve got all three plugins working in perfect harmony:

• Populate Anything fetches all your “Speaker” posts.
• Advanced Select displays them in a searchable dropdown.
• Image Choices shows each post’s featured image automatically. 

Your Selections, Enchanted 

In 1995, dropdowns conquered screen space. Today, we turned scrolling into seeing. 🪄