Up next in 10
How To Add Email Newsletter Form in WordPress _ Email Signup Form _ Kadence Blocks
1K views
Jan 26, 2024
In this instructive video, viewers will learn how to seamlessly integrate an email newsletter form into their WordPress website using Kadence Blocks. The tutorial guides users through the process of adding an email signup form, enhancing their website's engagement and enabling efficient communication with their audience. With a focus on the Kadence Blocks plugin, the video provides step-by-step instructions, making the implementation of an Email Newsletter Form in WordPress accessible and user-friendly. By the end of the tutorial, viewers will have the knowledge to effectively leverage Kadence Blocks for creating and embedding an email signup form, thereby optimizing their website for audience interaction and content distribution.
View Video Transcript
0:00
Hi everyone, Upshak here and welcome to Ketublogging and this video I will show you how you can add a
0:05
newsletter form like this in your WordPress website. So as you can see, I have created a newsletter in my WordPress website using the Cadence blog
0:14
plugin and I have integrated this form with the MailChimp. So let's check how you can integrate your MailChimp in your WordPress website and collect emails
0:25
from your visitors. So for this you have to go to your WordPress dashboard
0:30
And here let me just go to the plugin section and let me just click on active plugin
0:35
So as you can see here I am using the Cadence Plug plugin. So if you are not using this plugin then you can simply install it and this is a free Page
0:43
Builder plugin based on Gutenbox. So after installing this plugin you have to go to the pages section and here I will click on Add New
0:53
Now you can set the title like Newsletter and let me just start the title
0:59
do some basic setting in this page so I will click on the page layout here and I will
1:05
hide the title and I will set the page layout to full width and I will disable
1:11
the content vertical padding okay now let me just add a heading so I will click on
1:18
plus and I will click on the advanced text here and I can simply add the heading
1:24
like subscribe to our Newsletter. And let me just select it and I can set it to align center
1:44
Now I will click on Show More Setting and I can increase the font size a little bit
1:54
Now let me just select it and I can set the spacing
1:59
So, let me just add a top margin of 30. Now let me just save this page and let's preview this page in the front end
2:12
Okay, this is how the newsletter page looks like. So let me just add more spacing from the top
2:19
So I will set the margin to around 55 and let me just click on plus here
2:29
and I will click on advanced text here and let me just do some settings like here you
2:36
will get updates directly into your inbox or something like that so let me just do
2:43
it so here you will get all the latest updates to your updates to your
2:59
inbox no spam ever something like that and I will change the H2 tag to paragraph
3:11
tag and I will make it to a line center and I can increase the font size so let me
3:19
just select the show more settings and I can change the font size here like this So you can adjust it So let make it to 30 and I will select the newsletter from here and I will click on the arrow button and I will click on the
3:41
highlight option and as you can see the newsletter word is now highlighted and you
3:48
can also change the highlighted color by clicking on the highlight setting and
3:53
And here you can change the highlight color. Okay, now the section is added
3:59
So we can add the second section. So let me just add a row layout again
4:05
So I will click on row layout and I will select the two equal row layout
4:11
And in the first section let me just add an image. So I will click on the image block and I will upload image from my computer
4:19
Okay, now the image is added. Let me just add the form in the right side
4:28
So I will search for form and I will click on add
4:33
So this form is provided by the Cadence Block plugin and here I don't want to add the message
4:40
box so I will just delete the message box here and I can change the submit button to
4:46
like subscribe. And let me just click on the button and let's change the submit style to full, something like that
5:01
Now I will select this section, form section, and I can change it to align middle, and
5:09
I will click on the image and I will click on the image section and I will set the alignment
5:15
to middle. Now let me just adjust the image size. So first of all I will change the image
5:22
to advance image so that I will get more controls over it. So let me just change the size
5:30
to medium 300 and here you can also change the max width like that. So I will set it to 300
5:42
like this and I will change the align to center and now I will select the wholequet
5:50
row layout from here and I will click on this option and I will use theme content
5:56
inner width and I will click on here and I will click on full width okay now let me just
6:04
adjust the font setting so I will click on name here and here in the name setting I
6:09
I will set it to required. And instead of labels, I will add a placeholder
6:16
So I will close this and I will copy the name and I will set the placeholder like this
6:23
Now let me just click on the email. So let's click on email setting and instead of level I will add a placeholder
6:32
So like this or you can set like email address. And it will add a placeholder in the box
6:46
Now let me just add a background in the whole row layout
6:51
So I will click on background setting and let me just add a background like this Okay now our subscribe form is added Let integrate the MailChimp with this form
7:08
So to integrate the MailChimp, let me just close this. Now click on Action After Submit and here instead of email, you can select any other email marketing tool
7:19
So in free version you will get the Mailer Lite Fluent CRM and in Pro version you will add
7:27
the MailChimp form. So to integrate MailChimp, let me just install the Pro version in this theme
7:34
So I will just go to the dashboard and I will go to the plugin and I will activate the Cadence
7:42
Pro add-on. So let me just activate this and let me just activate the Cadence Blocks Pro
7:49
Okay, now let me just go to the page and let me just save this draft and let me just refresh
7:56
this page. Okay, now I will click on the form and click on Action After Submit and I will change the email
8:05
to MailChimp. Now let's close here and here you will see this option MailChimp settings
8:16
So you have to enter the API key of your MailChimp to integrate this form with the MailChimp
8:21
email marketing tool. So here I have logged into my MailChimp dashboard
8:26
So here click on the profile here. Now you have to click on the extra option and here you will get the API keys
8:35
So just click on API keys and here you have to create API keys
8:42
So here let me just create a key here. Now you can set a label to remember this API key and just copy the API key from here
8:55
And let's go to the website and I will add the API keys here and I will click on shape
9:07
Now it asks you to select the audience so I will select the audience like this and here in the
9:14
name field I will select the first name and in the email field I will select the email
9:20
Now if you want to confirm the email, so when someone sign up this form it will send a confirmation
9:27
email to the inbox. So here to do this you have to click on required double obtain
9:34
So here in this way you can protect spam email subscribe so that whenever someone confirm the fortress
9:43
it will add it to your email box. Now you can further optimize this form like
9:50
You can set the basic spam check to on. You can also integrate Google reCapture but I don't use this
9:58
And here you can adjust the field size and here you can change the button color
10:05
So let's click on Submit Style and here you can change the button color or you can change
10:11
the button size to large. So let me just set it to medium and here you can change the background color
10:19
So let me just change the button background color like this. So in this way you can change the button color and you can change the text color also and
10:29
you can also change the hover background color So let me just change the hover background color like this so in this way you can change the color and you can also add a border radius or border width
10:42
so i will leave this like this now let's click on message setting and these are the message
10:48
whenever someone enter the email address it will send a success message like this or it will
10:54
add a error message like this so let's click on setting here and I will click on page and I will click on Permal link
11:04
So it is set to Newsletter. So let me just publish this page
11:09
Okay, now the page is published. Let's view this page. So this is how the Newsletter page looks like this and user can easily enter the name and
11:19
email address and click on subscribe button. So let me just enter my name and email address and I will click on subscribe
11:26
So it will see a submission success message. like this. So now let's add the newsletter button in our navigation menu
11:36
So let me just go to the customize option. So before that let me just copy the page URL from here and I will go to customize and
11:46
here I will click on the header setting and I will add a button in the navigation menu
11:52
So I can simply drag the button and I will add the button like this
11:59
And I will adjust the button position to like this. I will click on the button setting and here I can change the level to subscribe
12:13
And I can add that URL here. So that whenever someone click on the button, it will redirect to our newsletter page
12:21
And you can also set it in new tab. And here you can change the button outline
12:27
So I will click on field. And you can also set the button visibility to everyone locked in or locked out users
12:34
So I will set it to everyone. Now let's click on design and here you can change the button size like this
12:42
So here I will click on custom and I can set the top padding to something like 10 and I can
12:49
change the bottom padding to 10 and make it right and left to 15
12:56
Now scroll down and I don't want to add border radius so I will make it to 0 or you can add border radius of 3 or 5
13:09
And you can also add box shadow. So this is basically the button shadow and let's change the x-axis to 2 and y-axis to 2 and
13:19
I will add a blower effect of 2. So it will add a button shadow effect to this button
13:26
Now let me just publish this. Now let me just go to the home page and as you can see the subscribe button is added to our
13:36
navigation menu and when I click on this button it will redirect to our news letter page
13:43
So in this way you can collect name and email address from your visitors and send customized emails
13:49
to their inbox. I hope you got the idea how to add an email opt-in subscribe form in your WordPress website and
13:55
And if you have any doubt regarding this, then you can ask me in the comment section
14:00
And if this content is helpful to you, then make sure to hit the like button and do subscribe
14:04
key to blogging. Thank you