Search Input Box on Slider Using Flex Pro Theme

In this article I am showing how to accomplish this. Flex Pro theme have slider CPT.

Step 1: Navigate to Dashboard > Slider > Add New page and change the WP Editor mode from Visual to Text. Now create a slider post and put the following HTML markup in WP Editor.

<div class="slider-search-form">
<form role="search" action="/" class="search-form" method="get">
<label class="screen-reader-text">Search site</label>
<input type="search" placeholder="Type and press Enter" name="s">
<input type="submit" value="Search"></form>
</div>

So Edit screen will be look like this:

Note: I directly put the HTML code in editor. But you can create a shortcode for search form and enter this shortcode into the content.

Step 2: Added some CSS in style.css file for some style. I used following CSS:

/* # Search Form on Slider
------------------------------------ */
.slider-search-form {
    background: rgba(0, 0, 0, 0.55);
    display: inline-block;
    margin: 0 auto;
    padding: 7px;
    width: auto;
}

.slider-search-form input[type="search"] {
    display: inline-block;
    padding: 8px 10px 10px;
    width: auto;
}