How To Create A Stylish Contact Us Page In Blogger?

Hello Everyone! Welcome to our blog. Today I’m going to teach you how to create a stylish contact us page in blogger. Because all of blogger & users want to make & see stylish in this time. So I have decided to share some tips with you about that. If you want to create a stylish contact us page in blogger then this post will really helpful for all of you.

How To Create A Stylish Contact Us Page In Blogger?

There is too many scripts & tools available on the internet which will help you create contact us page for your website but it will create a simple contact us page. I have designed this scripts like Ui design & this scripts will support with all of blogger templates. You can chek this script in any blogger template.

If you want to create a stylish contact us page in blogger then read this post carefully. Because u need to do some changes in script before creating page.

What Is Contact Us Page?

This is a one page post  where user’s can put her advise, problem, questions & share with that’s owner. So that owner can know about her website user’s (Visitors) experience, problems & questions. This page makes your website user friendly.

Advantage & Disadvantage Of Contact Us Page?

Advantage – Through this page you can know your website visitors user experience. What he thought about your website. When he visited to your website. You can also about her questions & advise. You can know about your website problems through this page mSo that you can fix it soon.

Disadvantage – Disadvantage will apply when you don’t add this page in your website. Must add this page in your website because this page is recommended from Google & Google AdSense.

How To Add Contact Us Page In Blogger?

I have also explained about that. You need to add some script in your page which will help you to create this. Scripts are given below.

Follow Below Given Steps.

1. Login to Your Blogger.com Dashboard.

2. Click On Menu > Pages > Create Page Button.

3. Change Compose View To HTML View First.

4. Copy Below Given Script & Paste In Your Page.

<!--[Contact Form Widget Html By Nullify Blogger]-->

<div class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div class='input-area'>
      <label for='ContactForm1_contact-form-name'>Name</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'>Message<span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea></div>
    <br>
    <div class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></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'] = '1234000000000001234';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d1234000000000001234','//nullifyblogger.blogspot.com/','1234000000000001234');
_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 Can Not Be Empty.', 'title': 'Contact Form', 'blogId': '1234000000000001234', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script>

<!-- Contact Form Widget Css By www.nullifyblogger.blogspot.com -->

 <style type='text/css'>

#ContactForm1{background-color:#fff;margin:auto;padding:24px 30px;border:0;border-radius:6px;box-shadow:0 0 8px 0 rgba(0,0,0,.08);width:100%;display:block;font-size:1rem;text-align:left;}

/* Dark Mode Css */

 .drK #ContactForm1{background:#333;color:#f6f6f6;}

</style>

5. Now  Replace 1234000000000001234 With Your Blogger ID In Script Where Is Red Marked.

6. Then Click On Save Button & Check This Page By Messaging.

Don’t try to make any more changes in script if you don’t have coding knowledge. Because your one mistake can create problem in your contact us page and you page will not work perfectly. If you have coding knowledge you can make more change like color, box color, background color, text color, and many more things. But without coding knowledge don’t try anything.

Conclusion:

I have shared about how can you create contact us page in your blogger website easily in just few seconds. Only you need to add our given script in your contact us page in html view format. If you have any problem or questions please comment us. We will reply you as soon as possible. Thank for visiting our website.