The Frontend Admin form builder allows you to build dynamic and interactive frontend forms which can include any of the standard post fields and even ACF fields and field groups. You add the form to any WordPress site using any page builder.
From the WordPress dashboard click on Frontend Admin > Forms and you can start.
Forms Dashboard
Here you can see a list of all the Frontend Admin forms on your site. To create a new form click Add New at the top of the page.
First, choose a form type.
This pre-populates the form with suggested fields, which you can change or rearrange later. We will discuss the various form types in other articles. If you aren’t sure, just choose “Frontend Form”
Form Options
At the top, we see the form’s unique shortcode. This shortcode is used to insert the form into your website. Click Copy Code and paste the code into your site, anywhere that supports displaying shortcodes. The shortcode will render into the full form.
Under the shortcode is the form’s title, which will be used to identify this form in the future. You can name this whatever you want; it will not be shown to your users.
Under the title, we have the tabs to navigate the different options of the form itself. Let’s go through each tab one by one.
Fields
This is where you create the actual form.
ACF Fields
To add ACF fields, add a new field and choose “ACF Fields” as the field type. This is located under the “Form” section of the field type drop-down.
This will load a new dropdown that will dynamically show all the ACF fields on your site. You can then choose the relevant field, or add an entire field group at once.
Form Fields
Now let’s look at the fields that have been added to the form. Depending on the preset you chose, you will have several fields already added to the form.
This list defines the order in which the fields will be displayed in the final form. You can rearrange them by clicking and dragging on the order number. You can also delete a field by mousing over the field name and clicking the “Delete” button.
Add or remove fields as relevant to you. You can mix and match fields for Post data, User data, Term data, ACF fields, etc, at will, all within a single form. With the pro version, you can add WooCommerce product data as well.
Submit Button
A Submit Button field is added automatically to all new forms. You can edit the button label in its settings.
Field Options
To edit a field’s options click the field. This will open the field settings like in ACF. Many of the settings are common between all the field types, while others are only applicable to certain fields.
Common Field Options
- Field Label – This is a label for the field which appears on the front-end version of the form.
- Field Type – This defines the type of field and also affects which other options are shown.
- Instructions – This is a message intended for the users of the form. It is shown under the label but above the actual field.
- Required – Indicates if the field can be left blank. If this is enabled the form cannot be submitted if the field is blank.
- Hidden – This will hide the field. It is useful if the field is being used with a default value.
- Default Value – This will prefill the field with the given data, assuming nothing is input by the user.
- Many fields have additional options, but that is outside the scope of this article and will be covered later.
Under the field options, there is the option “Save Custom Fields to” which lets you choose where to save the custom data to.
Actions
Here we have several options for additional actions to take place outside the form itself.
You can define where the page should redirect to after submitting. By default, it will reload the current Page/Post. You can choose to redirect to the live post by selecting Custom URL.
You can also define a custom success message, or choose no success message, whatever suits your needs. There is also the option to set an error message.
With the Pro version, this is where you can define additional actions, such as email notifications, webhooks, and Mailchimp Integration.
Permissions
Filtering HTML
By default, all forms filter HTML so as to prevent hackers from injecting malware into your website. If you wish to turn this feature off and allow users to submit HTML, simply turn on “Allow Unfiltered HTML”. Be careful to only turn this on if you trust everyone who is using this form!
Condition Rules
This is where we limit which kinds of users can access the form. It is very important to configure this correctly, as otherwise, your users might not be able to see the form at all!
By default, only administrators can see the form. If you want to allow other users to access it, you need to add rule or configure the default rule. You can limit the visibility based on roles using the “Select By Role” option, or add specific users under the “Select By User” option.
In each rule, you can define a message to be displayed when users without the correct account permissions try to access the form. If you leave the message blank then nothing will be displayed and the form will simply be hidden. If the form is the only thing on the page then the page will simply appear to be blank.
Submissions
If the option “Save Form Submissions” is turned on, you will see an additional option called “Submission Requirments“. This allows you the option to review form submissions before they go live on your site. Leaving it blank will save the data immediately upon form submission. If you wish to manually review the submissions before they go live, choose “Admin Approval”. The submissions will then be saved in the Submission section and you can approve or delete them yourself.
Post Options
Under the Post tab, there are several options for the post created by the form.
The first setting defines if the form should create a new post or edit an existing post. More on that below.
New Post
For “New Post” all the fields will be blank and when the user submits the form a new post is created using the data. You can also define the Post Type that the new post will have upon submission.
Edit Post
The form data is taken from an existing post and prefills all the fields. The end-user can change the data in order to edit the post.
You need to configure which post to edit, and there are three ways to do this: Current Post, URL Query, or Specific Post.
- Current Post – For this option, the form acts on the url where the form itself is being displayed. You should create a template to show the form on each relevant post. Then when the form is opened it will be editing that post. Otherwise, the form will edit the page itself.
- URL Query – Here we use a url to act on. This adds another option called “URL Query Key” where you input the key. This allows you to edit a post based on its URL parameter. We have a full article on this topic coming soon.
- Specific Post – The form will only ever edit the specified post. A new option is shown, called Select Post where you choose from a list of all the posts on your site. The form will prefill that data from that post into the fields and then the user can edit them.
User Options
User to Edit
Here we define which user’s data the form will be editing. There are several options:
- Current User – This is the user logged in and currently viewing the page.
- Current Author – The user which created the page hosting the form.
- Form Post Author – If the form is set to edit a specific post or to work via URL query, then this setting will edit the author of that post which the form is editing.
- URL Query – This allows you to edit a user based on its URL parameter. We have a full article on this topic coming soon.
- Specific User – Choose from a list of all the registered users on your site. The form will then edit the data from that user.
Term Options
For “New Term” you need to define which Taxonomy the term will be added to. This is set here.
For “Edit Term” you need to configure which term to edit. There are three options:
- Current Term – Add the form to a term archive template. Then the form will appear on all term pages and allow you to edit that term.
- URL Query – This allows you to edit a term based on its URL parameter. We have a full article on this topic coming soon.
- Specific Term – Choose from a list of all the existing terms. The form will then edit the data from that term.
Conclusion
That’s it! Make sure you press Update to save your changes and you are done. Now just copy the shortcode as mentioned above and you can paste it into your site.
You can also use the Gutenberg ACF Frontend block. Simply add the block and then choose the form in the block settings.