Jul 22, 2016

Stylish Contact Form For Blogger! Add to Static Page

Paramjot Singh

Fully Customized, Stylish Contact Form For Blogger with complete guide, How To Add it on Static/Separate Page?

In previous we have shared a lot of Blogger widgets for our all loyal readers. But, its time to share some impressive, stylish and cool designed widgets which look professional in your blogger blog. Now days we have designed some widgets for you which we have shared some time ago like as, AllInOne Admin Box for Blogger, Stylish & Responsive Subscription Box for blogger, Cute Popup email Subscription box for blogger & WordPress Like Responsive Social Sharing Bar Widget for Blogger with Counter function. So, now you are thinking what is in today's post, Right? So guys, Today we are going to share a pro looking stylish Contact Us Form For Blogger which is fully Responsive.Actually, Adding a Contact Form Blogger blogs is very tough task for everyone until before blogger has released its official Contact Form Gadget. Blogger blogs were missing one major feature therefore either we have to use third party services. But now its take only few clicks to install it to sidebar or footer bar of any template's layout. But still most of the people want to use it on any dedicated contact us page rather than as a sidebar or footer widget.

Why Blogger's Contact Form is Best than others?

It is because it has following features:

Fewer Option.

Neat & Clean.

Instant Delivery Service.

No Page Reload When Someone Click On Send Button.

Easy to Customize With CSS.

We can install it on any static/specific page instead of sidebar or footer.

Trust Full, Because it is Blogger's official widget. So we need not to worry about anything.

In above Demo Screenshot you have seen we have done a lot of work to make blogger contact form looks like a professional one. It is Fully responsive and it is aligned in center of your static/specific page. Hope you like it. Can we call it Professional version? :) See Live Demo from Below Button.

If you like above demo screenshot then we shall move on the adding our Blogger Contact form to separate page of Blogger Blog. :)

Adding Contact Form To Static Page Of Blogger

Step1] This step is for those people who has not installed the blogger contact form widget from Blogger library. We hope you have already Logged into your Blogger account so now we head over to Layout >> Add A Gadget >> Now Click On More Gadgets >> Add Contact Form.Step2] After adding into sidebar or footer area, Now we are going to hide it for appearing as a gadget. Go To Template >> Edit HTML >> Search for ]]></b:skin> tag and just above of this tag paste following code.

div#ContactForm1 {
display: none !important;
}

As you have guessed from above demo screenshot we are using FontAwesome Icons & if you are not using them then first you'll have to install it otherwise All the icons will not appear as shown in the Demo Screenshot.Step3] Installing Font Awesome Icons to Blogger Template

Step4] Now Save your Template because you are done with it.Step5] Now we are going to add Contact Form to static page on Blogger Blog. If you already have a separated page for contact form and you are using a contact form already then you need not to create a new one for this. But if this is the first time then go to Pages link and on top, Click on New Page Link.Step6] When blogger post editor is loaded then immediately before doing anything else, just enter your page name in the title box as Contact Us. This is the most important step because you'll get the same permalink address for your new page. You'll not be able to edit your permalink in anyway later. If you skipped this and entered the codes first then you'll get a weird permalink address for contact us page. After that Switch to HTML Mode and change the page settings from left side as shown in the screenshot below.

Step7] You're almost done by now and all you need is simple Copy and Paste the code. So just select the whole CSS and HTML code given below and paste into HTML Editor as it is.Important Notice: You don't have permission to copy and share my codes on your blog. We have put a lot of efforts into designing it and you can see itself from below CSS code area. Respect the Hard work of others.

Step8] Now just hit Publish button buddy. Finished? We did it! Yay! :) Now just visit your contact us page and see it live yourself

Conclusion:

So above guide is about How To Add Stylish Contact Form To Blogger Separated Page. Hope this guide help you and you can easily add this pro looking contact form to separated page of your Blogger Blog. Still if you have some problems then please let me know, We'll help you for sure. We hope you guys liked this new look of blogger contact us form widget in a separate page of your blog. If you have little time then you may share this article. :) Thank you! Stay Blessed!

2 comments:

It is working perfectly. I think you have not follow all guide. Have a look on Step1] and Step2]. First you have to add official contact form gadget from gadget library>>

Go to layout >> Add A Gadget and then select Contact form after adding it head over to Template >> Edit HTML and search for ]]>tag and just above of it paste div#ContactForm1 { display: none !important;}

Thanks for using this widget and tell me if problem persist after doing these tasks.

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.