3 Best Modern and Attractive Blogger Search Forms

Search form is one of the most important blog component. Therefore, you need to beautify your search form to make your blog looks more attractive. Today, I want to share my 3 best modern and attractive blogger search form for you. Don't forget to adjust your choice with your web design!

1. Bordered-Animated Flat Search Form

This search form design is pretty cool and lightweight. It will extend its width size automatically and animatedly when it's focus. The placeholder is also responsive. When it's not in focus mode, it will show "Find here!" text. While when it's in focus mode, it will show "What are you looking for?" text.

HTML Code

---

 <div id="search-box">  
 <form action="/search" id="cse-search-box" method="get">  
 <input id="search-text1a" name="q" onblur="if (this.placeholder == &quot;What are you looking for?&quot;) {this.placeholder = &quot;Find here!&quot;;}" onfocus="if (this.value == &quot;&quot;) {this.placeholder = &quot;What are you looking for?&quot;}" placeholder="Find here!" type="text">  
 <button id="search-button1a" type="submit"></button>  
 <div class="clear"></div>  
 </form>  
 </div>  

CSS Code

---

 <style>  
 input#search-text1a:focus {  
   width: 240px;  
   border: 3px solid black;  
   outline-width:0;  
 }  
 input#search-text1a {  
   height: 32px;  
   font-size: inherit;  
   padding-left: 10px;  
   transition: 0.4s;  
   border: 3px solid red;  
   -webkit-print-color-adjust: red;  
   width: 130px;  
 }  
 button#search-button1a {  
   cursor:pointer;  
   height: 40px;  
   position: absolute;  
   margin-left: -31px;  
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV4m148BbR_IjhhIrjIngehvQVte9UPZeTQB9qnsiGH0QTfYys4QXhhhiFs-SoTvsCp0ZhkoISfQccqHs28AybEMVDJ_ibiTj8fzgv7nSKC8rLKnfqj7eHH0W3MVzmzPb-X88jlQ8qR9Y/h120/searchbutton.png);  
   background-repeat: no-repeat;  
   background-color: transparent;  
   border: none;  
   background-size: 20px;  
   margin-top: 9px;  
   width: 20px;  
 }  
 </style>  

RECOMMENDED preferences

---

• Input box width size when it's in focus - replace the red colored number (default is 240) with the amount you want. 
• Border color when input box is in focus - replace the orange colored text (default is black) with the color you want for the border when it's in focus.
• Bored color when input box is not in focus - replace the pink colored text (default is red) with the color you want for the border when it's not in focus.
• Input box width size when it's not in focus - replace the blue colored number (default is 130) with the amount you want. 

Tip: just suits everything with your template.

2. Fulfill-Animated Flat Search Form

It's inverted version of the first listed search form. This search form has colored background instead of colored border.

HTML Code

---

 <div id="search-box">  
 <form action="/search" id="cse-search-box" method="get">  
 <input id="search-text2" name="q" onblur="if (this.placeholder == &quot;What are you looking for?&quot;) {this.placeholder = &quot;Find here!&quot;;}" onfocus="if (this.value == &quot;&quot;) {this.placeholder = &quot;What are you looking for?&quot;}" placeholder="Find here!" type="text">  
 <button id="search-button2" type="submit"></button>  
 <div class="clear"></div>  
 </form>  
 </div>  

CSS Code

---

 <style>  
 ::-webkit-input-placeholder {  
   color:white;  
 }  
 input#search-text2:focus {  
   width: 240px;  
   outline-width:0;  
 }  
 input#search-text2 {  
   height: 40px;  
   font-size: inherit;  
   padding-left: 10px;  
   transition: 0.4s;  
   border: none;  
   width: 130px;  
   background:black;  
 }  
 button#search-button2 {  
   cursor:pointer;  
   height: 40px;  
   position: absolute;  
   margin-left: -31px;  
   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiRr37YpGbyMnra1AtJ-61gF-lfYpGpixEjSIlOyF6Bsz8mBWttO5CvWB3s7bp4f1i18QaWs3YkMBdpFaYuNKSUUAyDIsuzdRWixkqnCcr3X0LwsHhFEnsru5XlnQ4d8yvue-3SBt9OzM/h120/searchwhite.png);  
   background-repeat: no-repeat;  
   background-color: transparent;  
   border: none;  
   background-size: 20px;  
   margin-top: 9px;  
   width: 20px;  
 }  
 </style>  

RECOMMENDED preferences

---

• Input box width size when it's in focus - replace the red colored number (default is 240) with the amount you want. 
• Input box width size when it's not in focus - replace the orange colored number (default is 130) with the amount you want. 
• Background color - replace the blue colored text (default is black) with the color you want.

Tip: just suits everything with your template.

3. No-Search-Button Animated Search Form

It's similar to the first listed search form. The difference is, this search form doesn't use any search button. It used the enter key for submitting the keyword. And a little placeholder difference, which it will show "Type keyword and press enter!" text when it's in focus mode. It's great for guiding someone.

HTML Code

---

 <div id="search-box">  
 <form action="/search" id="cse-search-box" method="get">  
 <input id="search-text3" name="q" onblur="if (this.placeholder == &quot;Type keyword and press enter!&quot;) {this.placeholder = &quot;Find here!&quot;;}" onfocus="if (this.value == &quot;&quot;) {this.placeholder = &quot;Type keyword and press enter!&quot;}" placeholder="Find here!" type="text">  
 <div class="clear"></div>  
 </form>  
 </div>  

CSS Code

---

 <style>  
 input#search-text3:focus {  
   width: 250px;  
   border: 3px solid black;  
   outline-width:0;  
 }  
 input#search-text3 {  
   height: 40px;  
   font-size: inherit;  
   padding-left: 10px;  
   transition: 0.4s;  
   border: 3px solid red;  
   -webkit-print-color-adjust: red;  
   width: 130px;  
 }  
 </style>  

RECOMMENDED preferences

---

• Input box width size when it's in focus - replace the red colored number (default: 250) with the amount you want.
• Border color when input box is in focus - replace the orange colored text (default: black) with the color you want when the input box is in focus.
• Border color when input box is not in focus - replace the blue colored text (default: red) with the color you want when the input box is not in focus.
• Input box width size when it's not in focus - replace the pink colored number (default: 130) with the amount you want.

Tip: just suits everything with your template.

Installation

It's really easy to implement the search forms above. What you need is only to find the location of the default or current available search form codes on your blog. Then replace the current available search form codes with the new one. Don't forget to add the CSS codes.