Cal Evans, Developer Advocate Reading estimate: 5 minutes
Dynamically Populated Radio Buttons in WordPress and Gravity Forms
Forms in HTML are not difficult. Forms in WordPress take some time, but any developer should be able to build forms without too much trouble. The Gravity Forms plugin makes it even easier, allowing anyone who can operate a browse to build nice solutions.
The problem is, as a developer, sometimes I want things that can't be done simply. For example: dynamically creating Radio Buttons for a form built in Gravity Forms. As it turns out, it's not that hard, but it's not what you would call obvious either. This tutorial will walk you through the steps to take to accomplish this task, as well as explain why you have to do it this way.
Background
If you know me - or if you've been around me at a conference for more than 5 minutes - you know that I run a side project called Nomad PHP. Nomad PHP is a Virtual PHP User Group. As a PHP User Group, we offer free tickets to any other PHP User Group Leader who would like to attend. When I started Nomad PHP, it was easy to manage this process. These days however, it's getting harder and harder as more and more PUG Leaders want tickets. The person who actually does everything with Nomad PHP - the lovely and talented Kathy - decided that we needed a form for PUG Leaders to request tickets instead of just having them "email Cal". (It turns out that emailing Cal is the fastest route for your request or idea to take into /dev/null)
Since the Nomad PHP website is built on top of WordPress, we asked our friend Kenneth White - one of Nashville's resident WordPress experts and the cook at Nashville WordPress Developer's Breakfast - what form plugin he would recommend. He told us to look into Gravity Forms. On that recommendation, we purchased the plugin.
The main thing that we wanted in the form was a way for the PUG Leaders to select the meeting for which they wanted to request a free ticket. Yes, we could have (and did early on) just put a text box there and let them type in the meeting they wanted to attend.
If you do any database work at all, you know that free form text entry like this leads to all kinds of fun and party games as you try to guess what the answer means, and how to correlate it to your database. No, we needed a better answer that took the guess work out of the process.
The Form
There is no need to show the entire form here. There is one important thing though, to make this solution work, you do need to add a Radio Button control onto your form.
Ignore the options that are pre-populated; we are going to delete those once we are ready to populate our own. Once you have added your Radio Buttons into your form, click on the Advanced Tab. There you will find a checkbox titled "Allow the field to be populated dynamically". Check that. Once you do, a new field, "Parameter Name", will become visible. Enter something meaningful here. Remember this, write it down, you will need it later when you start coding.
Now save your form. In the upper left corner of the form is the form's ID. Write that down; you'll need that too.
The Code
Now let's turn our attention to the code. My original thought on creating this was to create a dynamically populated Radio Button control and add it to the Advanced Fields panel on the right of the screen.
This is where Gravity Forms keeps all its more complex fields. I actually experimented with this for an evening. I found a few examples that got me close enough to do what I wanted to do. At one point, I had a control that would dynamically put something in a text box. The problem with this method is that I believe Gravity Forms has to know some meta data about the control. Just replacing the HTML returned with a few Radio Buttons didn't look like it would work.
In the end, I took a "sledgehammer as a flyswatter" approach. Gravity Forms has WordPress hook before the form is rendered, gform_pre_render_FORM_ID.
As you can see from the code above, I use the gform_pre_render_FORM_ID hook. This gives me the entire form as an array. From here I can meddle to my heart's content. Since I'm only interested in a single element, I spin through the form elements looking for a field with the inputName that I set previously in the UX.
Once I have the element I want, my Radio Buttons, I can modify - or in my case totally rebuild - my array.
It expects an array of the format
text => 'Cal Was Here' value => 'You selected Cal Was Here'
Where text is what will be displayed and value is what will be returned.
Also available is 'isSelected' in case you want to select a choice by default. (We don't in this case.)
You can see in the code that I reinitalize the array and build it from scratch. I do not want any of the default choices.
In our use case, I wanted a Radio Button for each of the upcoming meetings. I already have code written to generate this list. So I call that code, once for the US meetings and once for the EU meetings. Then I simply use array_merge() to give me a single array to iterate over.
Once I have my options, it is a simple process to iterate over the list of meetings and prepare the array.
Once the array is built, you just hand back the entire form in the return statement.
Voila! Dynamically populated Radio Buttons in Gravity Forms.
Conclusion
I feel this should be easier. Granted, it did not take a lot of code to do this. However, this is bespoke code. It is only useful for a single form. If I need this in another form I've got to code another hook. I still feel that it should be possible to create a component and place it in the Advanced Field tab. It still may be possible to do this but the Gravity Forms Developer Documentation is lacking. Lacking in details, lacking in concrete examples, just lacking in general. I hate it when I find a great technical tool only to find I have to read the code and 5 blog posts just to figure out how to use it.
Overall though, I like Gravity Forms. I find them so easy to use that the idea of coding my own these days is probably gone for good. I hope this explanation of what I was trying to accomplish and how I eventually accomplished it will help you get more out of Gravity Forms.
Topics
Discover More
Safely Publish to Web from Google Docs with Pantheon Content Publisher
Roland Benedetti (Senior Director, Product) and Zack Rosen (Co-Founder)
Reading estimate: 7 minutes
Unifying Content and Code: Inside Pantheon’s Vision for Content Operations
Chris Yates
Reading estimate: 5 minutes
How Pantheon Protects Your Site from Software Supply Chain Risks in Open Source
Steve Persch
Reading estimate: 8 minutes