Here are steps to add internal site search using HTML code for free.

  1. Add the following code to your website.
    <!DOCTYPE html>
    <html>
    <head>
    
    <style type="text/css">
    	#header{
    		background-color:transparent;
    	}
    	#searchform{
    		float:right;
    		padding:20px;
    	}
    	.search-text{
    		margin: 0;
    		padding: 5px 15px;
    		font-family: Arial, Helvetica, sans-serif;
    		font-size:14px;
    		border:1px solid #0076a3; border-right:0px;
    		border-top-left-radius: 5px 5px;
    		border-bottom-left-radius: 5px 5px;
        color:red;
    	}
    	.search-button {
    		margin: 0;
    		padding: 5px 15px;
    		font-family: Arial, Helvetica, sans-serif;
    		font-size:14px;
    		outline: none;
    		cursor: pointer;
    		text-align: center;
    		text-decoration: none;
    		color: #ffffff;
        border:1px solid orange;
    		
    		background: orange;
    		
    		
    		border-top-right-radius: 5px 5px;
    		border-bottom-right-radius: 5px 5px;
    	}
    	.search-button:hover {
    		text-decoration: none;
    		background: #007ead;
    		
    	}
    	/* Fixes submit button height problem in Firefox */
    	.search-button::-moz-focus-inner {
    	  border: 0;
    	}
    	.clear{
    		clear:both;
    	}
    </style>
    </head>
    <body>
    	<!-- HTML for SEARCH BAR -->
    	<div id="header">
    		<form id="searchform" method="get" action="http://www.google.com">
    		        <input type="text" class="search-text" name="q" size="21" maxlength="120"><input type="submit" value="&#x1F50D" class="search-button">
    		</form>
    	<div class="clear"></div>
    	</div>
    </body>
    </html>
    
    
    

     

  2. You can edit the positioning by editing the search form code .
  3. You can change the look and feel of the search text by editing the code under search-text
  4. You can change the look and feel of the search button by editing the code under search-button
  5. You can change the look and feel of the search button hover by editing the code under search-button:hover

Here is a snapshot of the search box after pasting the code on your website

muthali ganesh

Muthali loves writing about emerging technologies and easy solutions for complex tech issues. You can reach out to him through chat or by raising a support ticket on the left hand side of the page.

You may also like