Add Categories Taxonomy Field in Post Forms

Fluent Forms offers Taxonomy Fields that allow you to group your posts based on categories, tags, and other taxonomies available on your WordPress site.

NOTE

Taxonomy Fields are available only in Post Forms. See How to Create a Post Form with Fluent Forms.

This article will guide you through adding the Categories Taxonomy Field in your Fluent Forms for your WordPress Site. This Categories field will allow your users to select any of your existing categories and submit their posts under the selected category directly through the form. To let users assign keywords as well, add the Tags Taxonomy Field.

Add Categories Field

Go to Forms from the Fluent Forms navbar, select your Post Form, and click Edit to open the form editor.

Once you are on the Editor page, go to the Input Fields on the right sidebar and open the Taxonomy Fields dropdown list by clicking the Arrow Icon. Now, choose the Categories field by clicking on it or Drag & Drop it into your editor.

Customize Categories Field

You can see that a Categories field is added to the form. You can Edit or Customize this field by hovering over it and clicking the Pencil Icon.

It will take you to the Input Customization tab on the right side and offer you the following options for customizing the field.

1. Categories

2. Advanced Options

1. Categories Option

Configure Categories labels, taxonomy display type, and validation:

A. Element Label: This is the field Content that the users will see when filling out the Categories field in a form. You can enter any text here to help users understand the purpose of the field.

B. Label Placement: Using this option, you can determine the position of the label Content where the user will see this. The available options are Top, Right, Bottom, Left, Hide Label, and Default. All of those are self-explanatory except the Default. If you select the Default option, it will represent your global label placement settings.

C. Admin Field Label: The admin field label is a field that is displayed only to admin users. That means, if you want to show a different field label for your admin users when they view the form submissions, you can configure that using this option.

D. Placeholder: Here, you can set a desired text to guide your users about the purpose of the field. It is the equivalent of the HTML input placeholder attribute. The user will see this text when the input field is empty.

E. Required: Select the Yes radio button to make this field mandatory for users to fill in for successful form submission. Otherwise, check the No radio button to keep this field optional to fill in.

F. Taxonomy Field Type: Here, you will get Four different options to display your Categories Taxonomy Field. These are:

• Radio: Select this option if you want to display the category selection as a radio button, allowing users to choose one category from all available options.

• Select: Select this option if you want to display the category selection as a dropdown list button, allowing users to choose one category from all available options.

• Multi-Select: Select this option if you want to display the category selection as a dropdown list button, allowing users to choose one or more categories from all available options.

• Checkbox: Select this option if you want to display the category selection as a checkbox, allowing users to choose one or more categories from all available options.

2. Advanced Options

Configure Advanced options:

A. Default Value: You can set a default value here to pre-populate the value of a field and enter it here. You can also set the value by using the SmartCodes. To learn the details about SmartCodes, read this Documentation.

B. Container Class: Use this option to add your custom CSS classes to the field’s wrapper.

C. Element Class: Add custom CSS classes to the input field itself. This is used for adding Custom CSS/JS for a specific input field of a form.

D. Help Message: You can use this option to guide your user thoroughly. Add your text here, which will be shown as a help message to the user. To learn more, read this Documentation.

E. Name Attribute: The input field’s name attribute is the HTML equivalent of the same name. You don’t need to modify this.

F. Conditional Logic: This option allows the Categories field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this Documentation.

Configure Post Feed Settings

Lastly, configuring the Post Feed is mandatory to make your Post Form functional. It helps you map your added post fields for data collection and allows users to create more customized posts.

Configure the Post Feed with all its settings options to complete the Post Feed Configuration process.

Embed the Form into Frontend

To embed and display the form on a specific Page/Post on your site, copy the Shortcode from the top right side and paste it into your desired Page/Post.

Once you complete the customization, click the Save Form button to save all your changes. Also, to see the form preview, click the Preview & Design button in the middle.

Preview of Categories field

Here is the preview of the added Categories field under the Post Form. Now, click the Arrow Icon to view all available categories on your site and select the one you need.

This way, you can easily add the Categories fields in Fluent Forms!