Let’s face it, messy, unsearchable content is bad for business. That’s why websites like blogs or job boards need a robust search option. It’s a key UX feature for any content-driven website. The good news is that Webflow provides a native Webflow search feature. It allows users to search through your entire website. There are times though when you want your users to be able to search specific CMS collections, instead of your entire site. This is where Jetboost can help!

In this article, we’ll first look at what you get with Webflow’s native site search. Then we’ll explore Jetboost’s Real-Time, On-Page Search, and see how it differs from Webflow search.

What is site search in Webflow?

Webflow’s native site search allows you to add a search bar to your website. By default, Webflow will search your entire website. Although, you do have the option to limit which pages and content are searchable.

Search results will display on a separate Search Results Page. Of course, you can style the search bar and Search Results Page however you’d like.  

You can add as many search bars to your website as you want. But, Webflow currently limits websites to a single search engine and results page. This means that each search bar will explore the same content. 

How do you add site search to your Webflow website?

Site search is available on all Webflow websites with CMS or Business hosting. You can add Webflow’s native site search bar to your website from the “Add Elements” panel. Then, style the search bar like you would any other element in Webflow.   

Once you add the search bar, a Search Results Page will appear as a “Utility Page.” The Search Results Page is automatically populated with a basic starter structure. But, feel free to change the design and style of this page. It works the same as styling a Collection List Item Page. Styles applied to a Search Result Item will apply to all other Search Result Items. 

Next, apply your site search settings. Change the search title, description, or image for each of your pages. Exclude pages or recurring elements from your search results. You can also select how many search results to display, up to 60. After you publish your website, Webflow will generate a search index of your searchable content. 

Use Jetboost Search to Display Search Results in Real-Time

What is Jetboost Search?

Jetboost’s Real-Time, On-Page Search lets you easily add a search bar for specific CMS Collections on your website. Let your users search an individual or multiple CMS Collections filtered by multiple search fields. Search results will display on-page in real time as your users type in the search bar. We give you complete control to design and customize the search experience to fit your users’ needs. 

This provides a drastically improved user experience for your content-driven websites. Think real estate listings, resource directories, e-commerce stores, and more. Keep your content accessible with a powerful yet user-friendly site search option. 

What features does Jetboost Search offer?  

On-page, real-time search. As your users type in the search bar, the search results will display immediately on the page. There’s no wait time. No need for a separate Search Results Page either (unless you want this, of course!). 

Multiple search engines. Do you want your users to be able to search your video tutorials separately from your blog? No problem. Feel free to add as many search bars with different search components as you want. We don’t limit you to a single search engine. 

Search paginated lists. We find all search results, not just the first 100! We use the Webflow API, so we’re not limited to only searching 100 CMS Collection items. 

Search individual or multiple CMS Collections. With a single search bar, your users can search an individual or multiple CMS Collections. Simply add the respective Jetboost classes for each CMS Collection to the search bar (more on this below). 

Jetboost only searches CMS Collections. No need to go through your entire website limiting repetitive elements like headers and footers, internal style guides, or static pages, such as your homepage, contact us, etc. Save your time, and focus on your design! 

Add multiple search fields. Select which CMS Collection item fields you’d like the site search feature to filter by. If your user searches for text that is spread out across different fields, Jetboost will still be able to return search query results for that text. Yes, it’s that smart.  

Save search queries. With a simple “yes” toggle, add your search query to the URL. This makes it easy to share your search results via email, social media, etc.    

No hidden content is needed. Do you have a CMS Collection List Item field that isn’t displayed on your website? If you’d still like to include it in your search, no problem. Since Jetboost uses Webflow’s API, it can search any field in your CMS, even if that field isn’t used on the page!

You can also choose from free Power Ups to enhance Jetboost Search. Some of these are: a reset button, a no results found section, search highlighting, showing results on a separate page, showing elements when the search is active, showing elements when the search is not active, and more.

How do I add Jetboost Search to my website?

With our powerful Real-Time, On-Page Search, you can add advanced search to your Webflow CMS Collections in less than 10 minutes. Add as much customization to your on-page search as you want! Follow the steps below to add this dynamic booster to your Webflow website. 

Step 1: Set up your Jetboost account.

If you’re not already a Jetboost user, sign up for Jetboost for free. Add your Webflow account to Jetboost, and ta-da, you’re ready to start adding boosters. 

Step 2: Add the Real-Time, On-Page Search Booster to your Webflow website.

Navigate to your Jetboost dashboard. Click “Add Booster” and add the “Real-Time List Search” booster. 

Step 3: Configure the Real-Time, On-Page Search Booster.

Name the booster on the left-hand sidebar.

Select which CMS Collection on your site you want to add the search feature to. 

Select which CMS Collection fields the search feature should filter by. Choose as many as you want!

Select either an exact or flexible search strategy. An exact search will only include results with the exact typed search words. A flexible search will include results that match all the typed search words, regardless of order or spacing. 

Select whether you want to add the search query to the URL. We recommend this! This will make it easy to share direct search results via email, social media, etc.

When you’re done, click “save changes.”  

Step 4: Add the Jetboost script to your Webflow website.

‍Navigate to the custom code page in your Webflow Project Settings, find the “Head Code” section and paste in the Jetboost script. If you’re already a Jetboost user, Jetboost will skip this step for you. Hooray.

Step 5: Configure your CMS Collection List.

Add the provided Jetboost class to your Collection List Wrapper element. 

Next, add an Embed element inside of your Collection Item. Add the provided Jetboost code to the Embed element. Click “save & close.” Note, you can skip adding this Embed element if you already added it with a different booster. 

Publish your webpage! Visit the published webpage and copy the URL.  Paste to the “Test URL” on your Jetboost dashboard. Or, leave the Test URL blank if you’re testing the home page. Click “test and continue.” (If there are issues, we’ll let you know how to fix them.) 

Step 6: Create your search input bar.

Add a Form Block where you want the search input bar to be located on your webpage. The Form Block must contain one Input field and a hidden Submit button. Add the provided Jetboost class to the Input field. Style the Form Block however you want!  

Publish your webpage and test it again! Remember, we’ll let you know how to fix any issues.

Step 7: Final checks.

If there are no final issues detected, click “continue.” Wahoo, success! 

If you’d like to add another searchable CMS Collection to the search bar that you just designed, add another booster to your website. Repeat the steps above, but skip creating a new search bar. Instead, add the newly provided Jetboost class to the Input field on your existing search bar. Now, your search bar will explore both CMS Collections. Feel free to add as many collections as you want!

Prefer video format? View our video tutorial below.

Check out our live demo where you can see our real-time, on-page search integrated with a variety of CMS Collection Lists. 

Don’t forget, all Jetboost boosters work together seamlessly. Combine our Webflow search feature with the Dynamic Filtering Booster to create next-level, interactive content directories. Ready to get started now? Try Jetboost for free!  

Boost your Webflow Search Today

We want you and your users to be happy. Other Webflow search solutions are complicated to set up and limited in functionality. Add Jetboost’s real-time, on-page search to your website in less than 10 minutes. Let your users search multiple CMS collections filtered by multiple search fields from a single search bar. Improve your user experience even further with free Power Ups from automatic search highlighting to customizable “no results found” messages.

Complete developer control. Total user satisfaction. Upgrade your Webflow search today. Get started for free now!