The Porto Search Form element is a powerful and highly customizable search component designed to enhance user experience and provide fast, accurate product or content search results. It’s one of the most essential elements of any website, allowing visitors to quickly find what they need using an elegant and fully responsive search interface.
Unlike the default header search configured in Theme Options, the Porto Search Form Element takes higher priority when added to a Header or Block layout. This means any settings applied within the widget will override the global theme search settings, allowing you to design multiple unique search bars with independent behavior and appearance across different headers or sections of your site.
The element now also includes a Content Select Option, which lets you define different search mechanisms for different search forms. For instance, one search bar can be configured to search Products, while another focuses on Posts, Portfolios, or Custom Post Types—giving you full flexibility over your site’s search experience.
How to Use the Porto Search Form Element
- Create or choose the column where you want to add your element. Click Add New Element.
- From the element list, select Porto Search Form.
- Configure the search element’s content options, such as placeholder text, icon size, or category filters.
- Choose your desired Content Type to define what type of content will be searchable (e.g., Products, Posts, Portfolios).
- Customize the design and style settings to match your website’s layout and color scheme.
- Save your configuration and refresh the page to ensure your new search form is active and functional.
Element Content Options
| Option | Description |
|---|---|
| Placeholder Text | Text displayed inside the search box before the user starts typing. |
| Show Category Filter | Enables or disables category-based search filtering. When enabled, users can choose a specific product category before searching. |
| Search Layout | Control the layout of search form. |
| Popup Position | Sets the dropdown position (e.g., Left, Right, or Center) when search suggestions or filters appear. |
| Toggle Icon Size | Controls the size of the search icon for visual balance. |
| Toggle Icon Color | Adjusts the color of the search icon to match your header design. |
| Input Box Width | Defines the width of the search input field. |
| Height | Controls the overall height of the search form element. |
| Border Width | Sets the border thickness around the search box. |
| Border Color | Defines the border color of the search input. |
| Border Radius | Adjusts the roundness of the search box corners for a modern or classic look. |
| Separator Color | Specifies the color of separators used in the search form (e.g., between icon and input). |
| Content Type | Select what type of content the search form will query. Options include Products, Posts, Portfolios, or Custom Post Types. Each search form can have its own content type for targeted searching. |
| More Options | In addition to above options, there are many options to adjust typography, color, padding and more! |
Additional Tips
- Use separate Porto Search Form Elements for different header sections if you want one search form to query products and another to query blog posts.
- When adding multiple search forms on the same page, assign unique Extra Class Names for better control via custom CSS.
- Combine with Porto’s Live Search feature for instant results without page reloads.
