Increase Signups with a Welcome Mat

Dhruv Kar | November 15, 2016 -- GET UPDATES OF NEW POSTS HERE

One of the most important things I’m learning in marketing is that I can use lessons from other people’s experiments and apply them to my situation. For example, instead of testing ways to grow an email list, I find solutions that are proven to do so, at least as starting point.

Sumome has one of the best utility suites around for growing your website. These email capture tools throw up an email capture form at different times during a visit. A Welcome Mat covers the entire page during an initial visit.

Anecdata

SumoMe claims that a Welcome Mat converts “up to 10%” of visitors. Sol Orwell tested turning off Sumome, which included switching off the Welcome Mat, the Smart Bar and the Scroll Box forms. They lost ~80% of their signups.

So turns out these types of forms are important in growing your email list. While I love the turn-key functionality that Sumome provides, I like having more control over the data and it’s flow. Let’s look at how we can build our own Welcome Mat. This is perfect for a side project or your professional blog. You can learn to build a static site here.

The Code

You can copy/paste the template below to get started. You will also need to download the following libraries:

JQuery Cookie | JQuery | Font Awesome | Bootstrap

After downloading and unzipping, your directory structure should now look similar to the GIF below.

Directory Structure
Directory Structure

I modified the basic template from Bootstrap’s website to add on a Welcome Mat (welcome_mat.html in the picture above). Check the comments and replace parts to:

  • Change the title of the page
  • Replace the color (currently ‘LightGoldenRodYellow’)
  • Enter in code for your form
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Welcome Mat Test</title> <!--REPLACE THIS WITH YOUR TITLE-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Include Fonts Awesome -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Uncomment the block below if you want popup to show up everytime -->
    <!-- script type="text/javascript">
        $(window).load(function(){
            $('#welcomemat').modal('show');
        });
    </script -->
<!-- Remembers not to show popup for 7 days if visitor closed it-->
    <script src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        if ($.cookie('pop') == null) {
            $('#welcomemat').modal('show');
            $.cookie('pop', '7');
        }
    });
    </script>
    
    
<!-- Override modal size to make it full page and transition -->
<style type="text/css">
    .modal {
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
    .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    } 
  
    .modal-content {
    height: auto;
    margin: 0 auto;
    min-height: 100%;
    min-width: 100%;
    border-radius: 0;
    background-color: LightGoldenRodYellow; <!--REPLACE THIS WITH YOUR OWN COLOR-->
    }
    
    .modal-body {
    display: inline-block;
    position: absolute;
    text-align:center;
    vertical-align: middle; 
    top: 40%; left: 50%;
    transform: translate(-50%,-50%);
    }
    .modal-footer {
    display: flex;
    justify-content: center;
    bottom: 0;
    left: 0;
    width:100%;
    position: fixed;
    }
    span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;      
    }
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
   <body>
    <h3>PAGE</h3>
<!-- Modal -->
    <div class="modal fade" id="welcomemat" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            
            <h3>FORM OR TEXT HERE </h3> <!--REPLACE THIS WITH YOUR FORM ETC. HERE-->
</div>
<div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">
                <i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i>
              </span>
            </button>
          </div>
        
        </div>
      </div>
    </div><!--- End Modal -->
</body>
</html>

If you have questions like how does the Javascript work, or how to integrate this into your existing site, signup below and I’ll get back to you within a day. This is what your form should look like (may be epileptic):

Welcome Mat
Welcome Mat
comments powered by Disqus