Bootstrap Modal Email Subscription Form Tutorial

How to make Modals Automatically Popup on Page Load


bootstrap modal popup on load

Delete cookies and reload page to view live demo

Creating a popup email subscription form in Twitter Bootstrap is easy. The built-in modal can be configured to launch when the page loads. Setting cookies adds more control and provides a better user experience.

Tutorial Overview
  • Building the modal form
  • Adding Javascript to autoload modal
  • Create a cookie to load modal just once.

Modal Form HTML

Create the modal markup and form in your HTML file. Insert your subscription form code inside the #modal-body div.


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Subscription Form Demo</h4>

<p>This is Bootstrap Modal popup example.</p>
      </div>
      <div class="modal-body">
      
<!--End mc_embed_signup-->

   <!-- Begin MailChimp Signup Form -->
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
	<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL"/>
	</div>
	 </div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9e279011b21a23e1aed5e4868_cca4394bc9" value=""/></div>
	<div class="form-group remove-bottom">
    <div class="col-sm-offset-2 col-sm-10">
	<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"/>
	</div>
  </div>
</form>

<!--End mc_embed_signup-->
      </div>
      <div class="modal-footer remove-top">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

I used Mailchimp’s embed form code as an example but you can use any content you like.


Javascript Popup

Option 1: Popup every time on page load

<script type="text/javascript">
 $(document).ready(function() {
     $(‘#myModal’).modal(‘show’);
 }); < /script

Option 2: Popup once only

You can make the popup load just once by adding some cookie functionality. Downlad jquery.cookie.js and save it locally on your website or use the CDN in the example below.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function() {
     if ($.cookie(‘pop’) == null) {
         $(‘#myModal’).modal(‘show’);
         $.cookie(‘pop’, ’7′);
     }
 });
</script>

Set the cookie expiry time by changing the number variable. I set it to seven days in the example.


This is a simple solution to adding auto loading popup forms using Bootstrap’s modals. It’s lightweight, cross-browser and customizable.

Reply with a comment for any questions or feedback. Click on a share button below of you found this post helpful.

Like, Tweet and Share!

Comments are closed.
Published Last updated