By now, I’m sure you know about our love for the Jetpack plugin for WordPress. It comes with a several easy-to-use features that can make your blog more organized and more likely to attract readers. One of these features is an opt-in form that allows readers to sign up for automatic emails each time you publish a new blog post. The default opt-in form is pretty clean already but if you want to make sure if fits with your brand, you can further customize it using CSS codes. If you need a CSS update, click here! Otherwise, keep reading…
In this tutorial, I’ll share how to customize your Jetpack opt-in form in three steps. I’m beginning with the Genesis Sample Theme (uncustomized) so depending on what theme you’re using, your form will probably have different colors and fonts to start.
To add the opt-in form to your website, first go to Appearance > Widgets. You’ll see a widget called “Blog Subscriptions” on the left of your screen. Drag that over to your Primary Sidebar (it can really go anywhere, but in this tutorial I’ll optimize it for your sidebar).
View your site and you should see this in your sidebar:
First let’s change up the text! Go back to your Widgets and change the text to whatever you’d like it to say. As you can see below, I changed the widget title, removed the optional text, and changed the text of the subscribe button.
Here’s what the opt-in form looks like after those changes:
So, the widget consists of three sections – the widget title, the text area, and the subscribe (GO) button. To style these elements, we’ll have to add some CSS. Assuming you have Jetpack activated, you’ll see the Edit CSS section under Appearance in your WordPress Dashboard. I always recommend that beginners add extra CSS this way, rather than directly into the stylesheet. Adding codes to this page lets you preview and undo changes in case you make any mistakes.
1. Customize the Widget Title
To customize ALL widget titles:
.widget-title {
font-size: 15px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
To customize ONLY the subscription box title:
.jetpack_subscription_widget .widget-title {
font-size: 15px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
Please note: depending on what theme you’re using, the CSS class of your widget title may be different than mine. Genesis calls the widget title .widget-title, but you may need to use the inspect element tool to find your specific class.
This is how my opt-in form looks after customizing the widget title:
2. Customize the Text Area
Next we’ll customize the text area! I’m going to add some padding to the text area, change the font size, change the border color, and adjust the width. Here are the codes:
#subscribe-email input {
width: 85%;
height: 40px;
padding: 10px 8px;
font-size: 15px;
float: left;
border: 1px solid #ffb2a0;
}
Here is the result:
3. Customize the Submit Button
Lastly, we’re going to make the “go” button fit nicely next to the text area and add some color to it.
#subscribe-submit input {
background: #ffb2a0;
width: 15%;
padding: 0;
border: 1px solid #ffb2a0;
height: 40px;
}
Here is the final result!
Of course, you’ll want to change the colors, font sizes, spacing, etc. to match the style of your own website. Let me know if you have any questions or if you’re interested in any related posts in the future!
Emily says
Great tips on this, thank you!
Maritza says
oooh – I am all over this. Going to try it out now. Thanks so much for helping us make our blogs prettier!
Alex says
Great little coding tip! Thanks for the share! There must be something overwriting these commands in my CSS, because a few elements wouldn’t work properly, but I fought with it and I think I’ve gotten it to work!
Alex says
What a great little tip! Thanks for the share! There must be something overriding this in my CSS because some parts of it wouldn’t cooperate. I did my best to fix that though and I think it worked out well! xo
sassi says
i love these tutorials, thank you so much!
can you also show us how to customize the comment section of jetpack?
Anna says
Hi. Could you help me with customizing my opt in form when it’s in the footer?
Jennifer says
Hi Anna! I might post a tutorial about this sometime in the next few months, otherwise I can help you customize it at my hourly rate. Send over an email if you’re interested! jennifer@earlgreycreative.com :)
Cameron says
Thanks so much for this tutorial! Everything worked great except when I tried to customize the “submit” button. Any idea why? Thanks!
Jennifer says
Hi! Sorry about that, I’m not sure why it’s not working. Feel free to email me and I’d be happy to check out your site specifically! jennifer@earlgreycreative.com
Asaf Braverman says
Hello Jennifer,
Same here. The submit (GO) button doesn’t pick up the CSS. Did you figure out why the same happened for Cameron?
Thanks in advance,
Asaf
Jennifer says
Hi Asaf,
I’m not sure why it isn’t working, but I will gladly check out your website and figure it out for you. Send me an email at jennifer@earlgreycreative.com!
Jennifer
Jake says
This is great! Thanks, Jennifer.
I’ve followed the steps, although now when I try to click on the text area to enter an email address , it doesn’t allow me to click in it and type.
Do you have any ideas what could be happening here?
Thanks,
Jake
Jennifer says
Hmm that’s weird! Feel free to email me at jennifer@earlgreycreative.com and send a link to your site. I’ll try to figure it out!
JAMIE Barnes says
Worked perfectly! Thank you SO much!
Thabiso says
, iyooooo, this is exactly what I’ve scratching my head around, thanks alot,you’re a star
Marc says
hey! cool tweak, but somehow my subscribe button stays the standard grey. is that my theme?
Jennifer says
Sorry about that! It might have something to do with our themes being different. Feel free to send me an email with your site url and I can check it out for you! jennifer@earlgreycreative.com
Keir Briscoe says
Thanks so much for this super easy to follow instruction! This is stuff I have been trying to figure out for months!
Tom says
Brilliant. Thank you for this. I got there with a bit of playing around. Am now trying (so far in vein!) to replicate this tip with the search form. Very useful post.
Gaurav Verma says
Great style for jetpack subscription box. thanks
B says
Hi!
I was so excited to read this post as I am having a dilemma changing my subscribe button colour. But it hasn’t worked either :(
Could you please take a look and suggest what I can do?
Thank you!
thebhivelifestyleblog.com
Jennifer says
Hi there! So your code should look something like this:
#subscribe-submit > input[type=”submit”] {
background-color: #d995c8;
}
I hope this helps! If not, feel free to send me an email at jennifer@earlgreycreative.com :)
Dave says
I found the solution for the button color:
#subscribe-submit input {
background-color: #6ca21e;
}
Jennifer says
Thanks Dave!!
Will says
Dave / Jennifer,
Great post! Thanks for the information. Would you be able to help with centering the email input box and Submit button within the widget and border?
Also, any thoughts on adjusting the width and centering my Search widget? Any help would be greatly appreciated. Thanks again!
Link: http://www.valueofapenny.com/
Jennifer says
Hi Will!
The width of the email input box should actually be 85%. My mistake. That will help fill the width of the widget. I hope that helps!
I’m not sure I understand how you’d like the search widget to be customized differently, but if you send me an email with screenshots, I’d be happy to help! jennifer@earlgreycreative.com
Anikwai says
What about the content of the post when you subscribe. That is what you received in your inbox. How can I customized it?
Jennifer says
I think Jetpack is pretty automatic so it just delivers your post to readers in a default way. I’ll look into this for a possible future post!
Alok Patel says
Really helpful … but I want some help of you or any other commenter. how can I change my font color when type email address on the email box. my footer color is black and mailbox font color comes black too that is shows like fully dark. plz, help me or give a code of this in reply.