GDPR Cookie Consent Popup in JavaScript

This JavaScript code snippet helps you to create a GDPR cookie consent popup form on your website. It comes with a user-friendly interface, allowing visitors to manage marketing preferences effortlessly. It employs the Magnific Popup library for a smooth and animated experience.

By utilizing checkboxes, users can specify communication channels and content categories. Additionally, the code includes options for profiling consent, survey participation, and receiving updates from venue partners. Simplify compliance and enhance user control with this straightforward GDPR cookie consent solution.

How to Create GDPR Cookie Consent Popup in JavaScript

1. First of all, ensure you include the necessary dependencies in your HTML file. Add the jQuery library and the Magnific Popup CSS and JavaScript files. Also, make sure the jQuery library is loaded before the Magnific Popup script.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,800,400' rel='stylesheet' type='text/css'><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js'></script>

2. Create the HTML structure as follows:

<h1>GDPR</h1>
<p>Example popup</p>
<ul>
  <li><a href="http://placehold.it/600x600" class="btn popup-link">Privacy Details and Opt-ins</a></li>
</ul>

3. Copy the following CSS code into your stylesheet or embed it directly in the HTML file. These styles define the appearance of the cookie consent popup and ensure a cohesive visual integration with your website.

body {
  padding: 40px;
  background: #388ff6;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  text-align: center;
  font-weight: 300;
}


#gdpr{
   background: #fff;
}

h1 {
  margin-bottom: 0;
}

p {
  margin: 0;
  color: #b2d4fc;
}

ul {
  list-style-type: none;
  margin: 20px auto;
  padding-left: 0;
}

li {
  margin-bottom: 10px;
  display: inline;
}

.mfp-figure figure {
  margin: 0;
}

.btn {
  color: #b2d4fc;
  display: inline;
  padding: 10px 20px;
  background: #0b74f0;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
  line-height: 50px;
  box-shadow: 0px 3px 0px 0px #0a68d8;
}
.btn:hover {
  color: #fbfdff;
  box-shadow: 0px 1px 0px 0px #0a68d8;
  background: #1179f4;
}
.btn:active, .btn:focus {
  -webkit-appearance: none;
  outline: none;
}

.k tr > *:first-child {
  min-width: 300px;
  max-width: 500px;
  width: 400px;
}

.k td {
  vertical-align: middle !important;
}

.k tr > *:not(:nth-child(1)) {
  text-align: center;
}

p {
  padding-top: 25px;
}

.mfp-close-btn-in .mfp-close {
  color: #ffffff;
}

.white-popup {
  position: relative;
  padding: 20px;
  width: auto;
  margin: 20px auto;
}

4. Finally, insert the following JavaScript code into your HTML file, preferably within a <script> tag or an external JavaScript file. Ensure it is placed after the jQuery and Magnific Popup script tags.

