[Advanced] How To Setup Contact Us Page In Blogger?

Do you know, How To Setup An Advanced Contact Us Page In Blogger?

If your answer is no then don't worry because today's article is specially launched to help bloggers to setup an advanced contact us page in blogger website.

Since a Contact Us page is very helpful and it's really a very important page that all bloggers as well as every site has a contact page. Therefore, today we'll look How We Can Setup An Advanced Contact Us Page For Blogger That Is 100% Working & Really Helpful.

To know, how to setup contact page in blogger then you need to read this full article without any leaving any word so that you know the importance of contact us page and why we need a contact page in blogger? All these questions will be sorted out in this article and gonna you'll live it. For that you just need to read this full article.

So let's start with the setup of contact us page, but before this learn more about contact page & why we need it.

Read: 2 Useful Logitech Keyboard Shortcut To Use While Working [Keyboard Shortcuts]

What Is Contact Us Page?

A contact page is a webpage through which your visitors or users can communicate with you in the form of message sent via email or any phone number. The contact us page is really an important tool that every website should have. And nowadays all bloggers and newbies are happy to have their own contact page for their website to increase their website engagement and solves query for every single user.

Why We Need A Contact Us Page?

There is a simple answer regarding why you need a contact us page in your website and it is mainly due to solve your visitors queries and make them a part of your to increase pageviews and social engagement with the site.

Also Check Out: Bluehost Affiliate Program 2021: How To Earn $100/Sale & How To Promote For Maximum Sales?

Importance Of Contact Us Page?

If you'll ask me the importance of contact page then I've some words to say you that if you setup a contact page then it becomes very easy for your website visitors to directly talk with you. And it is find in the study that, if someone uses our contact page then everytime they will visit our website to solve their own queries and that's why we get more pageviews after we setup a contact page. (And it's real, I've tried it and getting results.)

And the second main achievement for setting an contact page is that it helps us to get fast Adsense approval since Google Adsense needs technical pages.

That's why you need to setup an advanced contact us page in your website. But don't worry with that because next topic is only about this that How To Setup Advanced Contact Us Page In Blogger & Other Websites.

Also Read: Median UI 1.5 ~ Latest Premium Blogger Template Download

[Advanced] How To Setup Contact Us Page In Blogger?

This wonna going to be special, but you have to follow some instructions for complete setup of a contact us page in blogger without any errors.

There are 2 Methods available to setup a contact page in blogger and all the methods are really working without any issues.

Method 1 - Default Contact Us Page In Blogger

In this method you'll be able to setup contact us page in default setting which looks elegant but it has default setting which can looks elegant but does not look professional in blogger. 

Follow the below steps to Setup Default Contact Us Page In Blogger.

• First, login to your blogger dashboard, then go to layout section.
• In layout section, click Add A Gadget.
• When you click on it some blogger widgets will appear, from those widgets select Contact Form.
• After clicking contact form, a new window will appear, just type name and then save it.

That's all to be done while you setup a default contact us page in blogger.

Review Reading: BlueHost Review 2021: What's New In BlueHost? The Complete Overview With Pros & Cons

Method 2 - Advanced Contact Us Page In Blogger

In this method you'll need some skills, to setup an advanced contact us page in blogger. Because in this method I'll give some codes that you need to put in your blogger HTML Section. But it's simple, don't worry about it. Just follow below instructions for advanced contact us page setup.

• First login to your blogger dashboard, then click on Theme section and then click Edit HTML.
• Then Search for ]]</b:skin> and then put the below CSS before ]]</b:skin> and then save template.

/* Widget Contact Form By Affizoo*/
.ContactForm{font-size:14px;margin-top:30px;max-width:480px}
.ContactForm form > *:not(:last-child){margin-bottom:15px}
.ContactForm label{display:inline-block;margin-bottom:8px}
.ContactForm div p{display:flex;align-items:center;margin-bottom:0}

That's all you have to done for advanced setup of contact us page in blogger.

You can also add this CSS to AMP Blogger but don't forget to put CSS after <style amp custom='amp custom'> to setup advanced contact us page in blogger.

Read: How To Sustain Adsense From Invalid Clicks & How To Overcome From It?

How To Add Contact Us Page In Blogger

To create and add your own contact page, then follow the steps carefully given below and follow them.

• At your blogger dashboard, click on Pages section and then click Add New Page.
• When New Page window opens give the page title as Contact Us.
• Now switch your Editor from Customize To HTML and then add the following Script in your page and then save it or publish it to see it live.

<div class='ContactForm' id='ContactForm1'> <form name='contact-form'> <div class='input-area'> <label for='ContactForm1_contact-form-name'>Nama Anda</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' /></div> <div class='input-area'> <label for='ContactForm1_contact-form-email'>Email<span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' /></div> <div class='input-area'> <label for='ContactForm1_contact-form-email-message'>Pesan<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div> <div class='input-area'> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim' /></div> <div class='notif-area'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div> </form> </div> <script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script><script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1234567890000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1234567890000000000','//www.namablog.com/','1234567890000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '1234567890000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

Settings To Change In Above Script

To change your setting in above script then first you need to get your own blogger ID. To get your blogger ID, open your blogger dashboard then copy the link of your blogger dashboard present on above link site.

https://www.blogger.com/blog/themes/1234567890000000000

The highlighted part is Blogger ID that you've to get of your own blogger dashboard.

The next thing thing is to change setting from above script so that contact us page works well.

• [1234567890000000000] : Your blog id, there are 4 times writing in the code above
• [www.namablog.com] : Your blog address (without http / https)
• [Your Name, Email, Message] : Input title in the contact form
• [Submit] : Text on submit button
• [Sending ...] : Text when sending messages
• [Your message has been sent. ] : Message notification text sent
• [Message could not be sent. Please try again later. ] : The message notification text was not sent
• [A valid email address is required. ] : Invalid email notification text
• [A Message field cannot be empty. ] : Text notification when message body is blank

WebP Guide: How Blogger Support NextGen WebP Image? A To Z Guide

You may like: What is affiliate marketing? Benefits we get & Mistakes to be avoid[You must know]

Note! You can also use these methods to imply on Median UI Blogger Template because this is the same procedure followed in Median UI Template. But don't copy CSS as it is already installed.

Live Contact Us Page

Conclusion

Congrats! Today you learned more about [Advanced] How To Setup Contact Us Page In Blogger? so always be the first to comment us and tell how helpful is this article.

Thanking you! For giving your precious time to us.

Please visit us again...