Build the search form layout

After adding the search tools to your form, you will have to build the form layout. Building the search form layout means that you need to add and place every field (also called widgets) somewhere inside your search form.

The plugin comes with its own layout builder which will give you more control over your form layout and will allow you to build multiple search form with different layouts, shapes etc… The possibilities are limitless.

Inside the search form, there are four areas, also called grids. Each grid is a row (devided into 12 columns) where you can put fields and/or buttons (widgets).

A widget is the field container and it contains the field label, the field description and the field input (select, checkbox, radio, etc…)

Bulding the search form

To build your search form, follow these instructions:

  1. Edit your search form
  2. Click on the menu “Form layout”
  3. First, scroll down to field “Widget wrap minimum height” and specifcy the minimum height a widget will occupy inside a form grid/area. The minimum height you specify, the more control you’ll have over your widgets/fields!
  4. In the field “Widget wrap inside padding”, specify the widget’s inside padding. Please note that the padding will not increase the size of the widget’s height. So if you have set the “Widget wrap minimum height” to 60px and the inside padding to 20px, when displaying the form, the widget minimum height will be 60px!
  5. Save your settings
  6. Always in the same menu, go to the field “Form layout” and open the select list titled “Select a widget/field”. This list contains all possible fields you can add to your search form.
    1. Select a widget/field from this list. Once selected, you will see a new widget representing your field added to the first form area/grid.
    2. Drag the widget to another form area if you need to but for this example, we’ll assume that you’ll leave it there. Also, notice that the widget/field height eaquals the value you’ve previously set in the setting “Widget wrap minimum height”!
    3. By default, when adding a new field to a form grid/area, this will occupy 3 columns out of 12 columns of the grid. If you need to resize the widget (horizontally and/or vertically), use the bottom left and the bottom right arrows to resize it.
    4. You may need to save your search form to see the end result so you can have a general idea about how the from layout builder works.
    5. Add other widgets/fields to the form and repeat the same steps above (A, B and C)

Important notes!

  • It’s not necessary to add fields to all form grids/areas. You can use one form grid to display all your fields!
  • The blue grid/area is called “The collapsible form area”. All widgets/fields added to this area will be hidden when loading the form. The user will have the possibility to open and close this area to display all widgets/fields within. To allow this, you’ll have to add the link or the button that open and close the collapsible form area. In the widgets/fields select list, the link is called “Toggle collapsible area (link)” and the button is called “Toggle collapsible area (button)”.
  • The widget called “Empty widget” is a widget that you can use to fill a gap between two widgets/fields.
  • All widgets/fields can only be added once to the search form.