How to Create Contact Us Page in Blogger

Today, we brought you something most important to you.You have seen a Contact Us page on most websites.It can be linked to the website's administrators.Also, this page is important for professionalism in a website.

Blogger Contact Us Page


Today, we brought you something most important to you.You have seen a Contact Us page on most websites.It can be linked to the website's administrators.Also, this page is important for professionalism in a website.And this can also be added to your blog site.So blogger contact us page can see the different ways.So let's talk about the Blogger Contact Us page.Now you are going to learn how to add official contact us page in Blogger.
This page can be used by anyone.That is, you can find the incoming information via this page.All your information will be sent to your email.That is, your blogger admin gmail account.The entire page will not get reloaded for sending the message.You will get the message as soon as one sends it. And, the deliverability is 100% as well.However, this process has three components.


1. Adding the Contact Gadget


1. Visit blogger.com and log in to your account. If you are running multiple blogs, you need to choose the desired blog from the list. 

2. Now click on Layout from the left sidebar
Blogger Contact Us page
Click the Layout

3. You can see an Add a Gadget link on the main panel on the right side. Clicking on it will bring you to a list of gadgets.

4. Then, choose More gadgets from the left side. Now, you will see Contact Form. Just add the same.
Blogger Contact Us Page
Contact Form Gadget

Now you're done the first step.A normal blog does not show the Contact gadget.Because it damages the appearance of the site.So we need to hide it.

2. Hiding the Contact Form Gadget


1. To do this, click on Theme from the left menu on the blogger dashboard .

2. Then, click on Edit HTML and you will be provided with the whole code of your blog in a large field.
Blogger Contact Us Page
Click Theme and Edit HTML

3. Now use Ctrl+F and search for ]]></b:skin> and place the following code just before it.

[#ContactForm1{display: none !important;}]

Blogger Contact Us page
Blogger Contact Form Hide

4. Then, click Save theme to retain the changes.

Now our second step is over.You will see hide the contact form you added.However, our blogger contact us page requires the steps above(Contact Form Gadget.).Now we are starting the final step.This is creating a contact page.This means adding a contact form to a page

3. Adding a Contact Form to a Page


1. For this, click on the Pages in your blogger dashboard and click on New page.

2. Paste the following code into the HTML post editor after removing everything in it.
Blogger Contact Us Page
Paste Code
[<style type="text/css">

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#0088ff;box-shadow:5em 0 0 0 #0088ff,10em 0 0 0 #000000,15em 0 0 0 #000000,20em 0 0 0 #000000,25em 0 0 0 #000000,30em 0 0 0 #000000,35em 0 0 0 #000000,40em 0 0 0 #0088ff,45em 0 0 0 #000000,50em 0 0 0 #000000,55em 0 0 0 #000000,60em 0 0 0 #000000}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#848383;border-color:#1f2024;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#0088ff;border:0;border-bottom:2px solid #000000;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #000000}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;}

</style>
<br />
<div class="widget ContactForm" id="ContactForm22">
<div class="contact-form-widget">
<hr />
<div class="form">
<form name="contact-form">
<div class="contactf-name">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" /></div>
<div class="contactf-email">
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" /></div>
<div style="clear: both;">
</div>
<div class="contactf-message">
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" rows="5" type="text" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
<div style="text-align: justify;">
<br /></div>]


3.  Add a title (like Contact Us) and then change the settings given right as given below.
Blogger Contact Us Page
Create Contact Us Page and Publish it

4. Finally, click the Publish button. That’s all.

The messages send from this contact form will be delivered to the admin email. If the blog has more than one admin, all of them will get it.
However, for your convenience, we will present a video.By doing so, you can understand this Tutorial.

READ:
So you know about How to Create Contact Us Page in Blogger, Hope you like the post, don’t forget to share it with your friends and leave a comment below if you are facing any problem at any step in the method discussed above.Thank you.

COMMENTS

BLOGGER: 2
  1. does this method work with any blogger theme (ex:Dynamic Views)?

    ReplyDelete

Name

Apple,4,Apps,8,Blogger,48,Emoney,9,Facebook,10,Graphics,19,Health,3,News,8,Product,2,Science,4,SEO,37,Software,6,Sponsored,5,Technology,118,
ltr
item
SBmade | New Data Of Technology: How to Create Contact Us Page in Blogger
How to Create Contact Us Page in Blogger
Today, we brought you something most important to you.You have seen a Contact Us page on most websites.It can be linked to the website's administrators.Also, this page is important for professionalism in a website.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGJSsPPLTYC2aeDJdiNFRyoCzDHy8m8fdLP_Dk9X4PR8sSuzIQHqDXRAqsJ1RAtaw6ATr8RJLY5pUslvZHJMnNBcOPU9b-FzBqtoeKXFS8QbYNc58zaTXm_i_oSOlarvz6R0GBwXwVt4/s640/How-to-Create-Contact-Us-Page-in-Blogger.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGJSsPPLTYC2aeDJdiNFRyoCzDHy8m8fdLP_Dk9X4PR8sSuzIQHqDXRAqsJ1RAtaw6ATr8RJLY5pUslvZHJMnNBcOPU9b-FzBqtoeKXFS8QbYNc58zaTXm_i_oSOlarvz6R0GBwXwVt4/s72-c/How-to-Create-Contact-Us-Page-in-Blogger.jpg
SBmade | New Data Of Technology
https://www.sbmade.com/2018/04/how-to-create-contact-us-page-in-blogger.html
https://www.sbmade.com/
https://www.sbmade.com/
https://www.sbmade.com/2018/04/how-to-create-contact-us-page-in-blogger.html
true
5296011179804877962
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content