Stand with Ukraine. Fight for freedom and democracy


Hierarchical Select Addon

A form-enriching tweak that allows you to output cascading dropdown lists in the Select field.

Buy from $49
hierarchical select field in the form

Works with any WordPress theme

Order the child taxonomy terms

Hierarchical Select is a JetFormBuilder plugin adding a new field type/block to the WordPress website. Use it to showcase a Select field group in the form, where child terms are taken from a parent hierarchical taxonomy and displayed as cascading dropdown lists. It is particularly useful to add Hierarchical Select to the post submitting/editing forms.

hierarchical taxonomy select field in the form

Hierarchical Select Use Cases

hierarchical select field in the form
Car submission form

Submit new ads to the car dealer website through a post submission form and use the Hierarchy Select to organize such car specifications as make, brand, model, etc.

Product updating

Use the Hierarchical Select block when updating the product details pertaining to multi-level hierarchy like Men > Collection > Jeans.

Vacancy application

Add Hierarchical Select to the job application form and allow the applicants to pick the preferred company type, job position, and vacancy type.

Explore Functionality

Ability to add new terms
Add new terms according to the names provided in the Text fields respecting the taxonomy hierarchy.
Hierarchical taxonomy output
You can only choose a hierarchical taxonomy as a source to pull the term values from.
Term value updating
Update the existing term values in the post and taxonomy levels in the post-submit actions.

Unlock All Addon Options

Hierarchical Select field

Add a block to create a multi-level select fields structure.

Field label

Provide a custom field label for the Hierarchical Select field block.

Form field name

Edit the Hierarchical Select field slug if needed.

Field description

Use inline editing to add a description to the field.

Default value

Provide the value that would be shown by default.

 hierarchical select field options
Taxonomy type

A Select field where you pick the needed hierarchical taxonomy.

Term value from

Pick the needed option to pull the term data from its ID, Name, Slug, or Meta.

“Edit Levels” button

Use it to edit and add new hierarchy levels as options of the Select field.

Get calculated value from term meta

Activate the toggle to use a different numerical value but the term meta.

Get JetFormBuilder to Resolve Form Issues

or try JetFormBuilder free version

How to Configure Hierarchical Select

How to set up

Navigate to JetFormBuilder > Addons and discover the “Hierarchical Select” addon in the All Available Addons section to install the addon. Press the “Install Addon” button and, once installed, it will appear on Your Installed Addons. Next, click “Activate Addon” to get it ready for further work.

 hierarchical select addon installation and activation

As you can see, all PRO version addons can be easily installed and activated via JetFormBuilder Dashboard.

After installing and activating the plugin, a WordPress block called “Hierarchical Select” will appear in the JetFormBuilder blocks.

Hierarchical Select Settings

Proceed to JetFormBuilder > Forms and open the existing form or create a new one. Click on the “Add block” button and choose the Hierarchical Select block.

hierarchical select block in jetformbuilder blocks

Let’s go over the Hierarchical Select add-on’s settings:

  • Taxonomy type. In this drop-down select, you can pick the needed taxonomy. Since this add-on has been created for hierarchical taxonomies (categories), you cannot select tags;
  • Term value from. Pick the data that will be used as values:
    • Term ID;
    • Term Name;
    • Term Slug;
    • Term Meta: If you choose the “Term Meta” option, you should specify the meta field name in the Term’s meta field key/ID field.
  • Get calculated value from term meta. This option allows getting values for the Calculated Field. Be aware that if you turn on this option, the Enable manual input feature won’t work;
    • If you enable the previous toggle, you should specify the meta field key/ID in the Term’s meta field key/ID for calculated value field.
hierarchical select settings

After finishing the settings, hit the “Edit Levels” button. In the new pop-up window, we have such settings:

  • Safe deleting. When you click on the “Delete” button, you can receive a notification message that asks you one last time if you are sure about that. This measure can help if you have hit the deletion button by accident. That notification can be disabled by turning off the Safe deleting toggle;
  • Name. If you click on this field, a level will be named by default, but you can change the name. Just be aware that all level names in the whole form must not be repeated;
  • Label. It is the title of the field that will be shown to users in the form;
  • Placeholder. It is a text displayed in the Select field before you choose any option;
  • Description. It is a piece of additional information to notify about the selector level purpose;
  • Add new level. With this button, you can create as many levels as you need;
  • Enable manual input. You can add a new term via the form with this option. Read more about it a little further.
edit levels settings

Then, set the Post Submit Action, push the “Publish” or “Update” buttons, add the form to the page if you haven’t done it yet, and check out how it looks on the front end.

How does the Preset feature work

You need to set the Preset Settings to edit posts via the form. Proceed to the Preset Settings section and select the “Post Term” option and the taxonomy name for your first level of a hierarchical taxonomy.

preset settings

When a preset is set up and the preset term has child terms, the entire hierarchy of terms is displayed in the form fields on the front end. Otherwise, if the Enable manual input option is enabled, the Text field will be rendered instead of the Select field with the child terms. Only one branch will be displayed if a post has multiple branches.

form with the preset settings in the post
How to create new terms via the form

You can do this with the Enable manual input option. This option is available for the second and upper levels. If the previous term doesn’t have any child terms, you or users can create a new term manually while, e.g., creating or editing a post. After that, the Text field in the form will be changed to the Select field, and a new term will appear in the taxonomy.

manual input on the front end

Be aware that you should select the “Insert/Update Post” Post Submit Action and choose the “Post Term” option and the taxonomy name to add new terms to the Fields Map.

 insert/update post post submit action
How to update post terms via the form

For that, you should select the “Term ID” option in the Term value from field and choose the levels from which you want to save terms for the post in the “Insert/Update Post” Post Submit Action.

How can I set the Calculated Field for such a form

For the Hierarchical Select field, you need to enter the %FIELD::quantity% macro in the Calculated Field. Replace the “quantity” with the name of the level. You need to enter separate macros for every level with the value into the formula.

calculated field

As you can see on the screenshot below, the “Coupons” term has a “10” value, and the “40%” term has a “40” value. With the addition of the formula in the Calculated Field, we have gotten a “50%” discount as a sum.

calculated field on the front end
Tip: Hierarchical Select supports some PHP hooks allowing you to customize the term arguments and parameters:
  • jet-form-builder/hr-select/taxonomies-list – changes the first argument when calling the get_taxonomies function;
  • jet-form-builder/hr-select/query-terms-params – use it to change the arguments of terms reception and query a field object storing all settings in the block_attrs field;
  • jet-form-builder/hr-select/prepare-terms – allows custom processing of the received terms and returns the parent term ID and field object parameters.

The WordPress Way
to Build Forms

Buy JetFormBuilder Pro – get all Addons at once

Explore more Addons

Limit Form Responses

A lightweight addon to control the overall number of form submissions and those per user.

Learn morepro

MailerLite Action

A top-notch addon to bring your email marketing to the next level.

Learn morepro

ConvertKit Action

An email marketing addon to ensure higher audience reach and income from mailing lists.

Learn morepro