Adding a Search Button to the New Site Search Module

Highlighted
HubSpot Employee

Please note: This post will not teach you how to set up the new site search features in your HubSpot account. That is what this article here will do. 

I want to show you how to quickly and easily add a search button to your Site Search Input module so that instead of just seeing an input field for the site search on your pages you can add a search button as well. Through CSS you can then pretty much do anything. Make a neat looking button that matches your company styles or replace the button text with a FontAwesome magnifying glass like what I did here.

Screen Shot 2018-06-19 at 11.10.30 AM.pngSite Search Input module with a physical button

The first thing you will need to do is find the newly created Site Search Input module in your design manager. This will appear after you set up a Site Search Results template.

Once you are there you will need to edit this module so that you can add your own button that physically functions as a submit button when a user types in a search string. To do this you will need to clone the module to make changes. I gave mine a simple name of Site Search Input with Button so I can easily find it and know what the purpose of it is for. 

Once you have the newly cloned modules inner workings visible, you will see 3 sections in the Design Manager. HTML + HUBL, CSS and JS. We only want to concentrate on the top panel. What you will need to do first is find line 4 which is responsible for the input string to search for. Then right after this line, I would add some simple HTML for a button.

 

I used this in my example

<button type="submit" form="form1" value="Submit" class="hs-button primary"><i class="fa fa-search"></i></button>

To break this down this is just a simple HTML button with a submit type. The classes that were added are piggybacking off of my template stylesheet to keep this button looking the same as the other form buttons on my page. You can add your own inline styles or custom class names if you'd like. 

 

I then used

<i class="fa fa-search"></i>

as what gets rendered on the button itself. I am using FontAwesome and this special code will only work if you follow their getting started user guide. If you are just happy with the word "Search" instead of an icon you could replace the FontAwesome code above with any word you want on this button. 


Example with just text

<button type="submit" form="form1" value="Submit" class="hs-button primary">Search</button>

 

Now the key connection to making all this work is the most important button parameter in my code. The form ID. This tells the button what to submit when the button is pressed and in my example, I used the form name of "form1" on the button. I would then need to make sure there is an ID set with the same name of "form1" on the starting HTML form code which is on line 3. 


This line went form

<form action="/{{ site_settings.content_search_results_page_path }}">

to

<form action="/{{ site_settings.content_search_results_page_path }}" id="form1">

 

Once you do all the above and publish your cloned module you can add your Site Search Input with Button module to your template and then when you view the live page that is using whichever template you added the cloned module to you will now see a physical search button with your site search input field. 

CSS will be required to make it look just right.

I hope this helps you out and if you have any feedback I would love to hear it.

1 Reply 1
Community Manager

Thanks for sharing @EricSalvi!

Reply
0 Upvotes