Advanced Contact Page for Blogger Blog - WordPress Standard

custom contact page for blogger blog

Here is a detailed tutorial explaining the step by step guides on how to create an advanced custom contact page for your blogger blog.

You can view a demo of the contact page you are going to learn how to create for your blogger blog using this tutorial by clicking on the link below. That demo is created using another blogger blog.

View Demo

Although this contact page utilizes the native blogger contact widget, it is a standard contact page likened to WordPress and any other standard website contact page.

Blogger is a very popular blogging platform and more like an entry level blogging CMS for most bloggers but unlike most other blogging software that have plenty plugins and ready-made add-ons and built-in features that make using their platform for blogging easy and enjoyable, for blogspot platform however; you do need to be able to tweak or have support of devs of some sort in order to fully utilize the features and enjoy your experience of blogging with blogger blog.

And one of the much needed features that is being missed in blogger blog is the lack of standard contact page.

Although blogger has contact widget that can be installed in your blogger blog sidebar, at the footer or anywhere else within the blog, having a separate contact page for your blogger blog; similar to other blogging software such as WordPress is the best option.

Besides, a separate contact page makes your blogger blog look more professional and in more ways than not, it improves your blogger blog SEO.

And that's exactly what we are going to do here; helping you create a separate contact page for your blogger blog.

How to Create Standard Contact Page for Blogger Blog Like A Pro

Estimated cost: $0
Estimated time: 16 minutes
In this tutorial I explaine how to setup a WordPress-like standard contact page for your blogger blog using the blogger contact widget functional in a separate blogger blog static page.


Required tools:

1. Preparation

Ensure you have a few time; 15 to 30 minutes that can be spared for this task. Be sure that your PC is connected to the internet and pay attention to the instructions that are highlighted from below.

connect to internet

2. Login your Blogger Account

Visit and login your blogger account. If you manage several blogger blogs under the same account, navigate to the blog you wish to create a separate standard contact page for and click on it.

Blogger homepage

3. Go to your Blogger Blog Theme Page

Supposedly, you are now viewing the dashboard for the blog you wish to create a custom contact page for, now, from the menu to your left, scroll to Theme and click it.. The next page that opens displays your blogger blog source codes. Locate and click on Edit HTML. In a few minutes, you would be presented with your blogger blog source codes. Click within the code and then, press cntr + f keys together. That would open a search widget that allows you search from within the code area only.

Blogger theme HTML page

4. Copy and Paste these CSS Codes within your Blogger Blog CSS Section

The next step for you is to copy the code in the code block below and paste it in the Search Widget you opened in the previous step above:

And press the Enter key on your keyboard. Just above the code you copied from above, copy the entire code from the codes block below and paste it there.

