How to Create Subscription Box in Generateblocks without plugin?

Learn how to Create a Subscription Box in Generateblocks without plugin. With the rise of Gutenberg Editor (Block Editor), you can do many more things than Classic Editor.

Here you can accomplish even more with the latest Generateblocks plugin.

If you are not familiar with Generateblocks then it is a lightweight WordPress block that can almost accomplish everything. It is developed by Tom Usborne, the same developer behind GeneratePress Theme.

Generateblocks and GeneratePress, the combination of both the plugin and theme work great, and I am sure you are going to love it.

Steps to Create Subscription Box in Generateblocks Without Plugin

If you are using the GeneratePress theme then I have already a tutorial to add subscriber box in GeneratePress theme without a plugin. This is a similar tutorial and here we are going to use MailChimp Embedded forms.

1. MailChimp Embedded Form Code

Here we are using MailChimp Embedded forms so let’s generate the code.

1.) Go to MailChimp and login/signup your account.

2.) Go to Audience > Click on View Contacts

3.) Now Go to Signup Forms and Select Embedded Forms.

Now you can see the code generated by Mailchimp. You don’t have to copy the whole code. You will get the code down below.

Here, you just need to copy the action URL generated by MailChimp and Paste below in the code.

Also Read: GeneratePress Review

2. Adding Subscription Box in Generateblocks

Before starting, you need to install Generateblocks, Go to Plugins > Add New > Search Generateblocks > Install and Activate the plugin.

After that go to your post or page where you want to display a subscription box. I am creating a homepage so I will use a page with full width (without any sidebars)

Generateblocks use 4 blocks only: Container, Headline, Grid, and Buttons so we will use these blocks to create a subscription box for our WordPress Website.

1.) Add a New Block: Click on Plus Sign (+) and Go to GenerateBlocks and Click on Container

2.) Set a Full-Width Content

3.) Set Background Color

Choose any color you like to set as background color. The color is for a whole container.

4.) Assign Class to a Container

Go to Advanced and assign a CSS Class newsletter-section to the whole container.

5.) Add Grid Block Inside Container

Click on Add Block and Select Full Width Generateblocks Grid.

6.) Now Add a Headline (Not to get confused with the Heading)

The headline is one of the four blocks of Generateblocks. so don’t get confused with the default Heading block.

Write your text as in the screenshot and align the text to center the whole headline.

7.) Write a Paragraph Under Headline

Again Click on Add Block and select Headline and under Element choose Paragraph and write your Text as in the screenshot with aligning the text to the center.

8.) Add Custom HTML Block

Now click on Add block and add Custom HTML block to insert the code. Copy and paste the below code within the Custom HTML.

Replace action URL (#) with the above form URL generated by MailChimp.

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup" class="newsletter-section">
<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>
<!--End mc_embed_signup-->

3. Styling Subscription Box in Generateblocks using CSS

• Go to your Appearance > Customize.
• Go to Additional CSS.
• Copy and Paste the below Subscription Box CSS code.
• Hit the Publish Button.

I have tested the following code with the full width without any sidebars so if you are using left or right sidebar then please adjust the code below to match your requirement.

.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: 0 250px;
    }
}

.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;
    }
}

4. Result

The subscription box in Generateblocks looks like this

Bottom Line

This is how you can Create Subscription Box in Generateblocks without plugin. The whole process is easy and simple, you can implement it easily in your blog too.

Generateblocks is a great plugin to start with and it is compatible to almost every WordPress Theme.

If you have feedback/queries then please don’t forget to comment below.