How To Populate A Bricks Builder Form Select Field With A Dynamic List

I was working on a client website that needed to handle a large amount of dynamic data that the client would regularly update and expand upon. 

My task was to set up the site so that forms and other elements could seamlessly incorporate new custom repeater fields added by users without requiring manual adjustments through the website builder.

In this post, I will show you how to use a Bricks Builder form with dynamic data created with Meta Box or Advanced Custom Fields.

In our example, we will write a PHP function that will dynamically populate a Bricks Builder form select field so you don’t have to manually add values inside the builder. I will be using Meta Box for this tutorial, but the logic could be adjusted for ACF users.

Requirements To Follow This Tutorial

1. Bricks Builder
2. Bricks Child Theme
3. Meta Box or ACF
4. A settings page
5. A repeater or cloneable field

Step 1 – Setup A Meta Box Setting Page

Inside Meta Box, we need to create a settings page to store domain values.

1. Find the Meta Box icon in your WordPress Dashboard, hover it and select “Settings Page”
2. Click “New Settings Page”
3. Name the title it whatever you like, I called mine “Property Settings”
4. Pick an icon or use the standard gear icon
5. Add a new tab and give it a key : value name
   • For this example, the key : value name can be something like prop_options : Property Options
6. Click “Publish”

A Quick Note About Domain Lists

When you work with databases, a domain will stores values that you can use throughout your application. Think of a domain as a method to store a list of values.

Example of a domain list:

If you have a real estate website, you may want to store your property types and call them when you need them.

• House
• Condo
• Apartment
• Land Parcel
• Townhouse

Step 2 – Create A Custom Field To Store Value

Inside Meta Box, we need to create a custom field for each of our domain values.

1. Find the Meta Box icon in your WordPress Dashboard, hover it and select “Custom Fields”
2. Click “Add New”
3. Add a text field
4. Change the label to Property Types
5. Change the ID to property_types
6. Find the “Cloneable” toggle and turn it on
7. Go to the “Settings” tab of your field
8. Change the Location to “Settings Page”
9. Select the tab we created called “Property Options”
10. Click “Publish”

Step 3 Grab The Meta Box PHP Snippet To Return Your Custom Field Values

For the Bricks Form, we will need to write a small PHP function that will grab the list of values from our Meta Box Options page.

1. Find the Meta Box icon in your WordPress Dashboard, hover it and select “Custom Fields”
2. Click edit on the new Property Types field
3. At the bottom of the screen, you should see a section called “Theme Code”
4. Copy the $values line of PHP code
5. Do not copy any of the HTML
6. Do not copy the ?php tags, just copy the variable for the values

The first part of the snippet should look like code below. NOTE, this is not all the code. The final snippet is at the bottom of this section. If you simply add this PHP to your child theme, it won’t work 🙂

//property_types is the ID for our field. If you named yours something different, make sure your ID is correct.
$values = rwmb_meta( 'property_types', [ 'object_type' => 'setting' ], 'property-types' ) ?: [] 

Step 4 Write The PHP Function To Return A List Of Values For The Bricks Builder Form Select Field

This is the code you are going to need to add to your child theme and then call inside the Bricks Builder Form select field. If you changed your IDs or name your functions something different, be careful and make note of those changes.

function selectFieldList() {
    //$values variable is provided by Meta Box and I run the implode function to convert the array to a string
    $values = implode("\n", rwmb_meta( 'property_types', [ 'object_type' => 'setting'     ], 'property-settings' ) ?: []);

    return $values;
}

Step 5 Call The PHP Function In The Bricks Builder Form

Now it’s time to launch Bricks and create a form.

1. Create a new template or page and add a section, container and a form.
2. Add a select field to the form
3. Inside the Options (one per line) call the PHP function

You should be able to see your dynamic list of options on the front end of your website.

FAQs For

What is the advantage of using Meta Box or ACF to populate form fields in Bricks Builder?

Using a custom field plugin like Meta Box allows you to manage and update your website’s dynamic content centrally without having to manually update each form. This integration streamlines the process of keeping your forms in sync with the latest data, ensuring that your website remains current and functional without additional manual effort.

Can I use this method for fields other than a select dropdown in Bricks Builder?

While this tutorial focuses on populating a select field, the underlying concept can be adapted for other types of dynamic fields in Bricks Builder. Whether you’re dealing with checkboxes, radio buttons, or any other field that can benefit from dynamic data, the approach of using a PHP function to return values can be applied similarly.

How do I ensure that the dynamic data is updated in real-time on my website?

The dynamic data is updated based on the values stored in your Meta Box fields. Whenever you update the information in these fields, the changes will be automatically reflected in the Bricks Builder form. There’s no need for manual updates on the form itself, as the PHP function will fetch the latest data whenever the form is loaded or refreshed.

Is there any performance impact when using dynamic data in forms?

Dynamically populating form fields should have a minimal impact on performance. However, it’s always good practice to monitor your website’s performance as you integrate dynamic content. Since the data is fetched directly from Meta Box or ACF without complex queries or additional overhead, the performance impact is typically negligible. Nonetheless, if your data set is exceptionally large, consider optimizing your retrieval methods or caching the results to ensure optimal performance.

Conclusion On How To Populate A Bricks Builder Form Select Field With A Dynamic List

Dynamically populating a Bricks Builder form select field using Meta Box (or ACF) ensures your forms remain up-to-date with the latest data without manual intervention. This approach not only streamlines the process of managing dynamic content but also enhances the user experience by keeping your forms relevant and accurate. By following the steps outlined in this tutorial, you can efficiently implement dynamic data population in your Bricks Builder forms, allowing for greater flexibility and automation in your website’s data management. Embrace this method to maintain an agile and responsive website that adeptly adapts to your evolving data needs.