$(document).ready(function() {
  $(".popup-link").magnificPopup({
      items: {
      removalDelay: 300,
      src: '<div class="white-popup animated fadeInUp"> <form id="gdpr" action="#" method="post"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>Keep in touch with us<br /><small>Marketing permissions & preferences</small></h2> <p>Please tick the boxes below to tell us all the ways you would prefer to hear from us:</p> </div> </div> <div class="row"> <div class="col-xs-12"> <table class="table table-responsive k"> <tr> <th></th> <th> Email<br /> <input type="checkbox" name="lvl1-email" id="lvl1-email" checked /> </th> <th> SMS<br /> <input type="checkbox" name="lvl1-sms" id="lvl1-sms" checked /> </th> <th> Mobile<br /> <input type="checkbox" name="lvl1-mobile" id="lvl1-mobile" checked /> </th> <th> Landline<br /> <input type="checkbox" name="lvl1-landline" id="lvl1-landline" checked /> </th> <th> Post<br /> <input type="checkbox" name="lvl1-post" id="lvl1-post" checked /> </th> </tr> <tr> <td> <h3>Marketing<br /><small>Exciting offers and news about our products and services</small></h3> </td> <td><input type="checkbox" class="lvl2-email" name="lvl2-email-marketing" id="lvl2-email-marketing" checked /></td> <td><input type="checkbox" class="lvl2-sms" name="lvl2-sms-marketing" id="lvl2-sms-marketing" checked /></td> <td><input type="checkbox" class="lvl2-mobile" name="lvl2-mobile-marketing" id="lvl2-mobile-marketing" checked /></td> <td><input type="checkbox" class="lvl2-landline" name="lvl2-landline-marketing" id="lvl2-landline-marketing" checked /></td> <td><input type="checkbox" class="lvl2-post" name="lvl2-post-marketing" id="lvl2-post-marketing" checked /></td> </tr> <tr> <td> <h3>Rewards<br /><small>Don"t miss out on the biggest events</small></h3> <p class="text-right"></td><td></td> <td></td> <td></td> </tr> <tr class="lvl3 active"> <td> <p class="text-right">Sports</p> </td> <td><input type="checkbox" class="lvl3-email-reward" name="lvl3-email-reward-sports" id="lvl3-email-reward-sports" checked /></td> <td><input type="checkbox" class="lvl3-sms-reward" name="lvl3-sms-reward-sports" id="lvl3-sms-reward-sports" unchecked /></td> <td></td> <td></td> <td></td> </tr> <tr class="lvl3 active"> <td> <p class="text-right">Music</p> </td> <td><input type="checkbox" class="lvl3-email-reward" name="lvl3-email-reward-music" id="lvl3-email-reward-music" checked /></td> <td><input type="checkbox" class="lvl3-sms-reward" name="lvl3-sms-reward-music" id="lvl3-sms-reward-music" unchecked /></td> <td></td> <td></td> <td></td> </tr> <tr class="lvl3 active"> <td> <p class="text-right">Family</p> </td> <td><input type="checkbox" class="lvl3-email-reward" name="lvl3-email-reward-family" id="lvl3-email-reward-family" checked /></td> <td><input type="checkbox" class="lvl3-sms-reward" name="lvl3-sms-reward-family" id="lvl3-sms-reward-family" unchecked /></td> <td></td> <td></td> <td></td> </tr> </table> </div> </div> <div class="row"> <div class="col-xs-12"> <h2>Profiling permission<br /><small>What is profiling?</small></h2> <p>Profiling helps our company to provide you with the best customer journey. Thanks to automated processing on your personal data, <strong>we are able to send you offers that meet your needs and news you could be interested in</strong>.</p> <p><input type="checkbox" name="profiling" id="profiling" unchecked /> <strong>I do not agree with profiling.</strong></p> <p></p></div> </div> <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-body"> <h2>Survey<br /><small>Help us to improve our services and products</small></h2> <p>At company X, we are always seeking new ways to improve our products and services. And the best way to do that is to ask our customers. We really appreciate your time and the valuable insights which you can provide. If you have a minute to spare, your response would be much appreciated.</p> <p><input type="checkbox" name="survey" id="survey" unchecked /> <strong>Yes, I want to participate to a survey for a better understanding of my consumption.</strong></p> <p class="text-left">Time needed to complete the survey: 10 to 15 minutes.</p> <p>Our Customer Service will contact you soon.</p> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-body"> <h2>Rewards - Our partners</h2> <p>Tell us if you would like information from our venue partners.</p> <p><input type="checkbox" name="rewards-partners" id="survey" unchecked /> <strong>Yes, I would like to hear about the latest news and events. </strong></p> <p>From time to time as a member of our company, we may need to transfer your personal information to one/or all of our carefully selected venue partners (for their own marketing purposes). We need your consent to transfer this information. If at any time you change your mind, just let us know.</p> <p>If at any time you would like to change any of your preferences, please be aware that you can do so free of charge by contacting us at XXXX XX XX XX or through your online account in the My Details section. We are open Monday to Friday from 8am to 8pm. These calls will be charged at Lo Call rates from any landline in the Republic of Ireland. Calls made from mobiles will cost more.</p> </div> </div> </div> <div class="clearfix"></div> <div class="col-xs-12"> <p class="text-center"><button type="button" name="display-json" class="btn btn-primary btn-lg">Save my preferences</button></p> <p>All changes will be effective in a delay of 48 hours. Last update: XX/XX/XXXX</p> </div> </div> </div> </form> </div>', 
    type: 'inline'
      }
    });
  });

That’s all! hopefully, you have successfully created a GDPR Cookie Consent Popup on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.