How to create a custom search form with search fields horizontally?

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.

create a custom search form with search fields horizontally 01

 

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.

create a custom search form with search fields horizontally 02

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.create a custom search form with search fields vertically 01
  • Click “Edit with KingComposer”.create a custom search result form 01

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”create a custom search form with search fields vertically 03
  • Choose tab “CPLS Form” and click “Form search” to build a custom search form template.
  • create a custom search form by cp live search 01
  • 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.create a custom search form with search fields vertically 05
  • Click tab “All”, then select “Row Inter”, after that setting row layout with 2 or 3 or 4 or 5 or 6 columns.create a custom search form with search fields horizontally 07
  • Setting Row layoutscreate a custom search form with search fields horizontally 03
  • It had better select from 4 to 6 columns for custom fields. You can see a demo for setting row layouts with 4 columns.create a custom search form with search fields horizontally 04
  • 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.create a custom search form with search fields vertically 03
  • Beside basic fields, CP Live Search crafted the advanced one to maximize the compatibility to your current business.create a custom search form by cp live search 02
  • You can adjust the size of the form search and form result, just drag & drop the line between the two elements.create a custom search form with search fields horizontally 05

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.create a custom search form by cp live search 3

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.

 

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href=""> <abbr> <acronym> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Send a Message