.iv-full-hm{display: flex; flex-wrap: wrap; width: 100%; height: auto; margin: 0 auto; overflow:hidden;}
.iv-half {-moz-box-flex: 0; width: calc(100% / 2); height: auto; padding: 1%; margin: 0 auto;}
background: url( no-repeat center center fixed;
background-size: cover;
margin:0 auto;padding:.1px;overflow: auto
.iv-overlay-top{background: rgba(0,0,0,0.5); width: 100%; height: 450px; border-bottom: rgba(102,0,68,0.5) 1px solid; padding: 10%; text-align: center; overflow: hidden;}
.iv-welcome-txt{font-size: 32px; font-weight: 700;color: inherit; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); line-height: 1.2;}
.iv-welcome-txt-2{font-size: 20px; font-weight: 500;color: inherit; text-shadow: 0px 1px 1px rgba(0,0,0,0.6); line-height: 1.2;}
.iv-hm-follow {height: 50px; padding: 10px;}
.iv-hm-follow a{display:inline-block; font-size: 12px; padding:7px 13px; margin: 15px 10px; line-height:1; border-radius:4px;}
.iv-hm-follow a i{font-size:14px;}
.iv-hm-follow a:hover {opacity: .5;}
a.face-ico{color:#fff; background: #3B5998;}
a.twi-ico{color:#fff; background: #19BFE5;}
.iv-hm-social {width: 100%; height: 400px; color: #a1aeb5; font-size: 16px; padding: 5%;}
.iv-hm-social h5 {color: #fff; margin: 0; font-size: 24px; line-height: 1.4;}
.iv-hm-social a{width:48px; height:48px; background:#ddd; color: #fff; margin:10px; display:inline-block; text-align:center; border-radius:50%; font-size: 18px; line-height: 48px;}
.iv-hm-social a.f1{background:#2B55AD;}
.iv-hm-social a.t1{background:#55ACEE;}
.iv-hm-social form{float:center; margin:12px 0 0;}
.iv-hm-social form input[type="text"] {height: 44px; padding: 0 20px; line-height: 44px; border-top-left-radius: 99px; border-bottom-left-radius: 99px; border: 0; vertical-align: top; width: 65%; float:left;}
.iv-hm-social form input[type="submit"] {cursor:pointer; height: 44px; line-height: 44px; border-top-right-radius: 99px; border-bottom-right-radius: 99px; vertical-align: top; text-align:center; border: 0; width: 35%; background: #440066; color: #f7e6ff; font-size: 12px; float:left;}

@media screen and (-webkit-min-device-pixel-ratio:0) {


@media (max-width: 620px) {
.feedslide li, .half-hm {width: calc(100% / 1);}


blogger blog HTML code page

5. Save your Theme and Proceed to the Next Step

Click Save to effect the changes made in your blogger blog template.

Save blogger blog theme

6. Go to Pages and Create A New Static Page

Now, let's create your standard professionally looking blogger blog contact page. To do that, again, from the menu to your left, scroll to Pages and click it. Your next view takes you to a page that lists all your already created pages. Simply click on Create New Page and proceed. If you are using the latest version of blogger blog, locate and click on the plus icon instead.

Create New blogger blog page

7. Copy the Entire HTML Codes Below and Paste it in your New Page

You may now copy the entire HTML codes contained in the codes block below and paste it in your new page blank space.

<style type='text/css'>
#sidebar, .sidebar, .sidebar-wrapper1, #sidebar-wrapper1, .sidebar-wrapper2, #sidebar-wrapper2, #main-sidebar, .main-sidebar, .sidebar-wrapper, #sidebar-wrapper, .sidebar-right, #sidebar-right, #post-title, .post-title, #blog-pager, .blog-pager, .post-footer, #post-footer, .comments, #comments, .entry-title, #entry-title,,, .static-page-title, #static-page-title, .linead, .adsbygoogle {display: none !important}

.column-right-outer, #column-right-outer, .tabs-outer, #tabs-outer, .footer-outer, #footer-outer {display: none !important}

.main-container, .duke{padding:0 0 0;}

#main-wrapper, .main-wrapper, .main-content, #main-content, .wrapper, #wrapper, #content, .content, .post-wrapper, #post-wrapper, .blog-posts-wrapper, #blog-posts-wrapper {width: 100% !important}

#main-wrapper, .main-wrapper, .outer-wrapper {padding: 0 0 !important}

.top{margin-top: 0;}

.post-body{margin: 0 0;}

.greden{margin-top: -12px}

body {background: #fff url('image-url-here') no-repaet scroll top center !important; margin: 0; padding: 0}


<!-- Contact Form ONLY Styles -->
<style> #ContactForm1{ background:transparent; } .c-form{ width: auto; height: auto; border:0px solid #660044; padding:0 0 20px 0; } .c-form-left{ padding: 20px; } .c-form-right{ padding: 20px; } .contact-form-widget { margin-left:auto;margin-right:auto;width:auto;max-width:100%;padding:40px 0 }.contact-form-email-message {width:100%;max-width:100%;height: 130px;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} </style>

var blogId = 'put your blog ID within this space';//this is a requirement for this to function.

var contactFormMessageSendingMsg = 'Your message is being sent...';
var contactFormMessageSentMsg = 'Your message has been sent successfully';
var contactFormMessageNotSentMsg = 'Failed. Your message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg = 'Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'Please enter a valid e-mail.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': ''}, 'displayModeFull'));
return true;

<div class='iv-full-hm'>

<div class='iv-half-hm'>
<div class='iv-hm-dash'>
<div class='iv-overlay-top'>

<h2 class='iv-welcome-txt'><span style='color: #fff'>Contact Us</span></h2>
<h3 class='iv-welcome-txt2'><span style='color: #fff'>We are always here for you!</span></h3>

<p class=''><span style='color: #fff'>Either you have a lengthy note to write or a short message to convey, just say it anyway and we shall respond accordingly.</span></p>

<div class='iv-hm-follow'>
<a class='face-ico' href='' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i> Chat us</a>

<a class='twi-ico' href='' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i> Send DM</a>



<div class='iv-half-hm'>
<div id='iv-social-bowl2'>
<div class='iv-hm-social'>

<h5>Send Us A Mail!</h5>

<div class='c-form'> <div class='c-form-left'><div class='form' style='float:left;'><form name='contact-form'>

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' placeholder='your name here'/>
<input class='contact-form-name' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' placeholder='your e-mail here'/>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='3' placeholder='Contain your detailed message here.'></textarea>
<input class='sub-button' id='ContactForm1_contact-form-submit' type='button' value='send message' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 300px; width: 100%'>
<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 class='clear'/>



Remember to replace your blogger blog ID with the text written in red ink in the HTML codes above.

blogger blog New page

8. Activate Blogger Contact Widget for your Blog

Finally, to make this tweak work, you must add blogger contact widget to your blog. And you can remove it back or hide it; whichever pleases you, it is just a requirement that you activate the contact page by adding blogger contact widget to your blogger blog. If you have already added the blogger contact widget to your blogger blog, you may skip this step and everything would be fine. The blogger blog contact widget may be added to your blog sidebar, footer or anywhere.

Blogger blog contact widget

Recap: essentials needed to create a custom contact page for your blogger blog

Internet Access

Since you would be connecting to the internet, an active and relatively fast internet access is a requirement for this process.

You can use your modem, WiFi or connect your phone. Any ISP is okay so long as the internet connection is of mid-range or high-end.

Your time

From start to finish, you may need to designate between 15 to 30 minutes for this process. Though, that greatly depends on the speed of both your internet connectivity and your PC.

Blogger contact widget

Before the contact forms visible in the separate contact page created on this page, you must first add blogger contact widget to your blogger blog.

Once the blogger contact widget has been added, you may then delete the contact widget or hide it. In either case, the blogger contact page created using the tutorial above would still work fine.

Your Blogger Blog ID

Your blogger blog ID must be put in the space provided for it otherwise; this contact page would not work for your blog.

Use your PC

Whichever you find more comfortable to use, you can start and complete these processes using either your smartphone or PC but I strongly recommend using your PC as majority do not understand how to using text editors on smartphones.

Your Browser

Either you intend to initiate and complete this process using your smartphone or PC, a fully functional internet browser is a requirement.

For these processes, I recommend Google Chrome, Mozilla / Firefox or Edge web browsers.

Final Note on the Blogger Blog Contact Page

If you already have a separate blogger blog contact page and wonder why you need to make the changes, well, you may not need it but; is your current blogger blog contact page better than the one you see in the demo?

If your answer is 'No', then you need to switch to this contact page.

But why should switch?

For any website or blog, the primary source through which your audience may contact you is via your contact page. And as such, having a standard and elegant contact page boosts the trust your audience already have in you.

And if your blog offer professional services, you definitely need to have a prossional contact page on your blog.

Have Issues Implementing this Contact Page?

Just add your comment in the comment box below and I shall personally help you do it.

And if you have seen or know of a blogger blog contact page better than this we have revealed in this tutorial, share the page with us in the comment box, we shall make something like that for your pleasure.


to top