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

Creating a Cookie Based Form Popup

Form Popups can serve as an excellent lead generation tool if used correctly...

Adding a cookie-based form popup to your website can be a tremendous lead generation tool. However, a form popup must be carefully implemented in order for it to add value to a web page rather than detract from it.

This article provides you with the code you need to add a cookie-based form popup that can be set to appear after a certain interval of time and also hides itself when the user returns to your website by tracking cookies. You can use the form for anything and modify it to meet your needs.

Below is the code and styling you need to implement a cookie-based popup form on your website.

Step 1 - Add the HTML below to the footer of your homepage

<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="text-center">
      <img src="https://www.solodev.com/core/fileparse.php/257/urlt/logo.png" />
    </div>
    <div class="text-center">
      <h1>Newsletter Signup</h1>
      <p>Fill out the form below to signup for our weekly newsletter.</p>
    </div>
    <form action="" method="post" id="footer-form">
      <div class="row">
        <div class="col-md-6">
          <label>First Name</label>
          <input class="form-control" name="first_name" id="first_name" required>
        </div>
        <div class="col-md-6">
          <label>Last Name</label>
          <input class="form-control" name="last_name" id="last_name" required>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <label>Email</label>
          <input class="form-control" name="email" id="email" required>
        </div>
        <div class="col-md-6">
          <label>Phone</label>
          <input class="form-control" name="phone" id="phone">
        </div>
      </div>
      <input type="submit" class="btn btn-primary" value="Submit">
    </form>
  </div>
</div>

Step 2 - Download the CSS below and include it in your web page

form-popup.css

Step 3 - Add the following includes to the header of your homepage

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

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