Search Form

Search Form lets visitors search the site and offers configurable autocomplete results. It includes separate styling for the form, input, toggle, results, and modal presentation.

Add and configure Search Form

1. Click Add, choose Search Form, and place it in the container.
2. Set Content > Content > Placeholder and Icon.
3. Choose Limit To Post Type if the search should focus on a particular content type.
4. Configure Autocomplete, then style Design > Form, Input, Toggle, Results, and Modal.
5. Save your changes.

This element has no children; use its own controls.

Controls

Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”

Content > Content

Setting	Purpose and options	Behavior
Placeholder	Enter the placeholder.	Shared
Icon	Icon.	Shared
Limit To Post Type	Choose an available limit to post type from the list.	Shared
Autocomplete > Enabled	On/off.	Shared

Shown when Enabled is set.

Setting	Purpose and options	Behavior
Autocomplete > Minimum Characters	Set minimum characters. Range: 1–10.	Shared
Autocomplete > Max Results	Set max results. Range: 1–10.	Shared
Autocomplete > Result Item Block	Existing Global Block.	Shared
Autocomplete > No Results Block	Existing Global Block.	Shared

Design > Form

Setting	Purpose and options	Behavior
Mode	Inline, Modal.	Shared
Toggle Style	Icon, Field. When: Mode = Modal.	Shared
Modal Position	Center, Top. When: Mode = Modal.	Shared
Icon Position	Left, Right.	Shared
Width	Width.	Responsive

Design > Input

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Text Color	Visible text.	Shared
Placeholder Color	Color or supported fill.	Shared
Icon Color	Color or supported fill.	Shared
Icon Size	Icon size and unit.	Responsive
Typography	typography controls.	See linked controls
Borders	borders controls.	See linked controls
Padding	spacing controls.	See linked controls
Focused > Background	Color or supported fill.	Shared
Focused > Border	Color or supported fill.	Shared
Focused > Shadow	Shadow offset, blur, spread, color.	Shared

Design > Toggle

Shown when Mode = Modal.

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Hover
Color	Color or supported fill.	Hover
Icon Size	Icon size and unit.	Responsive
Typography	typography controls.	See linked controls
Borders	borders controls.	See linked controls
Padding	spacing controls.	See linked controls
Border	Color or supported fill.	Hover

Design > Results

Shown when Enabled is set.

Setting	Purpose and options	Behavior
Background	Color or supported fill.	Shared
Borders	borders controls.	See linked controls
Padding	spacing controls.	See linked controls
Shadow	Shadow offset, blur, spread, color.	Shared
Max Height	Max height and unit.	Responsive
Offset From Input	Offset from input and unit.	Responsive
Item > Background	Color or supported fill.	Hover
Item > Text Color	Visible text.	Hover
Item > Typography	typography controls.	See linked controls
Item > Padding	spacing controls.	See linked controls
Item > Gap	Space between items.	Responsive
Item > Image Size	Image size and unit.	Responsive
Item > Image Radius	Image radius and unit.	Responsive
Empty Text Color	Color or supported fill.	Shared

Design > Modal

Shown when Mode = Modal.

Setting	Purpose and options	Behavior
Backdrop	Color or supported fill.	Shared
Panel Background	Color or supported fill.	Shared
Max Width	Max width and unit.	Responsive
Panel Padding	spacing controls.	See linked controls
Panel Borders	borders controls.	See linked controls
Panel Shadow	Shadow offset, blur, spread, color.	Shared
Close Button Color	Color or supported fill.	Shared

Troubleshooting