How To Customise Your HubSpot Site Search Modules

25 Mar, 2019

I've had client and Community requests on how to customise HubSpot's search, such as adding a button to Site Search Input or a "See More" option in the drop-down results and would like to share how you can achieve that here.

Early last year HubSpot stepped up their game and added in new site search functionality which is comprised of two modules: 

  • Site Search Input: the search bar that appears on your pages
  • Site Search Results: the results from your search

Basic Setup and Functionality

HubSpot's Help Center already covers a lot of information on how to set up search and how it works so, instead of reinventing the wheel, I'll link to some helpful resources and jump straight into how to customise it below.

 

Customisation

How to add a search button to HubSpot's Site Search Input

A popular request I've received is adding in a search button to take your search input from looking like this: 

HubSpot Site Search Input - No Customisation

To something more like this: 

HubSpot Site Search Input With Button

 

We will be getting stuck into some code here but, if that's not something you're comfortable with, give me a shout and I'd be happy to help instead :)

 

1/ Create a clone of the default Site Search Input module

The first thing you'll need to do is clone the default Site Search Input module as HubSpot will not let you edit theirs (so you always have a back-up!). A quick way to get to it is to open a template and find the module

Find Site Search Module on HubSpot Template

Right-click on it and click on "Edit module source code":

HubSpot Edit Module Source Code

and clone it:

Clone HubSpot Module

You can name it something like "Site Search Input With Button".

 

2/ Name the Site Search Input form

The next thing we need to do is name the form so our button will know what form to submit when it's clicked. In the very top where it says "HTML + HUBL" you'll see the following on line 6:

<form action="/hs-search-results">

 

Update this to include an ID, like this: 

<form action="/hs-search-results" id="search-field__form">

 

This ID can be anything (bananas, sea-monkeys, ping-pong....), so long as you remember to use the EXACT same word in the next step

 

3/ Add a button to Site Search Input

Further down on line 10, you'll see the input field for your form: 

<input type="text" class="hs-search-field__input" name="term" autocomplete="off" aria-label="Search" placeholder="">

 

Just below this, you can add in the code for your search button so that it now looks like this: 

<input type="text" class="hs-search-field__input" name="term" autocomplete="off" aria-label="Search" placeholder="">
<button type="submit" form="search-field__form" value="Submit" class="search-field__button">Search</button>

 

 There are a few things to note in this code: 

  • Where it says form="search-field__form", make sure that this matches the ID in step 2, if you've chosen to customise it
  • We use class="search-field__button" so that we can style our button using CSS later. You can add other classes in here with pre-existing styling or create your own
  • Where it says "Search" in between the two button tags (I've highlighted it in bold above), you can add any other word(s), images, Font Awesome icons or any other element.

 

And that's it! Your code should look something like this now (I've added in arrows showing the two snippets we added in above):

HubSpot Site Search Input with Button Code

 

4/ Style your button

With the code above you now have a functioning Site Search Input with Button module for your HubSpot site. However, it might not look fantastic just yet. The exact output will depend on your site's existing styling but might look something like this:

HubSpot Site Search With Button - No Styling

 

With CSS the styling possibilities are endless but I'll give some quick sample CSS below that should work for most of you. Paste it into the bottom of the CSS block on your module and customise as needed.

#search-field__form {
  display: flex;
  flex-direction: row; /* These two lines stack the input bar and button side-by-side */
}
#search-field__form .search-field__button {
  font-family: inherit; /* Sets the font to be the same as the rest of your website */
  background-color: #ffffff; /* Sets the background colour for the button */
  color: #9571da; /* Sets the font colour for the button */
  border: 3px solid #ffffff; /* Sets the border width, type and colour for the button */
  padding: 16px 32px; /* Adds spacing around the text, 16px vertically and 32px horizontally */
}
#search-field__form .search-field__button:hover {
  background-color: transparent; /* Sets the background colour for the button on hover */
  color: #ffffff; /* Sets the font colour for the button on hover */
}

 

Unfortunately I can't guarantee the exact results of this styling as it very much depends on your website's existing style but you can always comment below or get in touch if you need help.

 

How to add a "See More" Option on Site Search Input Suggestions

Just today there was a post in the HubSpot Community asking about the ability to add a "See More" style option in the site search input suggestions drop-down. To clarify, I'm referring to this drop-down: 

HubSpot Site Search Input - Suggestions Dropdown

The answer is yes, there is indeed!

1/ Create a clone of the default Site Search Input module

If you haven't already, create a clone of the default Site Search Input module. I've added instructions above on how you can do this. 

 

2/ Add in the "See More" line

For this one, we'll be going into the JavaScript for the module. At line 44 you should see the following code: 

fillSearchResults = function(response){
  var items = [];
  items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" ); // Results for line
  response.results.forEach(function(val, index) {
    items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" ); // Lines for each of the suggested results
  });

 

This creates a list called "items" which adds the first line with the "Results for" and additional lines for each of the suggested results, as highlighted in blue above. 

We'll add an extra items.push containing our "See More" button just after the code above, which should look something like this: 

fillSearchResults = function(response){
  var items = [];
  items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" );
  response.results.forEach(function(val, index) {
    items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" );
  });
  items.push( "<li id='see-more'><a href='/hs-search-results?term=" + response.searchTerm + "'><b>See More</b></a></li>" );

 

There are a couple of things to note about the above line: 

  • Where is says id='see-more' - this is an ID we're giving it that could be anything. It'll help with CSS styling afterwards
  • The link we have set is /hs-search-results?term= which will work if the default Site Search Results page URL hasn't been change in your settings. If you go to your Settings > Web Pages > System Pages you'll see an box that says "Search results page URL". If this does not say "hs-search-results", replace "hs-search-results" above with your custom page URL.
  • I have chosen to add <b>See More</b> which will add a bold "See More" link. However, you can replace this with any HTML or text that you prefer

 

Your module should now have a functioning "See More" option at the bottom of the drop-down which you can style as needed: 

add a "See More" Option on Site Search Input Suggestions

 

Those are some of the ways in which you can customise HubSpot's Site Search functionality, to which I hope to continue to add more. If you have any questions or ideas on other customisations, add the in the comments below!

Topics: tutorial, search

Join the Conversation!

Do you have a question, feedback or comments on this post?