Search Form
A search field with a button, or a search icon that opens a full-screen search, with optional live results.
On this page
The Search Form widget adds your site's search. Show it as a field with a button, for example on a 404 page or a blog sidebar, or as a small search icon for your header that opens a full-screen search. With Live results on, matching pages and posts appear under the field while the visitor types.
Add a Search Form
Open Insert in the left panel and find Search Form in the Site & theme group, or type "search" in the search box. Drag it onto the canvas, or click it to add it next to the selected element. See Add elements.
Searches use WordPress's own search. The results page uses your search results template from the Theme Builder if you have one, or your theme's.
Choose a layout
- Field and button shows the search field in the page. Pick the Button: an Icon, Text, Icon and text or None (visitors press Enter).
- Icon with full-screen overlay shows only a search icon, which suits headers. A click opens a full-screen search; Esc closes it.
Show live results
Turn on Live results to list matching pages and posts under the field while the visitor types, with their featured images and, if you like, excerpts. Visitors can move through the results with the arrow keys and open one with Enter. "See all results" link leads to the full results page. Limit what is searched with Search in (all content, posts or pages).
Content tab settings
| Setting | What it does |
|---|---|
| Layout | Field and button or Icon with full-screen overlay. Default: Field and button. |
| Placeholder | The hint text in the field. Default: Search…. |
| Field label | Read by screen readers; shown above the field when Show label is on. Default: Search. |
| Show label | Shows the field label. |
| Button | Icon, Text, Icon and text or None. Default: Icon. |
| Button text | Default: Search. Shown when the button has text. |
| Button icon | Default: a magnifying glass. Shown when the button has an icon. |
| Search in | All content, Posts or Pages. |
| Live results | Lists matching pages and posts under the field while the visitor types. |
| Number of results | 1–10. Default: 5. Shown when Live results is on. |
| Show featured images | On by default. Shown when Live results is on. |
| Show excerpts | Shown when Live results is on. |
| "See all results" link | On by default. Shown when Live results is on. |
| Toggle icon | The icon that opens the overlay. Default: a magnifying glass. Shown for the overlay layout. |
| Toggle label | The name screen readers announce for that icon. Default: Open search. Shown for the overlay layout. |
| Alignment | Left, Center or Right for the icon. Can differ per device. Shown for the overlay layout. |
Design tab settings
| Section | Settings |
|---|---|
| Field | Max width, Height, Typography. Text color, Placeholder color, Background, Border and Shadow on the Normal tab; Background, Border color and Focus ring on the Focus tab. Border radius, Padding. |
| Label | Typography, Color, Spacing. Shown when Show label is on. |
| Button | Typography, Text color and Background (with Normal and Hover tabs), Icon size, Min width, Padding, Border radius, Space from the field. Shown when there is a button. |
| Live results | Title typography, Background, Text color, Highlighted result, Border, Border radius, Shadow, Image size. Shown when Live results is on. |
| Toggle icon | Size, Color and Background (with Normal and Hover tabs), Padding, Border radius. Shown for the overlay layout. |
| Overlay | Background, Text color, Form width, Input typography, Close button color. Shown for the overlay layout. |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares: anchor and classes, entrance animations, motion effects, visibility per device, display conditions and interactions. See Visibility.
Tips
- A search field on your 404 page helps visitors who followed a broken link. See 404 page.
- Live results only list published, public content. Drafts, private items and password-protected posts never appear.