Get inside access to design tips from a pro! Subscribe to Design to Dollars

Gravity Forms

How to Populate a Gravity Forms Dropdown field with an Advanced Custom Fields Post Type

Adam Wright

by Adam Wright

Last year, I worked on a client project that involved setting up a custom post type for listing various tours. To streamline the process, I integrated those custom post type names into a Gravity Forms dropdown field. This way, whenever a new tour was added, it was automatically included in the inquiry form as a selection. Today, I’ll show you how to set this up for your own project.

Step 1: Set Up Your Custom Post Type

On my dummy site, I have a custom post type set up for event listings, featuring different artist names as the event titles. The goal is to create a dropdown field on the contact form where users can select the event they’re interested in, with the dropdown automatically populated by the custom post type entries.

Step 2: Add a Dropdown Field in Gravity Forms

  1. Go to your Gravity Forms contact form and add a Dropdown field.
  2. Name the field something like Select the Event You’re Interested In.
  3. Next, go to the Appearance tab for the dropdown field and add a CSS class. This class will be referenced in the PHP code. Let’s call it event-dropdown.

Step 3: Add PHP Code to Your Theme

Now, it’s time to set up the PHP code that will populate the dropdown with your custom post type data. Before proceeding, I highly recommend using a child theme to ensure your changes won’t be affected by theme updates.

  1. Go to Appearance > Theme File Editor in your WordPress dashboard.
  2. In your child theme’s functions.php file, add the following code:
    add_filter( 'gform_pre_render_1', 'populate_posts' ); add_filter( 'gform_pre_validation_1', 'populate_posts' ); add_filter( 'gform_pre_submission_filter_1', 'populate_posts' ); add_filter( 'gform_admin_pre_render_1', 'populate_posts' ); function populate_posts( $form ) { foreach ( $form['fields'] as &$field ) { if ( $field->type != 'select' || strpos( $field->cssClass, 'event-dropdown' ) === false ) { continue; } $posts = get_posts( 'numberposts=-1&post_type=live-music&post_status=publish' ); $choices = array(); foreach ( $posts as $post ) { $choices[] = array( 'text' => $post->post_title, 'value' => $post->post_title ); } $field->placeholder = 'Choose one'; $field->choices = $choices; } return $form; }
  3. Update the following parameters to match your setup:
    • Form ID: Replace 1 with the ID of your form.
    • CSS Class: Ensure event-dropdown matches the class you set in the Gravity Forms field.
    • Custom Post Type: Replace live-music with the slug of your custom post type.

Step 4: Test the Functionality

After adding the code, save your changes and refresh your contact form page. The dropdown should now automatically display your custom post type entries.

To test it, go to Live Music (or your custom post type) and add a new entry. After publishing it, refresh your contact form page. The new event should now appear as an option in the dropdown.

Final Thoughts

This method is perfect for situations where you have a constantly evolving list of entries in a custom post type. If you have fewer static options, manually entering them might be a better choice. However, for larger lists that frequently change, this setup will save you a lot of time.

Subscribe

Follow My YouTube Channel for More Tutorials

Subscribe to Channel
Adam Wright

About the Author

Adam Wright

Adam is a California native, now living in Middle Tennessee. A long-time creative at heart, his passion for design and growing his small business, AWD, is always evident. When he's not writing code or sketching logos, he enjoys spending time with family, playing basketball, or watching just about any motorsports. Find him on LinkedIn.