Use an options page to create dynamic select options for a Ninja Forms form. Easier for a client to manage.
Update 6 September 2022: In version 0.2 I have added a check to verify that the CMB2 plugin is active.
I wrote a post about injecting WooCommerce product data to a Ninja Forms dropdown. Here I combine a CMB2 options page with a Ninja Forms form.
I am working on a project where the client runs free classes. The form has a dropdown where the applicants choose their preferred class date. As the classes have very small numbers it’s not worth creating a ticket based setup. Instead of asking the client to change the dropdown in the contact form I decided to simplify things by creating an options page where the stored data would be injected into the dropdown.
Create options page with CMB2
I used the theme options example code in the CMB2 Snippet Library to get started with my options page. I set a calendar menu icon and placed it high in the Dashboard. I chose to create a repeater group to allow for multiple course dates. I used a date field in addition to a text field to ensure that the dates would be entered consistently. For the date field it stores a Unix timestamp. This allows the date to be displayed in different formats (I use a short month format in the options page and a full month format in the dropdown). Even more usefully it allows me to sort the course dates and to easily exclude past dates.
The date field is quite narrow and this is why I used a short month name format.
The fields take up a lot of vertical space but I didn’t want to waste time editing the CMB2 styles to reduce this.
Add dropdown to Ninja Forms
I next installed Ninja Forms plugin. I edited the default ‘Contact Me‘ form that is created on plugin activation and added a ‘Select‘ field. I removed the 3 options entries as they will be overwritten by the course dates.
To make the injection code more readable I changed the ‘FIELD KEY‘ (under ‘ADMINISTRATION‘) from the default one with a random string to ‘listselect_course_date.’
You must also edit the ‘Email Notification‘ email to add {field:listselect_course_date} so that the chosen option is included in the email.
Inject course dates to dropdown
The code looks more complicated that it really it. The filter function runs for each select field so we start off by checking that it’s the one we are interested in.
I ensure that the stored option has data and then create a new array with the timestamps as the keys, excluding dates in the past. ksort() then orders these with the earliest date first.
The options are a concatenation of the course date (with full month name!) and the location.
https://gist.github.com/damiencarbery/22d51280c420901480cdca343d4b297a#file-ninja-forms-inject-select-options-php
Note
While the form correctly displays the course dates and the email confirmation includes the chosen date, it is not in the Submissions area of the Dashboard or in the ‘Email Confirmation‘ (sent to the form submitter). This is very frustrating and will need further investigation to determine whether I’m doing something wrong or it’s a bug.
Update: There is a bug in the {all_fields_table} where it will not display the chosen value. I have reported this to Ninja Forms.
After a lot of stepping through Ninja Forms code I came up with a solution that will show the chosen value in the Submissions area: Ninja Forms – Display dynamic drop down selection in Submissions.
How does this work if there are multiple products, all with different dates?
@Matt: You would have to change the code to show on every Edit Product page (change: ‘object_types’ => array( ‘product’ ),) and enter the dates for each product.
You could then do something like my Product Enquiry form with Ninja Forms where a front end form shows on every product page.
You would use get_post_meta() instead of get_option() to get the dates.
Does that make sense?