first, about Mailjet, it’s a recent company in emailing services, they are less famous than Mailchimp and Aweber, but they become more and more popular, as you can see in Alexa, there are several reason to consider, their API, their international support ( interface available in French, German and probably more ). You can use them to deliver your email ( SMTP replacement )

Let’s see how it has been integrated with WP Subscribers to collect email in their system?

First, you need to open an account in http://www.mailjet.com

Then we will use the API access, so please log in, go to your account and locate the terms :
REST API , then click on Master API Key

You will be able to note down the 2 keys :

API KEY =   71ac39bca9c590994790d4ba94194cc4

SECRET KEY =   e8c8cdde01c1c384267e691031291593
You are done for this part, you will have to put these keys in WP Subscribers

in the submenu of the plugin in your wordpress admin bar, please select : others settings

Fill MailJet in WP Subscriber api and secret key

You can save, and swith to the usual section : Setup Optin Code

Create a new HTML Opt-in Code as follows

put this value for Form Action URL :  /wp-content/plugins/wpsubscribers/mailjet.php

be careful to put the starting “/” or if you are not sure put your wordpress blog domain like :

http://www.wpsubscribers.com/wp-content/plugins/wpsubscribers/mailjet.php

in form EMAIL field : put  email

for now, Mailjet supports only email , it is not possible to add any additionnal field in the form, so don’t email us about it we can’t do anything from now, we will update when it will be available.

Hidden fields :  <input type=”hidden” name=”list_id” value=”xxxxx”>

Now you need to replace xxxxx by the number of your email list ( you can create as many email list you need ) but to find this ID value in Mailjet interface, it is quite hidden, so I did a video for you.

How to find email list ( contact list ) in Mailjet ?

one you have replace the list ID, you are done, the popup will send the email collected to mailjet, and you won’t  

Today let’s see a tutorial about how to make a popup without a subscribe button. directly optimized with JQuery flexible section of custom popup editor.

Here the live example and the screenshot :

To do that I use custom CSS to design the button and Custom jQuery for the action

The html is :
<div class="bouton grand rose divcenter">
<div>
<p><strong>Votez pour Serial-Cooker.com</strong><br /><small>Concours Blog Cuisine jusqu'au 30 avril 2012</small></p>
</div>
</div>

