Up next in 10
How to Add Contact Form in Blogger ( +Popup Button )
681 views
Jan 23, 2024
Empower your Blogger website with a contact form and a popup button with this informative tutorial. Whether you're a blogger, business owner, or content creator, this video provides step-by-step instructions on adding a contact form, enhancing your website's accessibility and user engagement. Dive into the customization process and learn how to seamlessly integrate a popup button, making it convenient for visitors to reach out. Tune in to discover how to enrich your Blogger website with a user-friendly contact form, ensuring you stay connected with your audience effortlessly. ЁЯУзЁЯМРтЬи
View Video Transcript
0:00
What's up everyone? Welcome to Quito blogging and in this video I will show you how you can
0:04
add a pop-up contact form to your blogger website. So as you can see that when I click on the button
0:10
it will show a contact form in a pop-up style window and I can easily add my name, email address and send a message to the website owner
0:19
And I can close it like this. So you can also add it to your header menu as well. So when someone
0:25
click on the header menu button, it will display the contact pop-up form. So you can also, you can also add it
0:30
So let's check how you can add this type of contact form pop up in your blogger website
0:34
And by the way, if you found this video helpful, then makes you to hit the like button
0:39
It motivates me to create more such tutorials for blogger as well
0:43
So let's go to the blogger dashboard and let's check how you can add it to your pages
0:48
first and then I will show you how you can add it to your header menu as well
0:53
So let me create a new page here and I can name it like contact and I can paste a code
0:59
like this so let me quickly copy it and I will paste it here like this now here you need to
1:06
replace it with your own email address so here you will see this option your form submit
1:11
ID so just highlight this one and replace it with your email address so let me quickly replace
1:18
that all right I have replaced this with my own email address and let's hit publish button
1:25
Now let's open this page in front end and you can see that we have the contact form
1:32
So let's click on here and it will display our contact. So let me quickly add my name here and let me quickly enter my email address here Contact at the red key to blogging And let add a message like this and let hit the submit button First you need to activate this contact form so that it will work properly
1:55
So for this you need to open your email address that you have put in the contact form
1:59
So let me quickly do that. And here you will see that there is this confirmation email address action required
2:06
So just click on here. Now you need to activate this form
2:10
So just click on here. Now your form is activated. Now if you don't want to add directly the email address in the contact form, then you can
2:18
also use this random string as well. Like you can copy this random string from here and just go to the blogger dashboard and
2:29
you can now replace it with this string instead of directly placing it the email address
2:35
Sometimes if you put direct email address in the website then the spammers and bots will
2:41
access this email address but if you change it with this string then they won't be able to
2:46
get your email address. So let's get update. Now let's check how you can add the same contact
2:54
pop-off form in header menu as well. And as you can see that it will open the contact pop-up form
3:00
like this. So let me quickly switch to a mobile view here and this is the iPhone AC and this
3:10
This is iPhone XR. So let's click on here and you can see that this is how the contact form pop-up looks like
3:17
So it is fully mobile responsive. Now let's check how you can add it in header section as well
3:23
So to add it in the header section, you need to just open the HTML view of your website
3:29
So let go to the theme here Now let click on Edit HTML here So the process may vary from theme to theme So you have to check if there is some functionality to edit your header menus as well or not
3:43
So here I will go to the header menu here, header one
3:47
And here let me search for a header here. So as you can see that this is the soft menu and we have the standard menu
3:55
So we can replace it with our contact link. So what I can do is I will highlight this and I will add it like Contact Us like this
4:07
And I can add a string here. So what I can do is I will add this string instead of directly adding a button on click
4:15
open contact form like this. So I can simply copy this. So instead of adding the button directly, we can use the string and add it in the header
4:25
menu and I will add the string in the A class here
4:30
We can do that. All right now you have added this string on click open contact form
4:35
Now we need to add the CSS and JavaScript in the theme code
4:40
So for this I will scroll down all the way to the bottom and I will copy the whole code again
4:45
So let me copy it and I will paste it here. Now you don't need this button code
4:52
So I can remove this button code here and I can keep this HTML code and this JavaScript code and we have the CSS code for the contact
5:03
form pop up. So now let's click on hit the save button here
5:08
So make sure to change it with your email address again. So let me change this email address here So you can use the same string that you have copied Now let hit the save button All right Now you have saved the HTML CSS and JavaScript code and added the string in the header menu
5:30
So let's go to the front end and let me refresh this page
5:36
And we have this contact form. So let's click on here and you can see that the contact form pop-up is now showing here
5:44
So this will show in all of your pages. because you have added directly in the theme code
5:49
So as you can see that this contact form is showing like this. So let me send an email again
5:54
So what I can do is I will add my name here and I will enter a different email address here
6:01
and I will add a test message here like this. So let me quickly submit this contact form here
6:09
Now it will ask you to verify it. So let's verify the recapture here and the form will be submitted successfully
6:16
Now let's go to the email and check if this email is received in our email box or not
6:23
So I will go to the email address here and let's go back. As you can see that there is this new submission detected and let's click on here and
6:31
here you can see that hello this is a test message from Blogger and this is the second message
6:36
hello, this is a test message from contact form Popoff. So we have successfully received our contact emails in your inbox
6:44
So this is how you can add a contact of our contact. pop-up form to your blogger website easily and you can add it to your header menu so that
6:52
user can easily send emails directly using this contact form pop-up. So if you found this video helpful and if you want me to make more videos like this, then
7:02
make sure to hit the like button. And if you are new to this channel, consider subscribing
7:06
I will see you in the next one. Bye-bye