You are surfing on many websites and realize that they have a convenient search form which allows users search information or product easily?
You greatly want to update your website with an advanced search form like that. The search form can align horizontally
In addition, the search form should combine advanced features such as calculations, auto-suggest, save search history and more.
You think it may require a lot of effort. But wait, all you need to create a custom search form with search field horizontally is CP Live Search.
CP Live Search is one among best WordPress plugins that help you to make your own search form just a few minutes. This plugin can bring your customers a better experience and value on your website.
Before you see the documentation for creating the search form with the search fields horizontally, make sure you have the CP Live search plugin installed.
After installing and running the CP Live search plugin, it’s easy to create the search form with the search fields horizontally.
Step 1: Add new a custom search form.
- In the administration interface, hover over the CP Live Search plugin, choose “Form Templates” to select the search templates available or click “Add new” to create a custom search form template.
- Click “Edit with KingComposer”.
Step 2: Setting horizontal page layout
To show the search result in horizontal page layout, you need to split the search results into two columns.
- Click “Add element”
- Choose tab “CPLS Form” and click “Form search” to build a custom search form template.
- After click “Form search”, hover over the “Form search” element and click “edit this element” to setting “post type result” to search by page/post with the post title, post date, post status, post author or attachment or product or custom fields, etc.
- Click tab “All”, then select “Row Inter”, after that setting row layout with 2 or 3 or 4 or 5 or 6 columns.
- Setting Row layouts
- It had better select from 4 to 6 columns for custom fields. You can see a demo for setting row layouts with 4 columns.
- Click “Add element” and select the appropriate elements with elements such as input textbox, radio, check box, select box, slide range, date picker, color picker, image select, rate, button.
- Beside basic fields, CP Live Search crafted the advanced one to maximize the compatibility to your current business.
- You can adjust the size of the form search and form result, just drag & drop the line between the two elements.
Step 3: Add element “Button” to search form can search for information.
- After adding the elements that match your search form template, remember to always add element “Button“, if you DON’T add element “Button”, the search form will show in the frontend not be searchable.
Step 4: Click “Publish” to finish and save the search form template. Just by one click you can use search form template anytime and anywhere on your website.
Create as many search form templates as your customer search demands, improving the search experience for your customers with CP Live Search.
You can see demo “Build search form template with search fields vertically” here for your search form templates.