How to build a collapsing menu for my order form?

If you are selling different categories of products or services, you can improve the structure of your online order form by using a collapsing menu.

How to build your collapsing order form menu? In a few easy steps. For example purposes, we will assume there are three categories of products or services, each with its own suboptions.

  • In the Form Editor, add six Checkbox fields to your order form: three containing a single option that designates the category name, and three listing the options available in each category.
  • 123formbuilder create collapsing menu

  • Align field labels to the top (Form LayoutLabel PlacementTop Aligned).
  • 123formbuilder create collapsing menu

  • Preview your order form and inspect its elements using your browser inspection tool. Retrieve the IDs of the category name checkboxes. They are of the type: id123-control2757489_0
  • 123formbuilder create collapsing menu 123formbuilder create collapsing menu
  • Go to the SettingsThemesUse Custom CSSCode section and hide the three checkboxes using CSS. Copy/paste the following code: #id123-control2757489_0, #id123-control2757491_0, #id123-control2757493_0 {display:none;}, replace the IDs with the ones retrieved from your form and click Save.
  • 123formbuilder create collapsing menurowsec2.

    123formbuilder create collapsing menu

  • Back to the Use Custom CSS, make the category names bold. Use the following code: #rowsec1, #rowsec3, #rowsec5 {font-weight:bold;} and replace the IDs with the ones referring to the category names in your form.
  • Now it’s time to make the suboption sections scrollable. Use the following code: #rowsec2, #rowsec4, #rowsec6 {height:150px; overflow-y:auto; border:1px solid #ccc;} and replace the IDs with the ones referring to the suboption fields in your form. And you’re done with the CSS.
  • 123formbuilder create collapsing menu

  • In the SettingsRulesField Rules section, set up the form conditional logic that will make suboptions show only when a category is clicked on. You will need three field rules, like the ones below:

  • All that is left to do is return to your Form Editor and delete the field labels for all the six fields.

Leave a Reply

Your email address will not be published. Required fields are marked *

This website is using cookies. By continuing to browse, you are
agreeing to our use of cookies as explained in our Cookie Policy. OK