In this tutorial, we’ll look at how to add a field that works with the plugin, Advanced Custom Fields (free version).
This tutorial will explain the steps required to add an ACF field to your USP Form. For our example, we will add an ACF date picker.
Step 1: Get the name of the Custom Field
First we need to know the name of the Custom Field that we want to add. For the date picker field, the custom-field name is event_date.
In general, you can get the ACF field name while editing the ACF. Look for this setting on the “Edit Field Group” screen:
“Field Name* Single word, no spaces. Underscores and dashes allowed”
Whatever value you enter here will be used in the next step.
Alternately, for other types of fields, you can get the name by viewing the source code of the admin/settings page that displays the ACF.
Step 2: Add the Custom Field to settings
Once you know the name of the Advanced Custom Field that you want to add, follow these steps:
- Visit USP settings > Advanced > “Custom Custom Fields”
- Enter your custom field name as either “Optional” or “Required”
- Click to Save your changes
Step 3: Add the Custom Field to the form
Now that the ACF is added to the plugin settings, we can use it any USP Form. Here are the steps:
- Visit the “Edit Form” screen for your USP Form
- Define a Custom Field, making sure to include the “name” attribute, for example:
name#event_date - Once the Custom Field is defined and saved, you can select its shortcode and add it to your form
For step #3, the Custom Field shortcode looks like this:
[usp_custom_field form="10" id="1"]
Note that the form="10" and id="1" will vary depending on your form. You should be able to just copy from the custom-field panel, and then paste it into the form.
At this point your form includes a field that will submit data to a Custom Field named event_date (or whichever Custom Field you are using). These steps may seem like a lot at first, but once you see how it works, it’s just a few clicks, copy/paste for each field.