How to create a new page with search & filter result form?

Most of websites have search and result form. No matter search or result, there are 2 popular ways to customize them. They are horizontal and vertical arrangements.

CP Live Search is one of WordPress plugins that allows you to create both search and result form.

Using CP Live Search to create a new page for search & filter result form, you have to follow 5 steps below:

Step 1: Add a new page.

  • Click “Add New Page”, then click “Edit with KingComposer”Create a new page with search filter result form template by cp live search 01

Step 2: Select the horizontal or vertical page layout

To show the page with search & filter result form in vertically page layout, just do the steps in step 2. In contrast, you would like your page in horizontally, please dismiss this step and move to step 3

  • Click “Element”Create a new page with search filter result form template by cp live search 02
  • Click tab “All”, then select “Row Inter”. Then setting row layout with 2 columns.Create a new page with search filter result form template by cp live search 11Create a new page with search filter result form template by cp live search 12
  • Click “Add Element” to add search form and result form.Create a new page with search filter result form template by cp live search 13Create a new page with search filter result form template by cp live search 14
  • You can adjust the size of the form search and form result, just drag & drop the line between the two elements.Create a new page with search filter result form template by cp live search 15

Step 3: Select the search form template

  • Click “Element”.  Create a new page with search filter result form template by cp live search 02
  • Choose tab “CPLS Form”, then you can create a new search form or choose an existing search form template (the one that you created and saved before). It had better choose the search form template as it will help you save a lot of time. You can find a guide to creating a search form template here.Create a new page with search filter result form template by cp live search 03
  • Choose your search form template and click “Save”Create a new page with search filter result form template by cp live search 04

Step 4: Select the result form template

  • Click icon “+” below “Form template” to add a new element.Create a new page with search filter result form template by cp live search 05
  • Choose tab “CPLS Result”, then you can create a new result form or choose an existing result form template (the one that you created and saved before). Like step 3, you should choose the existing result formCreate a new page with search filter result form template by cp live search 06
  • After that, you can choose result template and determine the styling your result page with many tabs such as General, Styling wrap, styling item.
    • Tab General: Choose result and setting show result.Create a new page with search filter result form template by cp live search 07Create a new page with search filter result form template by cp live search 08

With tab “Styling wrap”  you can set the number of items per line on your laptop, tablet or mobile interface.
Example 1: We will install an item per line for the desktop.

The results displayed outside the frontend will look like this.Create a new page with search filter result form template by cp live search 21
Example 2: And now we will set up 3 items per line for the desktop.Create a new page with search filter result form template by cp live search 18

The results displayed outside the frontend will be as shown belowcreate a custom search form with search fields vertically 08

    • Tab Styling wrap with styling for item per line (Desktop, tablet, mobile) and background color, advanced, border,  border radius, display, padding, margins.Create a new page with search filter result form template by cp live search 09
    • Tab Styling item indicates background color, advanced, border,  border radius, display, padding, marginsCreate a new page with search filter result form template by cp live search 10

Step 5: Click “Publish” and finish.

There is no difficulty to create a new page with the search & filter result. Bring a great search experience to customers on your website. Regardless of what areas from blog to Woo-commerce and E-commerce.

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