GeneratePress 7 Years celebration discount upto $30 OFF right now! Claim Now

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.

Create Subscription Box in Generateblocks without plugin

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

Audience section in MailChimp

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

Signup form in MailChimp with 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.

MailChimp Embedded Code

Also Read: GeneratePress Review

2. Adding Subscription Box in Generateblocks

Before getting started, 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, Buttons so we will use these blocks to create a subscription box for our WordPress Website.

Four Blocks in Generateblocks

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

Container block in Generateblocks

2.) Set a Full Width Content

Full Width Container in Generateblocks

3.) Set Background Color

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

Background Color for Container Block in GenerateBlocks

4.) Assign Class to a Container

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

Providing a CSS Class to a Container in Generateblocks

5.) Add Grid Block Inside Container

Click on Add Block and Select Full Width Generateblocks Grid.

Grid Block in Generateblocks
Full Grid in Grid Block Generateblocks

6.) Now Add Headline (Not to get confuse with 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 screenshot and align text to center the whole headline.

Creating Headline in Generateblocks

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 screenshot with aligning the text to the center.

Creating Paragraph in Generateblocks with text align 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.

Custom HTML Block in Gutenberg

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 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 look like this

Subscription Box in GenerateBlocks

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 easy in your blog too.

Generateblocks is 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.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

10 thoughts on “How to Create Subscription Box in Generateblocks without plugin?”

  1. Thanks for this, why do you need a plugin when we can do it this way haha, awesome, thank you so much man!

    Cheers

    Reply
  2. Hi Suraj,

    You have earned another fan! absolutely love your guides.

    I myself consider as pro for generatepress but you are on GOD level!

    Recently I have trying to avoid elementor for one my upcoming projects so your tuts have been much help.

    One question I mainly use automizy instead of mailchimp. Is it possible to get form customized for it?

    Thanks

    Reply
    • Hi Alston,
      I haven’t used automizy till date but I think you can easily customize it.
      You simply need to know CSS code for customization.
      Thanks

      Reply
  3. Bro, your tutorials are awesome.
    What are a great content!
    I love the Generatepress theme but your tutorials make it even more.

    Question: How do you add border radius and box-shadow to all of the images you use in your blog posts?
    It looks great.
    Thanks in advanced

    Reply
  4. What!! It’s Awesome…!! I have used a plugin for this, but after watching your content, I really become your big fan because I love Generate Press Theme and you can share a lot of generating press relevant ideas.
    Big Thank You By Droidgig, Sir…

    Reply

Leave a Comment