Custom CSS :
{text-align: center;font-size: 25px;font-weight: bold;font-family: arial,verdana,tahoma;color:#000}
.bouton{text-align: center;font-size: 25px;font-weight: bold;text-shadow: 1px 1px 1px black;font-family: arial,verdana,tahoma;cursor: pointer;}
.bouton{border: 2px solid #dfe0db;border-radius: 55px;-moz-border-radius: 55px;-webkit-border-radius: 55px;-khtml-border-radius: 55px;font-size: 24px;font-weight: bold;color:#fff;}
.rose{background: #d3133c;background-image: -moz-linear-gradient(100% 100% 90deg, #F36B91, #F34276 );background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F34276), to(#F36B91));margin:0 auto;}
.rose:hover{background: #d3133c;background-image: -moz-linear-gradient(100% 100% 90deg, #F34276, #F36B91 );background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F36B91), to(#F34276));text-shadow:none}
.grand{width:555px;height:113px;}
.grand div{text-align:center}
.grand div p{font-size: 24px;font-weight: bold;color:#fff;padding-top:10px;margin:0;line-height:20px;}
.grand div p strong{font-size:30px;line-height:50px;}
.grand div p small{font-size:15px;line-height:15px;}
.wpslink{color:#fff;text-decoration:none}
.wpslink:hover{color:#fff;text-decoration:none}


And Custom jQuery :

jQuery(".bouton").click(function() {jQuery.modal.close(); window.open('http://www.marieclaireidees.com/sap/blogcuisine2011/entrant/54570#sharetools');});

• Go to http://feedburner.google.com
• Enter your feed URL
  
• Complete with your informations
  
• In the next screen you can configure more feedburner, in your case use the link “Skip directly to feed management”  and click on Publisize > Email Subscriptions And Activate the service
• Now you have a page with the subscription form
  
• Now just copy / paste the form information into Setup Opt-in Code in you WP Subscribers plugin
  
• Name the Opt-In code, clic on “Detect your form code”
  add this code in other fields :<input type=”text” name=”captcha” id=”verifyBox” style=”width:120px” />

  and Save

• Now you can use the FeedBurner Opt-in Code in all your PopUp, header bar, footer bar, …

To make this tutorial , we will use another plugin called WP Polls, you can download it here

http://wordpress.org/extend/plugins/wp-polls/

you will see, it is very easy to use it, if you think we need to make a video to manage this part, just ask

1 ) Download WP Polls , install and activate it in WordPress

You are probably skilled to install it easily
manually, or searching in the Plugins wordpress directory

http://wordpress.org/extend/plugins/wp-polls/

2 ) Configure a set of Polls

Create quicky any polls you want, in our case, we ask what color they prefer, ( to tease their sense of curiosity about why we ask this question ), or what mobile they own, anything relative to your activity

3 ) Create a custom optin

in Content, you need to put the shortcode

[poll id="-2"]

you can put any of your own text below or on top of the polls

you have 2 choices, either you want to fix the polls which will be displayed and you just need to put the appropriate ID in the shortcode

or you use [poll id="-2"] and the polls will be randomly displayed.

in Custom CSS , please add these lines of code

{padding:20px}
{border-radius: 15px;}

first line will define some space around your content and the poll, so it will be nicer to read and reply
the second line will round the corner of the popup, to make it a little bit more sophisticated.

in Custom jQuery : ( Optional )

jQuery(‘#popup a’).click(function(){
jQuery.modal.close();
});

this line is optional, it will close the popup on any click on a link. but if you want to do it on a submit form action, you can use another code ( we will publish more code like this )

that’s ALL !  you are done.

now you will be able to list this survey or polls in any page you want, but please be aware for now, there is no action to know they didn’t reply yet ( on a WPSubscribers point of view ), only the WP-Polls will rotate or display the results .

please let  us know what you think and what could be improved to make the best popup with poll for wordpress plugin.

SEE THE DEMO ( it’s a live test in a french web site )

As you can see on the demo page, there’s a popup with an opt-in form inside, so we need to do 2 things: create a custom popup and then put in the custom opt-in form:

(View on Youtube)

Step 1: Locate to the popup that you want to add a countdown timer and add these lines of code to the “Custom jQuery” box:

jQuery(document).ready(function($) {
if ($("#wps_countdown_dashboard").length > 0){
$('#wps_countdown_dashboard').css('display', 'block');
$('#wps_countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': 0,
'sec': 15
},
omitWeeks: true,
onComplete: function() { $.modal.close(); }
});
}
});
(Change the hour, min, sec value… as you want)

Then press “Save Changes” button and your countdown timer is ready!

A live example of this tutorial is here: http://www.wpsubscribers.com/demo/category-5/post-with-popup-style-9.html

Step 2: (Optional) By default, my plugin will add the countdown timer to the end of the main popup content, however, you can change this location by switch the popup content text editor to HTML mod and then add these lines of code in anywhere as you like:

<div id="wps_countdown_dashboard">
<div class="dash days_dash"><span class="dash_title">days</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash hours_dash"><span class="dash_title">hours</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash minutes_dash"><span class="dash_title">minutes</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
<div class="dash seconds_dash"><span class="dash_title">seconds</span>
<div class="digit"></div>
<div class="digit"></div>
</div>
</div>

Step 2: Choose OptimizePress theme and then select function.php file to edit:

Step 3: Find these lines of code in the function.php file ( depending on the version of OptimizePress, you may need to add the lines :

if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}

and replace  with: ( or adapt the lines to have )
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}

(Change 1.3.2 to 1.7.1)

Now your theme is working with Wpsubscribers plugin

Wpsubscribers plugin works with all standard WordPress themes. In order for my plugin works correctly, your theme must call <?php get_footer(); ?> or <?php wp_footer(); ?> function, it’s Ok with almost 99% WordPress themes out-there.

