How To Add Email Subscriber Box in GeneratePress Theme Without Plugin

Are you looking to add email subscriber box in GeneratePress theme without using a plugin?

If you are a blogger, affiliate marketer, deals provider, or almost anyone who has a website collects an email address to its users to connect or interact with them.

Generatepress theme lets you embed the email subscription form in your website at any place without using any additional plugins.

In this tutorial we are going to learn all these things:

• Use of Mailchimp form.
• GeneratePress elements module.
• GeneratePress hook element.
• Embedded form in GeneratePress theme.

I will add this form below the main content of your blog post like the below picture.

Your users will add their emails and click on subscribe button, the email gets saved on your Mailchimp account successfully.

Here is the video tutorial:-

There are lots of Generatepress websites that are already using email subscription forms and collecting their user’s email addresses to give the best deals, tips & tricks, and secret strategies to their audience.

You can read our GeneratePress free vs premium tutorial to know which theme is better for you or you can also read our detailed GeneratePress review.

Note: You need a GeneratePress premium theme if you want to add a subscriber box to your website. The free theme offers limited features so you need the GP premiums’ elements module to add this feature.

So, without further delay let’s get started.

Why Use MailChimp?

I am going to use Mailchimp to embed the subscription box on your website. The best thing about Mailchimp is you can start for free.

You don’t need to spend a single penny while starting. You just need to create a free account on Mailchimp that cost nothing.

Moreover, you will get the limit of collecting 500 contacts, and 2500 sends per month with a daily send limit of 500.

If you are a beginner then these milestones are enough for you.

Additionally, you can create various signup forms including form builder, embedded forms, subscriber pop-ups, form integrations, etc.

Add Subscriber Box in GeneratePress Without Plugin

1. Get MailChimp Embedded Form Code

1.) First, Go to the Mailchimp official website and create a new account or log in to your existing account if you have any.

2.) After successfully creating your account, click on the Audience > Signup Forms then click on select under the Embedded forms.

3.) Now, here you can customize your subscriber form or whatever you need in your email your form. We need only the email of our users so we put only the email field on the box.

After customizing the form click on the continue button.

4.) Now you will get the embedded code generated by Mailchimp. You don’t need to copy the whole code you just need to copy the action URL generated by Mailchimp and paste it into the below code.

2. Add Subscriber Box using GeneretePress Elements Module

So, let’s add the email subscription box to your website using the Generatepress premium theme.

1.) Log in to your website dashboard then click on Appearance > Elements > Add New Element > Select Element as Hook then click on create.

2.) Name the element as a Subscriber box. Copy the below code and paste it into the hook box.

<div id="mc_embed_signup" class="newsletter-section">
	<h2 class="wpbloggerbasic-gp-subscriber-text">Stay Connected with us</h2>
<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate="">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true" placeholder="Enter your email here">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
	<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>    <! – real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d8de62ebda36d95ee82d4f403_dd12e2da6f" tabindex="-1" value=""></div>
    </div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

3.) Now replace the ‘#’ with the code which you copy from the Mailchimp embedded form code.

4.) Your form code now looks like this after pasting the action URL in the place of ‘#’

Here we will collect email only, therefore, we are using an email input field only, you can customize the code and collect Names, Emails, Addresses, Phone Numbers, etc.

Furthermore, Mailchimp uses JavaScript to validate your email so, we need to use mc-validate.js in the above code.

5.) Scroll down to the hook settings and select hook location as generate_before_comments_container. You can choose the location where you want to show the email subscriber box.

6.) Now go to the Display Rules and select the location as Post.

7.) Hit the publish button.

3. Style Subscriber Box using CSS

After doing all the above steps, your Subscriber box is visible but it is not looking good. You don’t need to think you have done something wrong.

You need to style the email subscriber box and make it attractive.

Note: If you haven’t activated the color module in Generatepress you need to activate it first. You can change the subscriber button color from the colors module in Customizer.

To activate the color module, go to Appearance > GeneratePress > Colors > Activate.

To change the button color module, go to Appearance > Customizer > Colors > Buttons.

After doing all the above settings follow these steps:

• Navigate appearance > customize
• Scroll down and click on additional CSS
• Copy and paste the below subscriber CSS code
• Hit publish button.

.wpbloggerbasic-gp-subscriber-text {
    text-align: center;
    padding: 20px 0 10px 0;
    color: #fff;
    font-weight: 700;
}

.newsletter-section {
    background: #729cdb;
    height: 200px;
    margin: 20px 0;
    border-radius: 10px;
}

.newsletter-section #mc_embed_signup {
    text-align: center;
}

.mc-field-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media (min-width: 768px) {
    .mc-field-group {
        padding: 0px 150px 20px 150px;
    }
}

@media (max-width: 768px) {
    .mc-field-group {
        padding: 20px 0;
    }
}

.newsletter-section input[type="email"] {
    padding: 15px 30px;
    font-size: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

.newsletter-section input[type="submit"] {
    padding: 15px 30px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

@media (max-width: 768px) {
    .mc-field-group {
        flex-direction: column;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .newsletter-section input[type="email"] {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-right-width: 1px;
    }
}

@media (max-width: 768px) {
    .mc-field-group input[type="email"] {
        margin-bottom: 5px;
    }
}

@media (max-width: 768px) {
    .newsletter-section input[type="submit"] {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
}

#mce-success-response {
    text-align: center;
}

The button color is default as your website color. you can play with colors and change them that matches your brand.

4. Results

Here are the results of your subscriber box in the GeneratePress theme looks.

When someone enters their email address and hit on subscribe button, you will get their email address on your Mailchimp account.

You can see all your email subscribers in your Mailchimp account. Just login to your account then click on all contact under audience.

Also Read:- GeneratePress vs Kadence: Battle for #No 1 Theme

Conclusion

This is how you can add email subscriber box in Generaterpress theme without plugin. This is a simple solution to add any kind of WordPress form to your website.

The best thing is you don’t need any additional plugins which slow down your website speed.

If you are not a GeneratePress premium user, you definitely use the premium features to create a professional-looking website or blog.

Let me know in the comments box below if you get any issues while applying above mentioned methods.