Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding a Form Popup to your Sticky Tab

Add a Sticky Tab to your website and convert more site visitors by allowing them to click the tab and fill out a popup form...

Providing easy ways for users to sign up for your product or service without having to search through your website is crucial to success online. Adding a Sticky Tab to your website allows you to convert more website visitors by allowing them to easily click the sticky tab and fill out a popup form anywhere on your website.

Below is the HTML, CSS, and JavaScript to add this functionality to your website.

Step 1 - Add the HTML below where you would like your sticky-tab to populate

<div class="side-widget open">
  <div class="inner">
    <a class="btn btn-blue productCheckout" id="get-started">Get Started</a>
  </div>
</div>
<section class="section triad-section">
  <div class="container">
    <div class="row">
      <div class="col-md-3 triad-sub-section">
        <p class="detail-paragraph">
          <strong>Business Intelligence</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.
        </p>
        <p class="detail-paragraph">
          <strong>Mining your Data</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.                            
        </p>
        <p class="detail-paragraph">
          <strong>Pattern Analysis</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.                            
        </p>
        <p class="detail-paragraph">
          <strong>Data Visualizations</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.                            
        </p>
      </div>
      <div class="col-md-3 triad-sub-section">
        <p class="detail-paragraph">
          <strong>Search</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.
        </p>
        <p class="detail-paragraph">
          <strong>Dynamic Data</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.                            
        </p>
        <p class="detail-paragraph">
          <strong>3rd-Party Integrations</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.                            
        </p>
        <p class="detail-paragraph">
          <strong>Data Manager</strong>
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem magna, maximus eget odio vel, dictum ultrices nunc.                            
        </p>
      </div>
      <div class="col-md-6">
        <img src="https://www.solodev.com/assets/follow-me/devices.jpg" alt="">
      </div>
    </div>
  </div>
</section>

Step 2 - Add the HTML below to the bottom of your web page where your sticky-tab lives

<div id="popup-container">
   <div id="popup-window">
      <div class="modal-content">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>  
         <a href="#" class="your-class"></a>
         <div>
            <div class="row text-center">
              <h1>GET STARTED</h1>
          <hr>
              <p>Fill out the form below to get started today!</p>
            </div>
            <br>
            <form action="" method="post" id="footer-form">
            <div class="row">
               <div class="col-md-6">
                  <input class="form-control" name="first_name" id="first_name" placeholder="First Name *" required>
               </div>
               <div class="col-md-6">
                  <input class="form-control" name="last_name" id="last_name" placeholder="Last Name *" required>
               </div>
            </div>
            <br>
            <div class="row">
               <div class="col-md-6">
                  <input class="form-control" name="email" id="email" placeholder="Your Email *">
               </div>
               <div class="col-md-6">
                  <input class="form-control" name="phone" placeholder="Phone *" id="phone">
                  <br>
               </div>
            </div>
            <center>
            <input type="submit" class="btn btn-primary" value="Submit">
            </center>
            </form>
            <br>
         </div>
      </div>
   </div>

Step 3 - Add the CSS below to the main stylesheet of your website

