How to Create Stylish Contact Us Page in Blogger Website [ Updated ]

Hello Everybody, Today on this occasion I will share a tutorial on How to Create Stylish Contact Us Page in Blogger Website. Through This Stylish Contact us page You can easily keep in touch with your visitors. This Stylish Contact Us page is made with the help of HTML, CSS and JS.

Creating a Contact Form Page (Contact US) or Blogger contact form is usually placed on a static page. Besides being called the Contact Form , this page is also known as Contact US , Contact Me , Contact Us , or Suggestion box.

What is the difference between the four Contact Forms ? There is not any. because the only difference is the name of these pages.

Read More :- How To Make A Quiz On Blogger

Having a Contact US page is highly recommended to all bloggers. Because the Contact Form will make a blog look more professional.

Not only that, Creating a Contact Form Page on Blogger is also one of the requirements that must be met when registering for AdSense.

Four Advantages of Installing a Contact Form (Contact US) on Blogger :-

Make it easy for blog visitors to contact with You.
Make it easy for buyers to contact with You.
Connect with sponsors.
Connect with other bloggers who might want to collaborate.

There are two ways to create a Contact Form in blogger. The first is with the help of third-party sites such as (foxyform, jotform, 123contactform, etc.).

The second one is creating it yourself via Blogger Widget and adding css code on the contact form page. In this tutorial, I will share a tutorial on how to create Contact Us with the widgets that have been provided from blogger only.

Why should use Stylish Contact Us Page in Blogger ?

Because there are several advantages that can be obtained if we use Contact Us from blogger, such as:

Stylish Contact us Page in Blogger like WPForms.
Message sent immediately.
Official because the product was developed by the blogger himself.

How to Create Stylish Contact Us Page in Blogger Website :-

Step 1 :- First of All Go To Blogger.Com.

Step 2 :- Then Login with Your Blogger Account.

Step 3 :- Then Select The Page Menu.

Step 3 :- Then Create a New Page.

Note :- Add Your Page Title And Description According To You Need but its a contact us page then title is contact us.

Step 4 :- After Click on Html View.

Step 5 :- Then Copy The Below Contact Us Code and Paste it There.


<style>
/** You can Change here **/
:root{
  --linkBg:#4059f7;
  --fontB: 'Noto Sans', sans-serif ;
  --trans-1: all .1s ease ;
  --contentBg: #fffdfc ;
  --darkL: #4059f7 ;
  --darkBg: #1e1e1e ;
}
a:hover{opacity:.9;transition:opacity .1s}button,input,textarea{font:inherit;font-size:100%;color:inherit;line-height:normal}input::placeholder{color:rgba(0,0,0,.25)}.Blog~.HTML{display:none}.button{display:inline-flex;align-items:center;margin:12px 0;padding:12px 15px;outline:0;border:0;border-radius:3px;line-height:20px;color:#fffdfc;background:var(--linkBg);font-size:14px;font-family:var(--fontB);white-space:nowrap;overflow:hidden;max-width:100%}.widget input[type=email],.widget input[type=text],.widget textarea{display:block;width:100%;border:1px solid #e6e6e6;border-radius:3px;outline:0;padding:15px 16px;line-height:1.6em;transition:var(--trans-1);box-shadow:0 0 0 0 var(--linkBg) inset}.widget input[data-text=fl],.widget input[type=email]:focus,.widget input[type=text]:focus,.widget textarea:focus,.widget textarea[data-text=fl]{border-color:var(--linkBg);box-shadow:0 0 0 1px var(--linkBg) inset}.widget input[type=button],.widget input[type=submit]{display:inline-flex;align-items:center;padding:12px 20px;outline:0;border:0;border-radius:3px;color:#fffdfc;background:var(--linkBg);font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%}.widget input[type=button]:hover,.widget input[type=submit]:hover{opacity:.7}.ContactForm{max-width:500px;font-family:var(--fontB);font-size:90%}.cArea:not(:last-child){margin-bottom:20px}.cArea label{display:block;position:relative}.cArea label .n{display:block;position:absolute;left:11px;top:16px;opacity:.4;line-height:1.6em;padding:0 5px;background:var(--contentBg);transition:var(--trans-1)}.cArea label .n.req:after{content:'*'}.cArea input:focus~.n,.cArea input[data-text=fl]~.n,.cArea textarea:focus~.n,.cArea textarea[data-text=fl]~.n{top:-10px;opacity:1;color:var(--linkBg);font-size:13px}.cArea .h{display:block;font-size:13px;padding:0 16px;opacity:.7}
/** CSS darkmode adjust the class if different or delete this section **/
.is-dark .widget input[type=text], .is-dark .widget input[type=email], .is-dark .widget textarea, .is-dark .cArea label .n{background:var(--darkBg);border-color:rgba(255,255,255,.1)} .is-dark .widget input[type=text]:focus, .is-dark .widget input[type=email]:focus, .is-dark .widget textarea:focus, .is-dark .widget input[data-text=fl], .is-dark .widget textarea[data-text=fl], .is-dark .button.outline:hover{border-color:var(--darkL);box-shadow:0 0 0 1px var(--darkL) inset} .is-dark .widget input[type=button], .is-dark .widget input[type=submit],
</style>
<div class='ContactForm' id='ContactForm1'>
<form name='cForm'>
<div class='cArea'>
<label>
<input class='cInpt cName' id='ContactForm1_contact-form-name' name='name' type='text' />
<span class='n'>Name</span>
</label>
</div>
<div class='cArea'>
<label>
<input class='cInpt cMail' id='ContactForm1_contact-form-email' name='email' type='email' />
<span class='n req'>Email</span>
</label>
<span class='h'>Valid email required</span>
</div>
<div class='cArea'>
<label>
<textarea class='cInpt cMsg' id='ContactForm1_contact-form-email-message' name='message' rows='6'></textarea>
<span class='n req'>Message</span>
</label>
</div>
<div class='cArea'>
<input class='cBtn' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
</div>
<div class='cArea nArea'>
<p class='cNtf' id='ContactForm1_contact-form-error-message'></p>
<p class='cNtf' 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'] =s "templatesV1";window['blogger_blog_id'] = '278798919511037XXXX';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\278798919511037XXXX','//website.xyz/','278798919511037XXXX');
_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': '278798919511037XXXX', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); var inputs = document.querySelectorAll('.widget input[type=text], .widget input[type=email], .widget textarea'); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.addEventListener('input', function() {var bg = this.value ? 'fl' : 'nfl'; this.setAttribute('data-text',bg);}); } /*]]>*/</script>

Note:-1. Replace 278798919511037XXXX with your own Blog Id.
2. Replace website.xyz with your own Website.

Step 6 :- Then Don't Forget To Publish Your Page.

Now you can see the result of contact us page for blogger , Finished.

Conclusion :-

Well that's great tutorial on How to Create Stylish Contact Us Page in Blogger Website. I hope this tutorial can be useful For my All Visitors. Special Thanks For Reading This Post.