How to add Contact Form (contact us page) in Blogger with HTML - TechyTalks: Let's talk about tech

Hello friends, welcome to my another tutorial. Today in this article I am going to write about how to add Contact Form (contact us page) in Blogger with HTML and CSS codes. We will not use any third party sites to create our contact us form. In this article I will show you step by step, how to create a custom contact form. If you are a beginner and don't know much about CSS and HTML then also you need not to be worried because after reading this article it will become a piece of cake for you to add contact form (contact us page) in blogger.

So, let start this tutorial, first you login to your blogger dashboard and go to Theme and then click on Edit HTML.

Create custom contact form for blogger or website with CSS and HTML


Now you press CTRL+F and type ]]> in the search box. Now paste the following code just before the ]]> as shown in this image.

.contact-form-widget {margin-left:auto;margin-right:auto;width: 600px;max-width: 100%;padding: 0px;color: #000;
}
.fm_name, .fm_email {float:left;padding:5px;width:48%
}
.fm_message {padding:5px;
}
.contact-form-name, .contact-form-email {width: 100%;max-width: 100%;margin-bottom: 10px;height:40px;padding:10px;font-size:16px;
}
.contact-form-email-message {width:100%;max-width: 100%;height:100px;margin-bottom:10px;padding:10px;font-size:16px;
}
.contact-form-button-submit {border-color: #C1C1C1;background: #E3E3E3;color: #585858;width: 20%;max-width: 20%;margin-bottom: 10px;height:30px;font-size:16px;
}
.contact-form-button-submit:hover{background: #ffffff;color: #000000;border: 1px solid #FAFAFA;
}

contact form for blogger html code


Now go to your Contact page and click on the HTML option available at the top left corner and past the following code without the quotation marks.


<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<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="Submit" />
<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>

stylish contact form for blogger


Now click on update. So you are all done. Now view your contact form, it will look like I showed in the image below.

Also read: Create a bell notification icon for your blogger blogs or websites

Create custom contact form for blogger or website with CSS and HTML


In this simple way you can add Contact Form (contact us page) in Blogger with HTML without the help of any third party sites. If you still have any doubts feel free to ask me by commenting below. Also share this article with your friends and family.

No comments:

Post a Comment