.pricing-table {
  margin-top: 0px;
}
hr {
width: 350px;
height: 2px;
background-color: #ef9919;
border-top: 0px;
}
.pricing-table {
  margin-top: 30px;
  margin-bottom: 30px;
}
.pricing-table .pricing-table-item {
  border-bottom: 0px;
}
.pricing-table .item-header {
  background-color: #696969;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
}
h2, .header-two {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 19px;
  line-height: 1.3;
  text-transform: uppercase;
}
.pricing-table .item-cta-block {
  background-color: #D3D3D3;
  padding: 30px;
  text-align: center;
  position: relative;
}
.pricing-table .block-price {
  color: #000000;
  font-size: 45px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.pricing-table .block-sub-text {
  text-transform: uppercase;
  font-size: 15px;
  color: #000000;
  line-height: 26px;
  margin-bottom: 10px;
}
.pricing-table .pricing-toggle-holder {
  display: none;
}
.pricing-table .pricing-toggle-holder button {
  padding-left: 0;
  padding-right: 0;
}
.item-cta-block .button.orange-button {
  display: inline-block;
}
button.orange-button, input[type="button"].orange-button, input[type="reset"].orange-button, input[type="submit"].orange-button, a.button.orange-button {
  background-color: #d2282e;
  color: #ffffff;
  padding: 18px 20px;
  box-shadow: 0 3px 0 0 rgba(24, 24, 25, 0.1);
  -webkit-transition: all .75s;
  transition: all .75s;
  margin-bottom: 6px;
}
button .glyphicon-menu-right, input[type="button"] .glyphicon-menu-right, input[type="reset"] .glyphicon-menu-right, input[type="submit"] .glyphicon-menu-right, a.button .glyphicon-menu-right {
  top: -1px;
  margin-left: 5px;
  font-size: 9px;
}
.pricing-table .item-details-block {
  background-color: #f7f7f7;
  padding: 38px 30px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.pricing-table .plus-header {
  text-align: center;
  font-size: 18px;
  font-family: "Trebuchet MS", Arial, sans-serif;
}
.pricing-table .separator {
  margin-bottom: 38px;
}
.separator {
  background-color: #d2282e;
  height: 3px;
  width: 100px;
  margin: 0 auto;
  margin-top: 27px;
  margin-bottom: 48px;
}
.pricing-table .item-details-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pricing-table .item-details-block ul li {
  line-height: 2;
}
li {
  text-align: center;
  margin-bottom: 10px;
  line-height: 120%;
}
.separator-type, .title-type, .intro-type, .content-type .intro-type p {
  position: relative;
}
.intro-type .container {
  padding: 107px 0px 102px 0px !important;
}
h1 {
  font-family: 'Open Sans Condensed', sans-serif;
}
.company-heading h1 {
  margin-bottom: 40px;
  line-height: 80px;
  color: #fff;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 700 !important;
  text-align: center;
}
.seo-header, .product-header, .intro-type .container h1.white, .company-heading h1 {
  font-weight: 100 !important;
  text-transform: capitalize;
  font-size: 55px;
  margin-bottom: 20px;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
  background-repeat: repeat;
  background-size: cover;
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  z-index: -10;
}
/* Side Widget */
.side-widget.open {
  margin-right: 0;
}
.side-widget {
  width: 57px;
  z-index: 9;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  right: 0;
  top: 52%;
  text-align: center;
  margin-right: -45px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.btn.btn-blue:hover {
  background-color: #1f6fa6;
}
.btn.btn-blue {
  background-color: #0082ca;
}
.btn.btn-blue {
  background-color: #2483c3;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a:hover, a:focus, a:active {
  text-decoration: none;
}
.btn {
  font-family: 'proxima-nova', sans-serif;
  font-size: 22px;
  font-weight: 600;
  padding: 12px 35px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
.widget-close:hover {
  color: #ccc;
}
.widget-close {
  color: #636363;
}
.widget-close {
  position: absolute;
  left: 3px;
  top: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  z-index: 1;
}
.section.triad-section {
margin-top: 10px;
}
section.section h2 {
  font-size: 40px;
  line-height: 46px;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 0;
}
h2 {
  color: #000;
}
h1, h2, h2, h4, h5, h6 {
  font-weight: 200;
  letter-spacing: -1px;
}
section.section p.sub-heading {
  font-size: 16px;
  font-family: "Gotham SSm A", "Gotham SSm B";
  font-weight: 300;
  text-align: center;
  margin-bottom: 40px;
}
section.triad-section .triad-sub-section {
  padding-right: 60px;
}
section p.detail-paragraph:first-child {
  margin-top: 0;
}
section p.detail-paragraph {
  font-family: 'Open Sans Condensed', sans-serif;
  margin-top: 40px;
  font-size: 18px;
  color: #000;
}
b, strong {
  font-weight: 700;
}
#popup-container {
  position: fixed;
  z-index: 9990;
  margin: 0 auto;
  top: 10%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 990px;
  display: none;
}
#popup-container.open {
  display: block;
}
.modal-content {
  background-color: rgba(38, 38, 40, 0.92);
  color: #fff;
  padding: 20px 100px;
}
.modal-content input {
  height: 57px;
  border-radius: 0;
}
.modal-content .btn-primary {
  width: 175px;
  background-color: #ef9919;
  border: 0;
}
.modal-content .btn-primary:hover {
  background-color: #0073b7;
  border: 0;
}
.modal-content .logorow {
  text-align: center;
}
.close {
  margin-right: 10px;
  margin-top: 5px;
  color: #fff;
  opacity: .8;
}
.close:hover {
  color: #efefef;
}

Step 4 - Add the JavaScript below to onclick-form-popup.js

$( document ).ready(function() {
  $('#get-started').on('click', function() {
    var $sidenav, $this;
    $this = $(this);
    $sidenav = $('#popup-container');
    if ($this.hasClass('active')) {
      $this.removeClass('active');
      return $sidenav.removeClass('active');
    } else {
      $this.addClass('active');
      return $sidenav.addClass('active');
    }
  });
  $('#get-started').on('click', function() {
    var $sidenav, $this;
    $this = $(this);
    $sidenav = $('#popup-container');
    if ($this.hasClass('open')) {
      $this.removeClass('open');
      return $sidenav.removeClass('open');
    } else {
      $this.addClass('open');
      return $sidenav.addClass('open');
    }
  });
  $('#popup-container').find('.close').on('click', function() {
    $(this).parent().removeClass('open');
    $('#get-started').removeClass('open')
    return $('#popup-container').removeClass('open');
    return $('#get-started').removeClass('open');
  });
});

Step 5 - Add the includes below to the page where your sticky-tab and popup form will live

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="onclick-form-popup.js"></script>

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev