HubSpot CMS

Sticky Search Button

Add A Sticky Search Button to any page/template in the HubSpot CMS

Created by: Timothy Joyce

Tags: Buttons, Forms, Modals


After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

3 Recommendations

View on:


{{ require_js("", "head") }}
{{ require_js("", "head") }}
{% require_css %}
    @import url('');
    .belch-floating-search-super-container .bfss-trigger {
      background: {{ module.icon_background_color.color }};
      fill: {{ module.icon_color.color }};
    .belch-floating-search-super-container .go-btn {
      background: transparent;
      fill: {{ module.go_icon_color.color }};
    .belch-floating-search-super-container .bfss-search-box {
      background: {{ module.search_box_background_color.color }};
{% end_require_css %}
<div class="belch-floating-search-super-container">
  <div class="bfss-inner">
    <div class="bfss-trigger">
      {% icon
        name="{{ }}"
        style="{{ module.search_icon.type }}"
        unicode="{{ module.search_icon.unicode }}"
    <div class="bfss-search-box">
      <div class="bfss-search-pseudo-trigger"></div>
      <div class="bfss-search-inner">
        <form action="{{ module.search_results_link }}" class="bfss-form" method="GET">
          <input name="term" type="text" placeholder="Search" />
          <button type="submit" class="go-btn">
            {% icon
              name="{{ }}"
              style="{{ module.go_icon.type }}"
              unicode="{{ module.go_icon.unicode }}"

            .belch-floating-search-super-container {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 214748363;
.belch-floating-search-super-container .bfss-inner {
  position: relative;
.belch-floating-search-super-container .bfss-trigger {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
  padding: 20px;
  background: red;
  border-radius: 105px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 10px 0 rgba(0, 0, 0, 0.22);
  fill: white;
  cursor: pointer;
  border: 1px solid white;
  box-sizing: content-box;
.belch-floating-search-super-container .bfss-social {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  width: 0;
  height: 0;
.belch-floating-search-super-container .bfss-search-box {
  position: absolute;
  height: 67px;
  display: flex;
  align-items: center;
  top: -200px;
  right: 90px;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid white;
  -webkit-box-shadow: rgba(0, 0, 0, 0.26) 0px 2px 5px 0px, rgba(0, 0, 0, 0.22) 0px 2px 10px 0px;
          box-shadow: rgba(0, 0, 0, 0.26) 0px 2px 5px 0px, rgba(0, 0, 0, 0.22) 0px 2px 10px 0px
.belch-floating-search-super-container .bfss-search-box form {
  margin: 0 !important;
.belch-floating-search-super-container .bfss-search-box input {
  min-width: 300px;
  padding: 11px;
  padding-right: 40px;
  border-radius: 2px;
  border: 0 solid white;
  font-family: "Roboto";
  font-size: 16px;
  margin: 0 !important;
.belch-floating-search-super-container .bfss-search-box input:active,
.belch-floating-search-super-container .bfss-search-box input:focus,
.belch-floating-search-super-container .go-btn:focus,
.belch-floating-search-super-container .go-btn:active {
  outline: none;
.belch-floating-search-super-container .go-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 19px; right: 24px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;

            var belchfssc_ = (function(){
	return {
    container: ".belch-floating-search-super-container",
    trigger:   ".belch-floating-search-super-container .bfss-trigger",
    searchBox: ".belch-floating-search-super-container .bfss-search-box",
    init: function(){
      window.$(this.container).closest('.widget-span').css({'min-height': 0});
      this.searchTransitionTimeline = new TimelineMax({paused: true});
      this.searchButtonTimeline     = new TimelineMax({paused: true});
    initAnimation: function(){
      this.searchTransitionTimeline.set( this.searchBox, {autoAlpha: 0}); this.trigger, .3, {
        rotationX:      '-30',
        transformOrigin:'center center',
        boxShadow:      '0 5px 11px 0 rgba(0, 0, 0, 0.28), 0 19px 15px 0 rgba(0, 0, 0, 0.25)'
      }); this.searchBox, .7, {
          top: "0px",
          autoAlpha: 1,
          ease: Back.easeOut.config(1.7)
    on: function(action, callback) {
      window.addEventListener(action, callback, { passive: false });
    createListeners: function(){
      this.on("keydown", this.tryClosing.bind(this));
      window.$(this.trigger).on('mouseenter', function(){;
      window.$(this.trigger).on('mouseleave', function(){
      window.$(this.trigger).on('click', function(){

    tryClosing: function(event){
      if(event.key == "Escape" && $(this.trigger).hasClass('active')){

Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here

Sticky Search Button (Custom HubSpot Module)

View the Live Demo


Add a Sticky Search Button to any page/template in your HubSpot CMS

How to use?

Just include this module anywhere, in any template/page.

What other features are there?

  • Change the icon
  • Change the icon color
  • change the icon background color
  • Change the Search background color
  • Change the submit button icon
  • Change the close icon


Sticky Search preview gif

3 Recommendations

Timothy Joyce

Co-founder / Programmer

View Timothy Joyce’s Gallery (8 Entries)

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Made with  by community members: