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

Unverified
?

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.

2 Recommendations

View on:

GitHub

HTML + HUBL
          
            {{ require_js("https://cdn.jsdelivr.net/npm/enhanced-bind-polyfill@0.0.2/index.min.js", "head") }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js", "head") }}
{% require_css %}
  <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    .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 }};
    }
  </style>
{% end_require_css %}
<div class="belch-floating-search-super-container">
  <div class="bfss-inner">
    <div class="bfss-trigger">
      {% icon
        name="{{ module.search_icon.name }}"
        style="{{ module.search_icon.type }}"
        unicode="{{ module.search_icon.unicode }}"
      %}
    </div>
    <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="{{ module.go_icon.name }}"
              style="{{ module.go_icon.type }}"
              unicode="{{ module.go_icon.unicode }}"
            %}
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

          
        
CSS
          
            .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;
  justify-content:center;
  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;
}

          
        
JS
          
            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});
      this.initAnimation();
      this.createListeners();
    },
    initAnimation: function(){
      this.searchTransitionTimeline.set( this.searchBox, {autoAlpha: 0});
      this.searchButtonTimeline.to( 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.searchTransitionTimeline.to( 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(){
        this.searchButtonTimeline.play();
      }.bind(this));
      window.$(this.trigger).on('mouseleave', function(){
        this.searchButtonTimeline.reverse();
      }.bind(this));
      window.$(this.trigger).on('click', function(){
        if(window.$(this.trigger).hasClass('active')){
          this.searchTransitionTimeline.reverse()
          window.$(this.trigger).removeClass('active');
        }else{
          this.searchTransitionTimeline.play()
          window.$(this.trigger).addClass('active');
        }
      }.bind(this));
    },
    tryClosing: function(event){
      if(event.key == "Escape" && $(this.trigger).hasClass('active')){
        this.searchTransitionTimeline.reverse()
        window.$(this.trigger).removeClass('active');
      }
    }
  }
})();
$(function(){
  belchfssc_.init();
});

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

Sticky Search Button (Custom HubSpot Module)

View the Live Demo

Description

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

Screenshot

Sticky Search preview gif

 
2 Recommendations

Timothy Joyce

Co-founder belch.io / Programmer

View Timothy Joyce’s Gallery (8 Entries)

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

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!

Contribute
Made with  by community members: InboundLabs.co