Adding a Custom Newsletter Signup Form- WordPress Jetpack Email Subscription Plugin
I went through a few hours of work just to figure out how to go around changing the newsletter form while using the WordPress jetpack email subscription plugin. This is a tough one but I think I can make this easy enough for anyone if you just follow the instructions below.
Why do I need a newsletter sign up form?
There could be a lot of your site’s users that might want to get updated if you add any content to your website. For this purpose, wordpress has a built in plugin called Jetpack email subscription plugin that will give you the possibility to that and for free even!
If you don’t have WordPress or are looking to start a blog, you can try Bluehost I use them, they’re not expensive, and you can get WordPress installed and get started in less than 5 minutes!
The original template they provide is pretty bland, and I strongly believe newsletter sign up forms should look attractive to catch your viewers eye. If your content is good, I am pretty sure you will get a high amount of readers sign up. It’s unfortunate there isn’t an easier way to edit the newsletter form, but I don’t think it’ll take you very long now for anyone to do it following my guide.
For the purpose I used a very stylish and neat design for a newsletter sign up form, I found on CSSFLow:
Newsletter Sign Up Form on CSSFLow
The image of the newsletter form:
Adding the custom newsletter signup form to your wordpress website
For this tutorial you will need to edit various files and change some codes to wordpress jetpack plugin and module files.
open the file wp-content>plugins>jetpack>modules>subscriptions>subscriptions.css
Replace the contents with the new CSS to support the new form, I’ve filtered out some unnecessary CSS from the original form, you will need to replace the URL’s of the images after you upload them.
#subscribe-email input {
}
.comment-subscription-form .subscribe-label {
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-focus-inner {
padding: 0;
border: 0;
}
section {
display: block;
}
:-moz-placeholder {
color: #999 !important;
}
::-webkit-input-placeholder {
color: #999;
}
body {
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
color: #404040;
background: #ccc;
background-image: -webkit-radial-gradient(center, circle cover, #dddddd, #a7a7a7 80%);
background-image: -moz-radial-gradient(center, circle cover, #dddddd, #a7a7a7 80%);
background-image: -o-radial-gradient(center, circle cover, #dddddd, #a7a7a7 80%);
background-image: radial-gradient(center, circle cover, #dddddd, #a7a7a7 80%);
}
.subscribe {
margin: 10px auto;
padding: 20px;
background: white;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.subscribe-pitch {
padding-left: 120px;
background: url("https://www.yoursite.com/images/email.png") 5px center no-repeat;
}
.subscribe-pitch > h3 {
margin: 0 0 12px;
font-size: 14px;
font-weight: bold;
color: #222;
text-transform: uppercase;
}
.subscribe-pitch > p {
line-height: 22px;
color: #484848;
}
.subscribe-form {
position: relative;
margin: 20px -20px -20px;
padding: 15px;
background: #fafafa;
border-top: 1px solid #ccc;
border-radius: 0 0 6px 6px;
background-image: -webkit-linear-gradient(top, #fafafa, #eaeaea 50%, #e1e1e1 51%, #f2f2f2);
background-image: -moz-linear-gradient(top, #fafafa, #eaeaea 50%, #e1e1e1 51%, #f2f2f2);
background-image: -o-linear-gradient(top, #fafafa, #eaeaea 50%, #e1e1e1 51%, #f2f2f2);
background-image: linear-gradient(to bottom, #fafafa, #eaeaea 50%, #e1e1e1 51%, #f2f2f2);
-webkit-box-shadow: inset 0 1px white;
box-shadow: inset 0 1px white;
}
.subscribe-input {
padding: 0 16px;
width: 100%;
height: 35px;
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 15px;
color: #444;
background: #fefefe;
background-clip: padding-box;
border: 1px solid;
border-color: #999 #aaa #aaa;
border-radius: 20px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px #f8f8f8;
}
.subscribe-input:focus {
outline: 0;
}
.subscribe-submit {
display: block;
position: absolute;
top: 15px;
right: 15px;
padding-left: 15px;
height: 35px;
width: 60px;
background: #60e160;
border: 1px solid;
border-color: #4c9d50 #4c9d50 #4c9d50 #55af5a;
border-radius: 0 20px 20px 0;
cursor: pointer;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-image: -webkit-linear-gradient(top, #84f087, #4cd94a);
background-image: -moz-linear-gradient(top, #84f087, #4cd94a);
background-image: -o-linear-gradient(top, #84f087, #4cd94a);
background-image: linear-gradient(to bottom, #84f087, #4cd94a);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}
.subscribe-submit:active {
background: #4cdf4d;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.subscribe-submit:before {
content: '';
display: block;
margin-top: 1px;
width: 25px;
height: 19px;
background: url("https://www.yoursite.com/images/tick.png");
}
.lt-ie9 .subscribe-input {
line-height: 33px;
}
You will also need to add a simple line in your header.php I believe this is a hack to make this Internet explorer compliant. Add this between the head tags, preferably right about the closing tag.
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Alright now that the CSS is done, we will now change the form code in the wp-content>plugins>jetpack>modules>subscriptions.php file
on line 594 replace :
echo $args['before_title'] . '<label for="' . esc_attr( $subscribe_field_id ) . '">' . esc_attr( $instance['title'] ) . '</label>' . $args['after_title'] . "n";
with
For knowledge, the arg before title and args after title tags are outputted as h3 tags that display the title area, they have been replaced with the div’s for the form.
echo '<section class="subscribe"> <div class="subscribe-pitch"> <h3>' . esc_attr( $instance['title'] ) . '</h3>';
then on line 637 look for :
<p id="subscribe-email"><input type="text" name="email" value="<?php echo !empty( $current_user->user_email ) ? esc_attr( $current_user->user_email ) : esc_html__( 'Email Address', 'jetpack' ); ?>" id="<?php echo esc_attr($subscribe_field_id) ?>" onclick="if ( this.value == '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>'; }" /></p><p id="subscribe-submit">replace that with :Notice that we are just replacing the old css divs and adding css values to the original form coding only as we want to keep the functionality of the form the same, just change its appearance.
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-<?php echo $widget_id; ?>" class="subscribe-form"><input type="text" name="email" value="<?php echo !empty( $current_user->user_email ) ? esc_attr( $current_user->user_email ) : esc_html__( 'Email Address', 'jetpack' ); ?>" id="<?php echo esc_attr($subscribe_field_id) ?>" onclick="if ( this.value == '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>'; }" class="subscribe-input" />On line 649 find :
<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-<?php echo $widget_id; ?>" class="subscribe-form"><input type="text" name="email" value="<?php echo !empty( $current_user->user_email ) ? esc_attr( $current_user->user_email ) : esc_html__( 'Email Address', 'jetpack' ); ?>" id="<?php echo esc_attr($subscribe_field_id) ?>" onclick="if ( this.value == '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = '<?php esc_html_e( 'Email Address', 'jetpack' ) ?>'; }" class="subscribe-input" />replace with
<button type="submit" value="<?php echo esc_attr( $subscribe_button ); ?>" name="jetpack_subscriptions_widget" class="subscribe-submit">Subscribe</button>
And you’re done!
Here you can create the content that will be used within the module.
You’ve just gone ahead and made your newsletter sign up form look like the brad pitt of newsletter forms ;)I’ve applied the same newsletter sign up form on another one of my sites Life and Taste and is working pretty great there. — Correction, I had to switch over to Feedburner, but will be implementing probably same design soon for that too. The reason I did that is because Jetpack subscriptions seems to be limited to just sending mails to everyone who subscribes immediately as you publish a post in wordpress, that seemed to irritate my subscribers as I post often 3-4 times a day on that site.There is no option to switch it to send mails on a daily basis, so that won’t work for me if it won’t work for my subscribers. Too bad. I hope they make that possible. Some people may need to send daily mails or weekly, getting a mail every few hours can be irritating. Word of advice though, please make backups of the files whenever you update your jetpack plugin as you may need to replace them or make changes to the newer versions of the plugin.
I will be updating if there are any required changes to be made on any future plugin changes to the core subscriptions modules, but till then this should work just fine. Feel free to leave a comment, if you have any questions or are having any problems, I’d be glad to help.
