1. Install Sumo List Builder on your Site
Follow the install instructions on Sumo List Builder to add it to your site. You don't need to turn on the pop up yet.
2. Create a New List in SmartrMail
Next, log in to SmartrMail and create a list for the new email subscribers that the pop up is going to collect.
3. In SmartrMail Customize Sign up Form
Click into your new list and click the Get embed form button. Here is where you can set up which fields you would like to collect on your pop up.
Pro tip: The fewer fields you make people fill out, the more sign-ups you will get (there's a direct correlation). If at all possible, just make it email address only.
4. Enter Sumo's Pop-up composer
Click on "Create your First form in Justuno
5. Paste the HTML Snippet into List Builder
In SmartrMail copy the HTML snippet. Then go Sumo List Builder, and under 1. My Goal -> Collect Info with Custom code, paste the HTML into Custom Form.
You might want to apply some CSS styling to it.
Otherwise, you can go ahead and use the fancy styling of Bluethumb's pop up:
<div class="subscribe_forms-preview" id="wrapper" style="background: url('http://i68.tinypic.com/jignki.jpg'); background-size: cover;border-radius: 5px;margin: -16px; ">
<header></header>
<div id="content">
<div class="wrap" style="background-color: rgba(0, 0, 0, .4);border-radius: 5px;padding: 20px !important;;box-shadow: 0 0 200px rgba(0, 0, 0, 0.6) inset;color: white; ">
<div class="subscribe subscribe-form" style="padding-bottom: 20px;">
<h2 style="font-size:33px; font-style:bold;/* line-height:1.2 */margin-top: 0;color: white;"> Kick-Start Your Collection!</h2>
<p></p><div style=""><p style="margin-bottom: 40px; margin-top: 30px;">We're giving away a $400 art voucher to help you start your collection. Subscribe to enter. Quick, competition ends 30th September. </p>
</div><p></p>
<form accept-charset="UTF-8" action="https://go.smartrmail.com/subscribe/4qsxz8" method="post">
<div class="input string " style="margin-bottom: 5px;">
<input class="form-control" id="email" name="subscribe_form[email]" type="text" placeholder="Enter your email here..." style="width: 100%;">
</div>
<div class="submit-form">
<input class="btn btn-block btn-primary" name="commit" type="submit" value="Enter" style="/* background-color: #089FD6 !important; */ /* border-color: #089FD6 !important; *//* color:white; */ /* border: none; */ /* font-size: 1.1em; *//* font-weight:normal; */ /* padding: 8px 20px; */">
</div>
</form>
</div>
</div>
</div>
</div>Download the code as a txt file and copy and paste it into List Builder. You'll need to make 3 changes to it for your Pop up to the above code. They are:
To change the background image, paste the URL of the image you would like here background: URL('http://i68.tinypic.com/jignki.jpg')
Change the headline and body copy text as you like
Update the list URL <form accept-charset="UTF-8" action="https://go.smartrmail.com/subscribe/4qsxz8" method="post"> to your list's SmartrMail list URL. You can find that on the customise form page for your list.
6. Turn on the Pop-up
The last step is to go the Sumo and turn on your pop up. Now kick back, relax, and watch your email sign-ups roll in.