Image may be NSFW.
Clik here to view.
It is the second day of my #30daysofcoding challenge and after a few head scratches here and there, we finally have a lovely (if I do say so myself!) pop-up to allow you all to sign-up and keep updated throughout the 30 days of this challenge and beyond! You should have seen it before you read this, if I’ve done my job right!
Read on to find out how to do the same for your site, capturing leads from new visitors.
To be able to complete this tutorial you will have to installed this plugin:
http://wordpress.org/plugins/solid-code-theme-editor/
Image may be NSFW.
Clik here to view.
Select plugins in the left hand menu and add a new one:
Image may be NSFW.
Clik here to view.
Add the plugin zip file here:
Image may be NSFW.
Clik here to view.
And then make sure the plugin is activated (NB. it should change to deactivated- like below- once activated):
Image may be NSFW.
Clik here to view.
You should now have the SC Theme Editor option in Appearances:
Image may be NSFW.
Clik here to view.
Which will display this page:
Image may be NSFW.
Clik here to view.
We are ready to start making a lovely pop-up!
First you need have or sign-up to MailChimp, this allows you to have email subscribers. Once signed up or logged in you will need to create a list, you do this by selecting list in the left hand sidebar:
Image may be NSFW.
Clik here to view.
Then select create list in the top right hand corner and fill in the details:
Image may be NSFW.
Clik here to view.
Once your list have been created click onto the list:
Image may be NSFW.
Clik here to view.
This will open this page:
Image may be NSFW.
Clik here to view.
Next select sign-up forms in the top navigation and this will open this page:
Image may be NSFW.
Clik here to view.
Select embedded forms this page will open:
Image may be NSFW.
Clik here to view.
Scroll down in the Copy/paste onto your site section to a part of the code which starts at <form action= and stops at novalidate> make a note of this code you will need it for the next section. It should look similar to this:
<form action="http://chloedigital.us2.list-manage.com/subscribe/post?u=4ba0768e2344dd9dd0fc2397a&id=46913014e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
Next enter this code in the footer file just underneath <?php wp_footer(); ?>, this is a reduced version from the Mail Chimp code, you will want to change the text inside the <p> and </p> on the fourth line down to a message personal to you:
<!--popup code--> <div id="popup-overlay"></div> <div id="popup-contents"> <p>Signup to stay updated with the #30daysofcoding challenge AND receive the fashion technologist news:</p> <form action="http://chloedigital.us2.list-manage.com/subscribe/post?u=4ba0768e2344dd9dd0fc2397a&id=46913014e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <input type="email" placeholder="your.email@email.com"value="" name="EMAIL" class="required email" id="mce-EMAIL"> <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> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> </form> </div>
Change this section of the code just inserted to be your details, these can be found in the Mail Chimp code near the beginning:
<form action="http://chloedigital.us2.list-manage.com/subscribe/post?u=4ba0768e2344dd9dd0fc2397a&id=46913014e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
On the third to last line of the just of code just entered is this line:
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
You will want to make sure the ‘value’ equals an action, as this will be the word in the button which they will press to sign up. It needs to tell the user what it is they will be doing e.g ‘Subscribe’ or ‘Get Updates’.
CSS
Now we can style it! First add an image you wish the pop-up to be to your WordPress Media, for this pop-up I have made this image, as you can see I have left space at the bottom of the image for the form:
Image may be NSFW.
Clik here to view.
The first section of css I added is this:
/* =Pop-Up
-------------------------------------------------------------- */
#popup-overlay {
width:100%;
height:100%;
background:#000000;
z-index: 10000;
opacity:0.8;
position:fixed;
left:0;
top:0;
}
This will give the entire screen an overlay of a black slight transparent background. If you wish to change the background colour simply change background:#000000;
To know which code to enter for each colour have a look on this site.
You can also alter the opacity by changing 0.8, 1 is a solid background and 0 is a clear background, so enter a figure in between 0 and 1 to still maintain a slightly transparent background.
Next is the pop-up css, I have entered the code:
#popup-contents {
position:absolute;
height:500px;
width:520px;
z-index: 10001;
margin: -250px 0 0 -250px;
text-align: center;
left:50%;
top:50%;
background: url(/wp-content/uploads/2013/11/SubscribeForm30daysofcoding.png) 15px center no-repeat;
color: #FFF;
}
#popup-contents form{
position: relative;
top: 360px;
}
#popup-contents p {
position: relative;
top: 340px;
padding: 0 80px;
font-size: 13px;
line-height: 16px;
}
The ‘popup-contents’ is the box itself, the ‘popup-contents form’ is the email input box and submit button and the ‘popup-contents p’ is the message above the form.
You will need to change the height and width of the ‘popup-contents’ to match the height and width of your image, you will also have to change the background url. You need to copy and paste the file url of the image taken from the images edit page:
Image may be NSFW.
Clik here to view.
That will give you a url like this:
http://thefashiontechnologist.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-02-at-11.00.00.png
Only place this part of the url into the css background url:
/wp-content/uploads/2013/11/Screen-Shot-2013-11-02-at-11.00.00.png
A more detailed description of adding image backgrounds can be found in this post, when adding the header image.
In the ‘popup-contents form’ you may need to change the top position so it suited to your pop-up design.
In the ‘popup-contents p’ section you may need to the change top and padding values to change the position of the text to suit your pop-up.
Next I am editing the look of the button. I have entered in this code, feel free to change this code:
#mc-embedded-subscribe.button{
border: 1px solid #ffffff;
color:#ffffff;
background-color: #000000;
margin: 5px 0;
}
#mc-embedded-subscribe.button:hover{
border: 1px solid #000000;
color:#000000;
background-color: #f2f2f2;
margin: 5px 0;
}
Finally for the css you could add these two sections of code to change the colour of the glow which appears around the form input and button when active, here I have them set to a pink:
#mc-embedded-subscribe.button:focus{
outline-color: #f25566;
}
#popup-contents #mce-EMAIL:focus {
outline-color: #f25566;
}
Once you are happy with the style of your pop add ‘display: none;’ to both ‘popup-overlay’ and ‘popup-contents’, the css for both of these should now look like this, but with the details you have decided on:
#popup-overlay {
display:none;
width:100%;
height:100%;
background:black;
z-index: 10000;
opacity:0.8;
position:fixed;
left:0;
top:0;
}
#popup-contents {
display:none;
position:absolute;
height:500px;
width:520px;
z-index: 10001;
margin: -250px 0 0 -250px;
text-align: center;
left:50%;
top:50%;
background: url(/wp-content/uploads/2013/11/SubscribeForm30daysofcoding.png) 15px center no-repeat;
color: #FFF;
}
jQuery
First for add this piece of code in your header.php file:
<!-- activiating jquery-->
<?php wp_enqueue_script("jquery"); ?>Place it just before this piece of code:
<?php wp_head(); ?>
Next we need to make the javascript files, first open up your in your SC Theme Editor, it should look like this:
Image may be NSFW.
Clik here to view.
Next select js on the right and then the html5.js:
Image may be NSFW.
Clik here to view.
Now we have to make two new files, to do this enter cookie.js into the input as shown below select ‘Create File in current directory’ and this will create a new file:
Image may be NSFW.
Clik here to view.
For this file go to this webpage and copy all the code into the new file, remember to press update file at the bottom so it is saved.
Now make another file called main.js.
In this file paste this code in:
jQuery(document).ready(function($) {
setTimeout(function() {
if ($.cookie("seen-popup") != "true") {
$('#popup-overlay').show();
$('#popup-contents').css("display", "table");
$("body").css("overflow", "hidden");
}
}, 45000);
$('#popup-overlay').click(function(){
$(this).fadeOut();
$('#popup-contents').fadeOut();
$.cookie("seen-popup", true);
$("body").css("overflow", "auto");
});
$('#popup-contents form').submit(function(){
$('#popup-overlay').fadeOut();
$('#popup-contents').fadeOut();
$.cookie("seen-popup", true);
$("body").css("overflow", "auto");
});
});This code does a few things. It checks if the user has seen the popup before, if they have then they won’t see it again as we lead a cookie on their computer to stop the popup showing again and again as that would become annoying and they could turn against you! If the user does not have the cookie then we show the popup overlay and the popup contents. Once the user has submitted the form OR clicked the popup overlay to exit, we hide the popup and add the cookie. Lastly I put a timeout wrapper around my code to set the popup to show after 45secs as this helps increase conversion. The theory is, if someone is on your site for 45secs or longer then they are more likely to subscribe to your newsletter compared to someone who just landed.
Finally add these two references to these pages in the footer.php file just before <?php wp_footer(); ?>:
<!--referencing jquery-->
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/cookie.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/main.js"></script>
Day 2 complete!
Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!
The post #2 Pop-Up appeared first on The Fashion Technologist.