In case, your Thesis theme can’t work with WPSubscribers plugin due to its own structure, this tutorial will show you how to make your Thesis theme works with this plugin:

Step 1: Login to your admin area and go to “Thesis OpenHook” page:

Step 2: Go to “WP Footer” box, and paste in these lines of code:
<?php
if (function_exists('wps_content_popup_footer')) { wps_content_popup_footer(); }
if (function_exists('wps_facebook')) { wps_facebook(); }
?>

or: (If your popup has problem with IE)

<script type="text/javascript">
jQuery(document).ready(function($){
if ($("#popup").length > 0){
$("#popup").modal({
onShow: function (dialog) {
if ( $.browser.msie ) {
if (!dialog) dialog = $.modal.impl.d
dialog.container.css('height', 'auto');
$.modal.update();
$.modal.setContainerDimensions();
$.modal.setPosition();
}
}
});
}
});
</script>
<?php
if (function_exists('wps_content_popup_footer')) { wps_content_popup_footer(); }
if (function_exists('wps_facebook')) { wps_facebook(); }
?>


Don’t forget to stick on the “Execute PHP on this hook” checkbox.

Press save button and your Thesis theme is now ready for Wpsubscribers plugin.

The live demo of this tutorial at here: http://www.wpsubscribers.com/demo/category-8/post-with-custom-opt-in-form.html

Create a new custom form:

Step 1: You need to go to “Create Custom Opt-in Form” tab and stick the checkbox as image below:

Step 2: Customize your new form, for example:

- If the advance text-editor and color-picker is not avaible, you need to press “Save Changes” button first.

Step 3: After finish edit your new form, please press “Save Changes” button and notice the new created custom-form ID, in my example, it’s 0:

Put this new-created form anywhere:

In my case, the new-created form has the ID is 0 and therefor, if I want to display this form in the post/page content, I’ll insert this shortcode in the location I want:
[wps_custom_form id=0]
and if I want to display this form not in post/page content but in other locations, I need to modify my theme template file, and put this code in:
<?php wps_custom_form('0'); ?>

Put this new-created form in sidebar:

Additionaly, you can put this form in the sidebar by this way:

A bit of customization:

In order to create the form like this:

I just need to add these line of codes to the “Custom CSS” box (for old version of plugin):
{float:right;width:50%}

There’re 2 things we need to do:

1. Create a facebook connect button.
2. Create a custom popup and put the FB button in.

Here we go:
Step 1: Create your Facebook connect button
1.1 Go to http://developers.facebook.com/setup to get your new Facebook Application (If you don’t have one).
1.2 After that, Facebook will give you App ID and App Secret key.
1.3 Put these info to “Facebook Opt-in” admin panel, for example:

1.4 Press “Save Changes” button.

Step 2: Create a popup (with your offer as well!)
2.1 Go to “Create Opt-in Forms” in Wpsubscribers admin panel, and then choose “Create Opt-in Popup” tab.
2.2 Create a new popup with template is “custom popup“:

- As you see in the screenshot, the “Content” field didn’t has advance text-editor, so we’ll press “Save Changes” button first.

2.3 After the text-editor is ready, I’m going to put my offer in this new popup, and don’t foget to specify this popup width and height:
{width:700px;height:350px;background:#ddd;padding:30px}

2.3 Put the Facebook Connect button into this new popup:
- Press the “HTML” button on the text-editor:

- Copy and paste one of these codes below into the popup:
<fb:login-button size="large" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="xlarge" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="medium" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="small" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

<fb:login-button size="icon" v="2" perms="email" autologoutlink="true">Get Instant Access</fb:login-button>

Then press “Save Changes” button and your custom popup is ready.

- This connect feature of Facebook itself couldn’t work work with IE so here is the solution for you:
Fix Facebook Connect And XFBML Not Showing Up in Internet Explorer [IE7, IE8, IE9]:
http://digitizor.com/2010/07/06/fix-facebook-connect-xfbml-not-showing-ie/