Up next in 10
How To Create A Contact Us Page in WordPress _ Contact Form in WordPress
16K views
Jan 25, 2024
Title: "Connect with Your Audience: Create a Contact Us Page with Contact Form in WordPress 📧🌐" Description: In this user-friendly tutorial, learn how to effortlessly create a Contact Us page in WordPress and integrate a contact form for seamless communication. Whether you're a blogger, business owner, or website administrator, establishing an accessible contact point is crucial. Follow the step-by-step guide to customize and embed a contact form, enhancing user engagement and streamlining communication with your audience. Watch now to discover how to create a professional and user-friendly Contact Us page on your WordPress website! 🚀💬 #WordPressContactForm #WebsiteCommunication
View Video Transcript
0:00
Hi everyone, welcome to KeyTube blogging and in this video I will show you how can create
0:04
a contact us page like this in your WordPress website. So here I am using the Cadence theme and Cadence Blogs plugin to design this page
0:12
So the form is coming from the Cadence Blogs plugin. So let's check how can create a contact us page like that in WordPress
0:20
So for this let's go to the WordPress dashboard and let's go to the plugin and I will click
0:24
on add new button. And I will simply search for Cadence Blogs and I will install this plugin Gutenberg Blogs
0:32
by Cadence Blogs. Just install this plugin and if you found this content helpful then make sure to hit
0:38
the like button. So let's activate this plugin. Okay now the Cadence Blogs plugin is activated in our WordPress website
0:48
Let me just go to the appearance and click on themes here and as you can see the Cadence
0:51
theme is activated here. So to create the contact us page I will go to pages
0:57
So let's click on all pages here first and let's click on add new button
1:03
And I can name the page like contact us and let's click on settings and in the permalink
1:10
I can simply set it like contact. Now let's publish this page first
1:17
Now let's view the page and as you can see this is how the contact us page looks like
1:24
So we need to remove the contact us title and make it a full width page
1:30
So for this let's go to the editor. Let's close this one and I will click on this button and I will disable the page title here
1:39
and I will make it full width. Now let's click on update
1:44
Now let's check how we can create the contact us page. So for this we need a row layout of 50 by 50 row layout
1:53
So let's click on here and I will search for row layout and I will search for two equal
2:00
row layout of 50%. Now I can click on plus icon and I will click on advanced text here and I will add the text
2:09
like this. So let me just copy the text here and I will paste the text here
2:15
Now I will click on show more settings here. Let me just change it to advanced text first and let's change the font size to 55 like that
2:27
Now let's click on whole row layout first and let's add a background color here
2:33
So I will click on background setting here and I will add a background like this and
2:40
let's add a padding and margin. So I will add a top padding of 120 and I will add a bottom padding of 120
2:50
Now let's click on whole row layout here and I will click on use theme content inner width
2:56
and I will click on this button and make it full width
3:00
Okay now it is looking quite good. Now let's copy the text
3:06
So let me just copy this text from here. Now I will hit enter and I will paste the text
3:16
Now I can change it to advanced text here and I will change it to a paragraph
3:21
Now I can adjust the font size. So let's adjust the font size to something like 19 pixels and you can link the Twitter
3:31
telegram link like that. Now let's add the form in the right side
3:36
So I will simply search for form and I will add the form like this
3:42
Now let's update this page first and let's refresh this page and this is how the contact
3:51
us page looks like but I don't want the label like name, email, message
3:57
So what I can do is just click on the form here and in the name setting I will click
4:03
on required and I will uncheck the show label button. Instead of I will add a placeholder like first name and I will click on email here
4:18
Let's click on email setting and uncheck the show label and instead of add a placeholder
4:23
like email address. Now in the same way let's click on message setting here
4:35
Change the label and add the placeholder. Type your message here. Ok
4:47
Now let's close this one. Now let's click on submit style and I will make it full to cover the button full width
4:56
and you can change the submit text like send now
5:06
Like this. Ok. Now let me just check. You can change the color of the button
5:14
So let's click on here. Now let's click on the form and here you will see the text color and the background color
5:23
So let's change the background color like this and you can change the text color like this
5:29
So I will keep it blue and in hover let's change the hover background color to black
5:35
and when I hover the button it will change the button color to black
5:40
So let's close this here and here you will see this option action after submit
5:47
So you need to check the email button here and you can also redirect the visitors to
5:54
a new page whenever they submit the send button. So let's click on email setting here and you need to add the email address where the email
6:04
will go. So let's add my email address here and let's leave this like that email subject and from email
6:16
So you need to add the email address to the email address field
6:20
So you can basically add your own email address here and let's keep the basic spam check and
6:27
you can also enable Google recapture to prevent spam but I don't activate it because it slow
6:34
down the page speed. Ok. Now this email subscription box is ready
6:41
Now I can add a social media buttons below this section. So what I can do is just I will click on plus button and I will add another row layout here
6:53
and I will add a single row layout. Now let's copy this connect me with social media and I will click on plus icon and I
7:04
will click on advanced text. Now let's paste this one and let's change it to align center
7:12
Now I will hit enter and I will search for icons. Social icons
7:20
So let's click on social icons here and click to click plus to add
7:25
So let's click on plus here and let me just find Twitter and let's add the Twitter link here
7:37
Now let's click on plus icon and let me just add more icons like Facebook
7:49
Ok so in this way you can add the social media links and social media buttons here
7:54
So let's change it to align center here and you can open the link in a new tab here and
8:02
you can also show levels like this by clicking on this button and you can also change the
8:08
icon color from here and change icon background and you can change it to save logo only or
8:14
make it as default. Ok and you can also add a background color to this section
8:21
So let's add a background color like this or you can keep the same background
8:27
So let's make it white here and you can also add a divider to this section
8:33
So just select the whole row layout here and let's click on divider and I will add a bottom
8:40
divider here. So let's add a bottom divider like this and you can also add different divider from here
8:51
So this one is looking good. Ok and let me just change to a div color here like this
9:05
Now let me just update this page. Now let's click on view page here and as you can see our contact us page is now ready and
9:13
you can link the contact us page to the menu section here
9:18
So let's test the contact form it is working or not. So let me just fill my name
9:25
Let's add my email address here and I will say like hello this is a test message
9:39
Now let's click on send now button and as you can see it will show a but submission
9:44
success thanks for getting in touch. So let me just open that email address and as you can see the email is come to my email
9:51
address hello this is a test message. So in this way you can add a contact form to your WordPress website and design a contact
9:58
us page like this in your WordPress website. So let me just open this page
10:05
This is our contact us page in WordPress. So I hope this video is helpful to you and if you found this video helpful then make
10:12
sure to hit the like button and do subscribe to blogging for more upcoming videos like
10:17
this and I will see you in the next video. Thank you
#Crafts
#Email & Messaging
#Web Services