How to Add a Search Bar to your Insurance Website

June 10, 2019 Steven Gibbons


search bar
 

Adding a search bar to your insurance website will allow your visitors to find appropriate content based on what they’re looking for.

You may think you have displayed everything your customers would want. But, it’s simply not good design to display all that information in a single location. Focus on your select lines of business and let the search bar do the rest.

Here’s how you can add a search bar to your agency website.
 

A Note on HTML

While the process is simple (just a couple of components) this will delve into HTML modifications to your website. Fear not! You can always revert to previous versions of webpages. So feel free to experiment!
 

First Step: Prep

First, decide where you want your search bar to be. I suggest the pre-header or the footer. These two sections appear on every page of your website, allowing viewers to search from anywhere.

The pre-header is at the top and one of the first things presented to anyone who is on your website. This is a good spot for catching attention. The footer is at the bottom of your pages and will be one of the last things customers remember. This location is for a “Reached the bottom and didn’t find what you’re looking for? Try this search!” situation.

Once you’ve decided, go to your Insurance Website Builder admin console. Go to the Site Content Editor and select your section from the Content dropdown menu. Switch to the HTML mode found at the bottom of the editor. Locate the exact spot within the HTML code you’d like it to go. Create a new line to hold the code in the following section
 

Second Step: Implementation

With your location determined, add the following code where you want the search bar to appear.

                <input type="text" class="searchquery">

                <input type="button" value="Submit" class="searchbutton">

The first line is the text box (type=“text”) with a class to let the website know this is the search text box. The second line is the submit button (type=”button”) with the class to let the website know. You can modify what the submit button is labeled by swapping what is in the value=”” attribute. (Remember the quotes “”!)

And that’s it! Save the page and see your new, functional search bar.
 

Final Step: Customization

Now you’ve seen your search bar in action, it should be good to go. To adjust the way it looks, modify the two elements by adding a style=”” attribute and fill it with your CSS.

In general, the default settings for these two elements should be properly styled to fit your design. While I won’t go into all the possibilities, here are a couple to keep in mind:

  • background-color (Change the color of the button)
  • font-size (Change the size of the text box or Submit button)
  • color (Change the color of the font within the textbox or Submit button)
     

With a little HTML knowledge, and a bit of tinkering, you can easily add new functionality to your website. A functional website encourages user trust and gives your visitors more options to maneuver your site. Don’t be afraid to dive in and implement more of your own HTML code.

About the Author

Steven Gibbons

Steven works as a Website Coordinator and Content Specialist at ITC. In his role, he consults with insurance agents to determine their website's ideal design and functionality, and also codes their websites too. Steven majored in Computer Information Systems at Tarleton State University. In his free time, he enjoys learning piano, drawing, and exploring the restaurants and activities the city of Dallas, Texas, has to offer.

More Content by Steven Gibbons
Previous Article
ACORD Forms Update (May 2019)

Next Article
SEO for 2019...and Beyond!
SEO for 2019...and Beyond!

Learn what SEO trends will continue to unfold in 2019 and over the next few years in June's Masters of Mark...