Up next in 10
How to Add Email Signup Form in WordPress _ Mailchimp _ Kadence Blocks Pro
2K views
Jan 25, 2024
Title: "Grow Your Audience: Add Email Signup Form in WordPress with Mailchimp and Kadence Blocks Pro 📧🚀" Description: In this tutorial, discover the power of building your email list by seamlessly integrating an Email Signup Form in WordPress. Learn the step-by-step process of using Mailchimp and the Kadence Blocks Pro plugin to create an attractive and functional email subscription form. Whether you're a blogger, business owner, or content creator, this guide empowers you to effortlessly capture leads and grow your audience. Watch now to unlock the potential of email marketing and enhance your WordPress website's engagement! 💻✉️ #WordPressEmailSignup #MailchimpTutorial
View Video Transcript
0:00
Hello bloggers, welcome to K2 blogging and in this video, I will show you how you can
0:04
design a section like this to your WordPress website. So as you can see, I have added social media links here and I have added a little bit of
0:12
text and I have added the email box like this so that user can easily enter the email address
0:20
and subscribe to your blog and it will integrate your MailChimp account and whenever someone
0:24
put the email address, it will add that email address to your MailChimp account
0:29
So how you can do that? So here I am using the Cadence blog plugin to achieve this
0:35
So you can also do it very easily in your WordPress website using the Cadence blog plugin
0:41
So let me just go to my dashboard and let me just open the pages here and let me just
0:48
create a new page to show this how it works. So I have opened a blank page here and let's design that section
0:55
So for this, I will click on the plus icon and I will simply search for row layout
1:01
And here as you can see, there is three sections in this row layout. So I will simply choose three equal row layout and I can adjust the width like 25% for this
1:12
first section and I can adjust something like 30% for the second section
1:20
And I will adjust width like 45% for the third section. So let me just add the social icon here
1:28
So I will simply search for icon or you can either use this icon or you can use the social icon
1:35
So in that case, let me just use this icon here and I will click on show more settings
1:41
and I will select it and increase the number of icons here
1:46
Now I will click on icon number one and I can simply search for my favorite social media icons
1:53
So let's search for Facebook, although I don't have a Facebook account
1:58
Okay, so let's add the Facebook icon here. Now let's change the second icon like Twitter
2:09
And let's click on icon three and let's add icon like YouTube
2:14
Okay, I have added three icons and you can add the link of this icon here, here in the
2:20
link field. And you can also open this link in a new tab
2:24
So let me just add some blank link here. So let's select icon two, let's add the link and I can open this link in a new tab
2:36
So social media links should be opened in a new tab. So let's select here, open this in a new tab
2:45
Okay, now I have added the social media icons. You can change the icon color from here like this
2:55
Now let's add the second section. So for this, I will use the advanced text field here
3:01
So I will use the advanced text here and I will type like sign up to get access to actionable tips
3:07
So let me just add this sign up to get actionable tips in your email box
3:25
Like that, and I will add a form here in the third section
3:30
So I will simply search for form here and I will add the form
3:34
I will delete the name field, I will delete the message field and let's select the email
3:40
field here and I will select this option and I will uncheck the show label and I will add
3:48
a placeholder. So I will add a placeholder like email address and let's decrease the column width to something
4:02
like 50% or let's say 60% here. Now let's close the email setting here and I will simply search for submit style here
4:17
Now let's change the column width. So as we have set the column width of email address to 60%, here for button, I will select
4:24
the 40%. Okay, now the submit button is added like this, but it will not properly aligned here
4:33
So let's change it to something like medium here and I will select the full here
4:41
Now let's select this section here and I will select align middle
4:46
Okay, now let's select the whole section here and let me just use the inner content width
4:54
and I will select full width and I also select the whole page as full width
5:01
Now let's click on save draft here. Now I also add a background color to this whole row layout section
5:08
So I will select background setting here and I can add a background color like this
5:14
So let's add the background color here and you can also select the text and change the
5:21
color to white. Okay, now the section is added. Let me just select it to align middle
5:29
Now let's drag it a little bit here. So let's change it to 20% from here
5:38
Now let's click on save draft here. Now let's click on preview and we have to add a padding from the top and bottom here
5:48
So let's click on here and let's top padding to something like 40 and bottom padding to 40
5:56
Okay, now the padding is set to 40 and you can also reduce this bottom section here
6:05
So let's add a demo section at the top so that it will stick to the footer here
6:12
So I will click on design library here and let's add a demo section from here
6:19
So let's add the hero section here. Okay, now let's make it to the top here and let's add another section after it
6:32
So let's insert after here and let me just add a spacer here or let's add a row layout
6:41
here and let's make the padding. So let's 50 and let's add the bottom padding to 50
6:51
So let's check how it looks in the front end. Okay, so there is a space below the section
7:02
So what I can do is add negative padding, sorry, add negative margin here
7:08
So let's add a negative margin in the bottom. So let's add a minus 27 and you can also disable a settings like content vertical padding
7:21
So let's disable it. Now let's save the draft. Now let's preview this section
7:28
Okay, I think we need to add more negative padding here. So let's select this one, select, let's change it to like 29 and let's change it to like
7:41
something 50 and top to 50. Okay, now let's preview this section again
7:51
As you can see, we have almost done it. So we need to let's add something like minus 32 pixel padding
8:05
Okay, as you can see, now it is completely stick to the footer section
8:10
So we need to fix this section. Submit style is not showing in the same alignment with the email address
8:18
So we need to fix this section. So to fix this issue, to make it align center, you need to go to your edit page here and
8:28
you need to select the form here. Now let's close this one and here you will see this option filled style
8:35
So just select this filled style option here. And here you will see this option filled row gap
8:41
So by default, it is set to some value. So we need to make it zero
8:47
So you need to find this option under the filled style here in the form and then you
8:54
need to make the filled row gap to zero. So now let's save this draft and let me just preview this again
9:03
Now scroll down and as you can see, it is now perfectly aligned to the center of email address
9:09
So in this way, you can design a section like this and let me just show you what are the
9:15
more changes needed. So you can customize the button here and you can add more social links here
9:22
So let's select the submit style here and let me just change the submit to subscribe
9:28
and I can change the input color to white and change the background color to this red here
9:37
So sorry, I have selected the email field here. So I need to select the submit style here and let's change the color to white and add
9:50
the background color to red and in hover section, let's add the background color to something
9:55
like black. So when I hover this, it will show a black background and for this, I will add a hover
10:02
border color. So let's add white. So let's change the border width to one pixel like that and as you can see, the border color
10:16
is now shown and you can also adjust the width of this section
10:22
So let's make it 50%. Let's change it to 30% and let's add this to 20% and let's change the icon color from
10:31
here or let's keep it as white. So it will look good here
10:47
So you can also add more icons by clicking on this button here like this
10:52
So let's save the draft and let's preview this here. And as you can see, it is now perfectly aligned and looking good
11:02
Now let's check it for mobile here. So as you can see, in mobile view, the text is showing in left align, so you can make
11:10
it center align here in mobile devices. So for this, you can just select this whole row layout and click on the mobile alignment
11:18
here and here you can select this option and under the mobile tab, you need to click on
11:26
center align. Now let's click on save draft and let's preview this
11:35
And as you can see, the text is now in center align and the icons are in center align and
11:40
it is looking quite good in mobile devices. Okay, now we have completed the design
11:46
Now it's time to integrate this form with MailChimp. So you can easily do that just by going to the edit page here and just select the form here
11:57
So let's change it to desktop mode here first. Let's select the form here and here you will see this option action after submit
12:05
So instead of email, you can select MailChimp here. And here one thing to note that to add MailChimp, you need to get the pro version of the cadence
12:15
blocks plugin. And in free version, you can get something like a mellow light or sand in blue
12:21
I think I'm not sure about that. So to add MailChimp just select the MailChimp here in the action after submit
12:29
And let's scroll down and here you will see this option MailChimp settings
12:34
So here you need to get the API from your MailChimp. So I have discussed this in my previous video, you can get the link in the description
12:44
And then here you need to select the audience from here. And here you can select also tag here
12:50
Let's click on required developed team and in email field, you need to select the email
12:55
field here. So now the setup is done. And whenever someone enter the email address and click on subscribe button, it will get
13:04
the email and add it to your MailChimp subscription list. And to add MailChimp, you need to get the pro version of cadence blocks plugin
13:12
Otherwise, you can use some plugins like MailChimp to design a form like this and edit instead
13:19
of cadence block plugin. So if you have any doubt regarding this, then you can ask me in the comment section
13:27
And if you found this video helpful, then make sure to hit the like button and I will
13:32
see you in the next video. Thank you
#Blogging Resources & Services
#Online Journals & Personal Sites
#Social Network Apps & Add-Ons