Up next in 10
How to Add a Contact form in WordPress website _ Kadence Blocks Tutorials
1K views
Jan 28, 2024
The video titled "How to Add a Contact Form in WordPress Website: Kadence Blocks Tutorials" is a helpful guide for WordPress users aiming to incorporate a contact form into their websites using the Kadence Blocks editor. The tutorial offers step-by-step instructions on utilizing the features provided by Kadence Blocks to create and customize an effective contact form. Viewers will learn how to design and implement a contact form seamlessly, enhancing communication between site visitors and the website owner. By the end of the tutorial, WordPress users should have the skills to easily add a fully functional contact form to their websites, promoting user engagement and interaction.
View Video Transcript
0:00
Hello everyone, welcome to Kito Blogging and today I will show you how you can create a contact
0:04
us form in your WordPress website. So for this tutorial we will be using this button bar blocks
0:10
and this is a page builder that you can use in your WordPress website and this is a free plugin
0:15
and it will work just like Elementor so you can get row layout, Advance Gallery, form and
0:22
Table of Content, Advance button like this. So let's check how we can add this form to your
0:27
WordPress website. So here go to your dashboard and if you haven't installed the Cadence Block
0:33
then go to the plugin section and here click on Add New. And here you can search for
0:40
Cadence Block. And here click on the install and activate this plugin. Now go to the pages
0:50
and here let me just add a new page. So here you can name this page like Contact, Contact
0:57
Now click on the plus icon and search for form. And you will see this option form
1:07
So this is a basic form. So let me just change the layout to narrow
1:13
Now let's preview this page. So here click on preview and preview in a new tab
1:19
So as you can see, the form is added. So let's style this form
1:24
So here you can click on the name. and here click on the setting
1:30
Now you will see more options like this. So you can either set this to required
1:35
So I will click on this button. Now you can disable this level and you can add it like fast name
1:45
So it will add this level inside the form So here next click on the email and let disable this and let say placeholder like your email Now click on the message and let disable the label and your type email address
2:08
Now the form looks good now. So click on the button and you will see an option called button
2:15
So scroll down and click on the button style. So I will select to full
2:21
So it will fill up the entire form. So you can also set it to auto but I will use the full and let's go to the top and click
2:32
on the name option. So here by default column width is set to 100%
2:38
So you can set it to 50% like this and click on email and here also you can set the column
2:45
with to 50%. So it will fit this screen like this. Now click on the form again and let's
2:52
close this email setting first. And here you will select the action after summit. So
2:59
you can either select email. So when someone fill up this firm, it will send an email to
3:05
your email address and it will by default take the administrative email that you use in
3:11
your website. Or you can redirect your users to another website. website after filling this form
3:18
You can also integrate different email marketing tools with this firm. So here I will select email and here click on email setting
3:26
So you can set a predefined email subject. So I don't use this
3:32
I prefer to add a subject line here. So to add this field click on the add field and here click on this field Now let disable this label and I will set a placeholder like subject
3:49
So in this way, user can fill up the subject. So click on it and make it to require
3:55
So that you just have to fill up the subject before submitting the form
4:00
Now scroll down and you will see a option like basing spam check
4:04
So it will automatically filter spammy email. your mailbox and send only the good ones and you can also integrate Google Recapture
4:14
with this firm. So all you need to do is integrate the API key here and it will add a Google
4:21
Recapture option to your form. So here I will not use this Google Recapture because it loads
4:28
unnecessary script and slows down the speed. So click on this button. Now click on the field style. So you
4:36
So you can change the font size of this field. So this is the first name
4:41
So you can change the font size of that. And if you want to add a color, then you can set this input color
4:49
So I will leave this to default. Now scroll down and you can set an input box shadow, but I don't use this box shadow here
4:59
in this form. Here you can set the level color and change the button style
5:04
So let me just change the button background color. So click on the button background and let me just choose a different color
5:13
And you can also change the hover color by clicking on this over icon and let me just select
5:18
to blue. So when I over this button it will change this color
5:23
You can also add a hover border. So let me just add it to white and it will add a white border around this button So let me just add it to black and when I hover this it will add a hover border around this button So in this case the border is not showing because we haven set the border width
5:45
So let me just select to border width to 2 and here as you can see the black border is activated
5:51
in this button. So let me just select to 1. Now scroll down and here click on the message option
5:59
So here you can add a success message. So when someone fill up this form, it will do a message like this
6:06
So here I will not change this. So I will leave it default
6:11
And here you can also change the container margin. So you can set margin from top right and bottom left
6:18
So I will leave this default. So let's publish this page. Now let's click on the view page. page
6:27
So let me just fill up this first. So I will select the email address from here and let me just type a simple message and
6:38
I will type test and click on submit. So as you can see the success message is shown in this form
6:46
So in this way you can add a contact us form to your WordPress website and all you need to
6:51
install the Gutenberg blocks by Cadence block and it will integrate your different
6:56
email marketing tools or you can send the email to your mail box
7:01
I hope you got the idea how this contact does firm work and if you have any doubt regarding
7:06
this, then you can ask me in the comment section and you can join our Telegram community
7:12
to discuss about blogging and WordPress. I hope you like this video and if this video helps you then hit the like button and subscribe
7:20
to my channel for more upcoming videos like this. I will see you in the next video
7:25
Thank you. Thank you