How to setup and beautify Jetpack subscription form on blog?

WordPress is one of the best blogging platform out there and it’s likely that its popularity has continued to grow since then. Several key factors contribute to WordPress’s widespread adoption and success:

1. Customization
2. Ease of use
3. Flexibility
4. Opensource and Free
5. SEO friendly
6. Mobile friendly
7. Largest community
8. and so much more…

Jetpack is of the plugin we use on Crunchify. Not all the functionality but only two of many.

VaultPress backup

We are using VaultPress backup on Crunchify.

Jetpack Subscription form

Here is a subscription form which I’m using on Crunchify.

Let’s get started on how to create similar form for your WordPress site.

Step-1.

Download and Activate Jetpack plugin

Step-2.

Enable Jetpack’s Subscription module.

Step-3.

• Go to WordPress Dashboard
• Click on Widget
• Add Blog Subscription widget. Possible after post section.

Step-4.

Beautify your widget. Here is a CSS code which I’m using on Crunchify.

.jetpack_subscription_widget .widget-title {
	color: #fff;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.4;
}
.jetpack_subscription_widget p {
    font-size: 15.5px;
    line-height: 24px;
}
#subscribe-email input {
    width: 98% !important;
    margin-right: 20px;
    border-radius: 5px;
    padding: 11px 15px 12px;
    font-size: 16px;
}
#subscribe-text {
	margin-bottom:15px;
}
#subscribe-email {
    margin-bottom: 15px;
    display: inline-block;
    width: 75%;
}
#subscribe-submit {
	display: inline-block;
}

For Mobile/Tablet view, add below CSS to to your theme’s style.css file.

	.jetpack_subscription_widget {
	    padding: 30px 30px
	}
	.jetpack_subscription_widget .widget-title {
	    font-size: 24px;
	}
	#subscribe-email {
	    width: 66%;
	}

And you should be good. We have dedicated Newsletter subscription page on Crunchify. This setting applies to that short code too.

Let me know if you face any issue setting it up. Want to see live demo? 👇