How to Create a Contact Page in Blogger


How to Create Custom Contact Form for Blogger - Hello Guys welcome to the first post of Bloginoobs. In this article, I will show you how to create a simple non-CSS Contact page for your Blogger. So you would be wondering, Why no CSS? It is not recommended to load the theme with additional CSS because it will increase the load time and considerably slow down your page.

Let's begin the process for adding a stylish contact form for blogger.

Contact Us HTML Code for Blogger


Before Proceeding to the tutorial please add the contact widget from the theme Layout Section

First of all, Create a new page from the Blogger dashboard and paste the below code 

<div class="widget ContactForm" id="custom_ContactForm1">
<div class="contact-form-widget">
<span style="font-family: inherit;">Get in touch with Bloginoobs for any doubts and Queries related to our content.</span>

<div class="form">
<form name="contact-form">
<span style="font-family: inherit;">Name</span>   <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="40" type="text" value="" />
<span style="font-family: inherit;">Email</span> <span style="font-weight: bolder;">*</span>   <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="40" type="text" value="" />
<span style="font-family: inherit;">Message</span> <span style="font-weight: bolder;">*</span>   <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send to Us" /> 
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
<div class="clear">
</div>
<span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" contactform1="" href="https://www.blogger.com/rearrange?blogID=706922377973368538&amp;widgetType=ContactForm&amp;widgetId=ContactForm1&amp;action=editWidget&amp;sectionId=sidebar-right-1" onclick="return _WidgetManager._PopupConfig(document.getElementById(" target="configContactForm1" title="Edit"> <img alt="contact" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" /> </a> </span> </span>
<div class="clear">
</div>
</div>


Edit the Blogger ID with your Blogger ID Just check your current Page URL

After that Check the Necessary settings in Options in the right side Post Settings


After that Publish the Page and Test whether its working or not.

Conclusion


I Hope that you liked this post on How to Create a Contact Page in Blogger. You can freely comment your doubts and queries below.

If you liked this article, then please share this with your friends. You can also find us on Twitter, Facebook, YouTube, and Instagram.