How To Create A Custom Search Form Page Using HTML/CSS In Oxygen Builder

In this video tutorial, we'll create a beautiful custom search form and search page using the Code Block element in Oxygen Builder, and some simple HTML and CSS.

A custom search form can be very powerful for your website or blog. It is a great way to help people find exactly what they're looking for on your site, especially if you have a lot of blog posts and pages.

Have you ever considered placing a dedicated search form on the homepage of your website or blog?

Or how about creating a full-blown custom search page, like the Google home page?

Here is a screenshot of the search form I use over on my blog at Magnet4Blogging. I have over 300 posts and 50 pages on my blog, so a custom search form is essential for my users.

Looks pretty neat, don't you think?

If you look closely, you'll notice that I also have some custom links/keywords to articles that people tend to search the most.

In the video tutorial below, I show you how to create this for your own blog or website.

Video Coming Soon...

Remember: Your form will not work correctly if you have not created a custom search results page template for your site in Oxygen Builder. Check out this tutorial to learn how to do this first.

Form HTML Code

Here is the code snippet that you will need to place inside a Code Block element in Oxygen Builder. I recommend placing this inside of a section and div.

<div class="container-search"> <div class="custom-home-search">
 <form role="search" method="get" id="searchform" class="searchform" action="#">
   <label class="screen-reader-text" for="s"></label>
   <i class="fa fa-search searchIcon"></i>
   <input type="text" placeholder="Enter your keywords" value name="s" id="s">
   <input type="submit" id="searchsubmit" value="Search">
  </form>
 </div>
</div> 

Note: The <label> is optional, you do not need to include this in your form if you don't want to use a label. See video for more info.

Don't forget to replace the # with your own website URL.

Form CSS Code

Here is the CSS code snippet for the form above. Feel free to modify the code to match the style of your website.

/* CUSTOM HOME SEARCH
CONTAINER
--------------------*/
 .container-search {
    padding: 15px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
 }

/* INPUT TEXT AREA
------------------*/
 .custom-home-search input {
    border: none;
    width: 80%;
 }

/* SUBMIT BUTTON CSS
--------------------*/
 .custom-home-search input[type=submit] {
    background: black;
    color: #fff;
    width: 15%;
    padding: 20px;
    border-radius: 5px;
 }

/* SUBMIT BUTTON HOVER EFFECT
-----------------------------*/
 .custom-home-search input[type=submit]:hover {
    background: #grey;
    transition: .3s;
 }

/* SEARCH ICON CSS
------------------*/
 .searchIcon {
    margin-right: 5px;
 } 

Links To Resources

Here is a list of links to the software, plugins, and resources used in this video tutorial.

• Oxygen Builder: https://oxygenbuilder.com
• Local By Flywheel: https://localbyflywheel.com/
• Oxy Class Act: https://oxyplugins.com/
• Icons: https://fontawesome.com/

Code For Font Awesome Search Icon

Here is the resource code for adding to your HTML template for displaying the search icon from Font Awesome.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Any questions?

Do you have any questions? Feel free to either get in touch with me via my contact page or leave me a comment in one of my video tutorials over on YouTube. I'll try and assist you the best I can.

Please note: I'm not affiliated or associated with Oxygen Builder (Soflyy) Oxygen Builder or Oxyplugins (OxyPlugins). If you have any technical questions about their software/plugins, you should approach the respective developer.

More Tutorials

If you want to check out more Oxygen Builder Video Tutorials like this, you can head over to my YouTube channel here.