How To Create Contact Page On Blogger Blog - 101Helper.Com

Top Menu [Pages]

    Social Links

Articles Update
Loading...
How To Create Contact Page On Blogger Blog
Blogger is very robust and easy to operate CMS platform, you don't have to be a geek to operate the dashboard or settings. But with easiness, there comes some limitations, By default you can't create a Contact us page, you have to either you have to use any third party plugin or have to tweak blogger's official contact widget, so that it can work on static pages. Creating a separate page for contact purpose is very professional and also makes your blog clean by hiding unnecessary widgets and plugins thats’s why , Lets move further and see How to create Contact Us page without Adding Contact Form Widget in Blogger Blog.

Hiding The Widget (If already Added Contact Form Widget in your template).

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to Blogger Dashboard > Theme > Edit HTML and search for the ending ]]></b:skin>tag and just Above it paste the following code.


.sidebar .widget.ContactForm {
    display: none!important;
}


Creating a Page

To Create Contact Us Page Go to Blogger Dashboard.

How To Create Contact Page On Blogger Blog

Click on the Pages

How To Create Contact Page On Blogger Blog

Click on the New Page Button.

How To Create Contact Page On Blogger Blog

  • Give The title Contact Us
  • Click On HTML and Copy and Paste the following Html Code



<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>


Add the following CSS Code.


<style type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(//1.bp.blogspot.com/-EjaivrciJ2E/XpiXp1OyCWI/AAAAAAAAALI/2Qor5dfvEV8ISc4t9ENpjefSc9hThcwvQCLcBGAsYHQ/s1600/Mail-me.PNG);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){
  .formcolumn1,.formcolumn2{width:100%;padding:0}
}
</style>


If you want to add this CSS Code in the Template, add right just bellow the code ]]></b:skin>. With the Blogger’ Conditional Tag.
<b:if cond='data:view.isPage'>
..........
..........
</b:if>


Add the Following JavaScript Code.


<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' &amp;&amp; BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = 'templatesV1';window['blogger_blog_id'] = '<data:blog.blogId/>';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>','<data:blog.url/>','<data:blog.blogId/>');
_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': '<data:blog.blogId/>', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>


If you want to add this Javascript Code in the Template, add right just Above the code </body>. With the Blogger’s Conditional Tag.
<b:if cond='data:view.isPage'>
..........
..........
</b:if>


  • Click on the Search Description and write the description.
  • Then, click on the Option Select Don't allow, hide existing and click on the Done. After that, Publish the Contact Us Page.

How To Create Contact Page On Blogger Blog

How To Create Contact Page On Blogger Blog
Blogger is very robust and easy to operate CMS platform, you don't have to be a geek to operate the dashboard or settings. But with easiness, there comes some limitations, By default you can't create a Contact us page, you have to either you have to use any third party plugin or have to tweak blogger's official contact widget, so that it can work on static pages. Creating a separate page for contact purpose is very professional and also makes your blog clean by hiding unnecessary widgets and plugins thats’s why , Lets move further and see How to create Contact Us page without Adding Contact Form Widget in Blogger Blog.

Hiding The Widget (If already Added Contact Form Widget in your template).

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to Blogger Dashboard > Theme > Edit HTML and search for the ending ]]></b:skin>tag and just Above it paste the following code.


.sidebar .widget.ContactForm {
    display: none!important;
}


Creating a Page

To Create Contact Us Page Go to Blogger Dashboard.

How To Create Contact Page On Blogger Blog

Click on the Pages

How To Create Contact Page On Blogger Blog

Click on the New Page Button.

How To Create Contact Page On Blogger Blog

  • Give The title Contact Us
  • Click On HTML and Copy and Paste the following Html Code



<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>


Add the following CSS Code.


<style type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(//1.bp.blogspot.com/-EjaivrciJ2E/XpiXp1OyCWI/AAAAAAAAALI/2Qor5dfvEV8ISc4t9ENpjefSc9hThcwvQCLcBGAsYHQ/s1600/Mail-me.PNG);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){
  .formcolumn1,.formcolumn2{width:100%;padding:0}
}
</style>


If you want to add this CSS Code in the Template, add right just bellow the code ]]></b:skin>. With the Blogger’ Conditional Tag.
<b:if cond='data:view.isPage'>
..........
..........
</b:if>


Add the Following JavaScript Code.


<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' &amp;&amp; BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = 'templatesV1';window['blogger_blog_id'] = '<data:blog.blogId/>';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>','<data:blog.url/>','<data:blog.blogId/>');
_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': '<data:blog.blogId/>', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>


If you want to add this Javascript Code in the Template, add right just Above the code </body>. With the Blogger’s Conditional Tag.
<b:if cond='data:view.isPage'>
..........
..........
</b:if>


  • Click on the Search Description and write the description.
  • Then, click on the Option Select Don't allow, hide existing and click on the Done. After that, Publish the Contact Us Page.
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Get the latest in your inbox.

Signup to be the first to know when we publish updates, best-practices, tips and tricks.

Notifications

Disqus Logo