It is a great idea to add a whitelist instructions page to your account. After users opt-in, you can provide a message on the thank you page advising them to whitelist your email address and provide a link to your whitelist instructions page.

Please watch the video below to learn how you can create a whitelist instructions page inside ClickFunnels.

Here is the link to the whitelist instructions generator: http://www.emaildeliveryjedi.com/email-whitelist.php

Add the following code to your CSS Settings inside your funnel settings:

h1 {
font-family: 'Roboto', sans-serif;
}
h3 {
font-family: 'Roboto', sans-serif;
}
h4 {
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
li {
font-size: 18px;
font-family: 'Roboto', sans-serif;
line-height: 30px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
.mobileButton {
margin: 2%;
margin-bottom: 3%;
padding: 2%;
border: solid #adadba 1px;
border-radius: 0px;
text-align: center;
font-family: verdana;
font-weight: bold;
}
.wrapper {
width: 800px;
text-align: left;
}
.container{
    margin: 0 auto;
}
h2 {
    font-size: 1.7em;
    margin: 0;
    padding: 0;
font-family: 'Roboto', sans-serif;
}
ul{
    list-style:none;
}
ul li{
    padding:10px 10px;
}
a{
    color:white;
}
ul li a{
    text-align:center;
    font-size: 21px;
    text-decoration:none;
}
.columnHeading{
    width:25%;
    float:left;
}
.headingBorder{
    padding:20px 0;
    text-align:center;
    border-top:2px solid gray;
    border-bottom:2px solid gray;
}
.endRow{
    float:right;
}
.clearRight{
    clear:left;
}
.submenuPopularAppBtn,.submenuEmailClientBtn,.submenuSecuritySoftBtn,.submenuSpamFiltersBtn{
    text-align:center;
    width:75%;
    padding:10px;
    cursor:pointer;
}
.submenuPopularAppBtn{
    background-color:#007abd;
}
.submenuEmailClientBtn{
    background-color:#7ec324;
}
.submenuSecuritySoftBtn{
    background-color:#fdab00;
}
.submenuSpamFiltersBtn{
    background-color:#eb605a;
}
@media only screen and (min-width:600px) and (max-width: 879px){
.columnHeading{
    width:50%;
}
.headingBorder{
    padding:20px 0;
    text-align:center;
    border-top:2px solid gray;
    border-bottom:2px solid gray;
}
#sSoftware{
clear:left;
}
}
@media only screen
and (min-width : 880px) and (max-width:1140px) {
.columnHeading{
width:33.33333%;
}
#sFilters{
clear:both;
}
}
/*fix margin*/
@media only screen
and (min-width:0) and (max-width:600px){
body{
  margin:10px;
}
.columnHeading{
width:100%;
}
.clearFix {
clear: both;
}
}
/*Instruction Icons*/
.instruction-icon {
float: left;
margin: 10px;
}
/* BEGIN Back to top button */
a.backTop {
  padding: 10px;
}
.backTop {
    color: #FFFFFF;
    font-weight: bold;
font-family: roboto;
    display: inline-block;
    position: fixed;
    bottom: 40px;
    right: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    white-space: nowrap;
    background: #CC0000;
}
.backTop.backTopVisible, .backTop.backTopFadeOut, .no-touch .backTop:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.backTop.backTopIsVisible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.backTop.backTopFadeOut {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .backTop:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .backTop {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .backTop {
right: 30px;
    bottom: 30px;
  }
}

Add the following Javascript snippet to your Footer Tracking Settings:

$(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.backTop');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('backTopIsVisible') : $back_to_top.removeClass('backTopIsVisible backTopFadeOut');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('backTopFadeOut');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});

You will also need to copy the HTML from line 221 through (and including) line 1268 and add this to the Custom JS/HTML element on the page.

To make it easier for you, I have included a share funnel link that you can add to your account to create this whitelist instructions page. This page includes the CSS and Javascript already. All you will need to do is copy the HTML from your own whitelist instructions.

Here is that share funnel link: https://app.clickfunnels.com/funnels/3125122/share/n0n620kiick0wg8a

Did this answer your question?