How to Build a HubSpot Blog Search

2019 Update — HubSpot now offers a site search API. I highly recommend using the search API going forward. This guide was written before the API existed but I’ll leave it up as a reference.

Have you ever wished your HubSpot blog had a search feature that didn’t take you off your website — looking at you, google search module ? — and that it would search only for blog posts? Here is how I recently accomplished this task for Quad City Safety and if you follow along, it’s really not all that hard to implement yourself.

Before we dive in, let’s break down what a HubSpot Blog Search consists of into its simplest form. It comes down to these three basic elements:

  1. The Search Form
  2. The Search Results Page
  3. The Blog For Loop

1. The Search Form

The first step to creating your blog search is to add an HTML module to your blog template and create a form with a single text input and a submit button like so:

<form action="/blog/search">
    <input name="query" type="text" placeholder="Search the blog..." /> 
    <button type="submit">Search</button>

The two important attributes to make note of for later are the form’s action and the input’s name. The action attribute’s value is where you’ll be taken when you submit the form. In this case, the value is the URL of the search results page (that we’ll create in step 2). The name attribute’s value is the parameter that will be added to the URL – which is what we’ll target in our Blog loop in step 3 in order to populate the search results.

2. The Search Results Page

Before you can get search results, you need a place to display those search results. Create a new site page (or landing page if you don’t have the Website Add-On) using whichever basic template you prefer (we’ll be modifying this template in step 3). The important thing is that you create the page with the URL you used in the value of the form’s action attribute. Using our example above we’ll create this page with “/blog/search” as the URL.

Once you’ve published this page, go ahead and test your search form now. I’ll wait.

Don’t worry, I’ll still be here.


I’m serious.






Okay… Sure you are…


Did the form take you to the search results page? Did you see the query parameter added to the URL like so “/blog/search?query=my+search+example” but you don’t see any search results?


Perfect! Now let’s create those search results.

3. The Blog For Loop

To populate the search results page with actual results, we’ll need to use HubL (HubSpot’s server side programming language) to loop through and display the blog posts that contain our search query.

Go ahead and edit the search results page’s template (or clone it if you want to be safe) and add a HubL module where you want the search results to display on the page. In your HubL module we are going to be doing two primary things. First, we’re going to use the blog_recent_posts function to pull in your most recent posts. Then, we’ll filter those posts by their titles using the request.query_dict HTTP request variable to get the search query parameter from the URL. Here’s the code:

{% set recent_posts = blog_recent_posts('default', 200) %}
{% set searchQuery = request.query_dict['query'] %}

{% for recent_post in recent_posts %}
  {% if searchQuery and searchQuery|lower in|lower %}
    <div class="post-title">{{ }}</div>
  {% endif %}
{% endfor %}

Now, if you go back to your search input, you should see your matching search results:


Awesome! You just built yourself your first search engine!

Now that you know the basics behind building a search in HubSpot, the sky’s the limit. There are a ton of things you can do in addition to the basic search above such as advanced filtering by topics, search the content of the post in addition to the title, highlight the search term in the search results, or you could even Ajax the results into a modal popup window like my HubSpot COS Modal Site Search plugin.


Emilie says

Hello Stefen!
I am presently importing my wordpress blog in hubspot. Recently I implement your hubspot Blog search technique on it. It is really great to have that feature! Thanks to your article :)!

I would have a question for you. Our blog is bilingual (english and french) and the search options only search in the english site even if we are in the french version.

I tried changing the 'default' by 'ourblog fr' in the HUBL Markup {% set recent_posts = blog_recent_posts('default', 200) %} with no result. Do you know if there would be an option for us to make it the actual language ?

Stefen Phelps says

Hey Emilie, that's a great question. I don't have a great answer for you as I haven't had to do this before, but you probably need to add an if statement to check for the current language and then you could add the correct language subdirectory to the URLs. See the if statements in the HubSpot tutorial here for reference:

Perez says

Hey Stefen,

Thank you so much for writing this article. I followed everything in this article but when search anything I see no results. I still get black page after doing the step 3. Could you possibly help me with this? Any help is appreciated :)

P.S. I see this error in my console. Is this why I'm getting the blank page? "The SSL certificate used to load resources from will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See for more information."

Stefen says

Hey Perez,

When you perform a search, double check that the url query parameter is "query" because that is what the HubL code is looking for in order to populate the results. If there is no query parameter or if it's not named the same thing it won't work without modifying the HubL.

Hope that helps!

Victor says

This is amazing thank you so much for sharing this. Worked like a charm on our website:

Would love to know if you were able to get a working version of the pagination feature. This is what I had on my actual blog page but it's not working for the blog/search page since we had to create the blog-search.html page under Pages and not inside of Blog:

{% if last_page_num %}
← Previous Page
{% endif %}
{% if next_page_num %}
Next Page →
{% endif %}

Stefen says

Hey Victor, the pagination blog post is meant for WordPress blogs using a theme powered by Timber. However, you should be able to get the same results pretty easily by changing the Timber specific variables/functions to the HubSpot equivalent HubL variables. E.g.: instead of `{{ blog_page_link() }}` use `{{ content.next_post_slug }}`

neha says

I want the blog search result i.e blog listing page. so if we just make i.e is doing the trick but it is loading the whole page. I just want ti load the blog listing content module. How can I do that ?

Kiran Shirsat says

Hello Stefen!

I want to search blogs into the blog page itself.

I am trying this from last few days, but not getting exact output.

It should search only within blogs.

on this page, Top-Right corner, there is a search bar icon.

Whenever, I am searching any content from this search icon, I am getting result from website page, landing pages & Blog page, However I do not want to show blog results from this search icon, only want to show contents of the website pages & landing pages.

Because, I have already search bar icon for finding blogs on the same page. (below the Hero banner) from this search bar icon, I want to find only blogs.

Any help would be greatly appreciated.

Leave a Reply

Your email address will not be published. Required fields are marked *