How to Create Contact Form in Blogger

How to Create Contact Form in Blogger


Every blogger needs his/her contact details for further information of our blog for this purpose ,we should maintain contact form to get updates of our blog for visitors to get updated feed back from blog visitors and to update our blog daily .So let us learn ,how to create contact form.we can create contact form in two ways .One way simply adding Contact form widget .Second way write code in the Page.

By adding Contact form widget

Go to the layout tab and  click on add gadget tab.
How to Create Contact Form in Blogger

Select the more gadgets tab from which  select the contact form widget.
How to Create Contact Form in Blogger

Click on save arrangement and view the blog ,you can see the below contact form.
How to Create Contact Form in Blogger

Creating Contact Form in Static Page


Second way is creating form in Page for that go to the Page tab and create new page ,open it in HTML mode.

How to Create Contact Form in Blogger
Paste the below code in the page.
-----------------------
<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;}
</style>

<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><hr><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send Message" /><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>

--------------------------------

Here ,opened the page in HTML mode and paste the code in page


How to Create Contact Form in Blogger
Output is looking like below image.
How to Create Contact Form in Blogger

Now ,we have been finished creating contact form in blogger.




Comments

Post a Comment

Most Useful Articles

How to Make Blogger BlogSpot Layout As Responsive Template

Image
How to Make Blogger BlogSpot Layout As Responsive Template Are you working on Blogger BlogSpot?As we all know, BlogSpot Layout is not Responsive but still using Blogger, Here is a solution to make a Blog mobile Friendly Template and responsive layout. There are two ways to make your Blogspot Responsive, so simply follow these steps to customize Your Blogger Blogspot Template. As well, you can use  recently Blogspot Introduced New Responsive themes or mobile-friendly templates to make your blog responsive. 1.First Way to make BlogSpot as Mobile Friendly Template Go to the Blogger Dashboard and Select the Custom View Button, then  Choose Mobile Theme . Now, go to the Theme and search for the  widget which you want to display in Mobile View . Copy and paste this code into your blog HTML template- <b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>   Now Save your Theme a...
Read more

How to Show Blogger Widgets in Mobile View with Simple Steps

Image
How to Show Blogger Widgets in Mobile View with Simple Steps Since I don't have any guide to create a blogger when I saw my blog in mobile view, I shocked, some important widgets are missing, I asked my self why widgets are not showing in the mobile template. Then I bit confused. As we all know, today's most content search visitors are from Mobile devices than common laptops and desktops. So showing widgets on mobile templates must. I felt very bad for now seeing my blogger widgets in mobile view. To increase the blog traffic from mobile view, we have to show them at least popular posts widget, about us widget and Facebook like the page. These are the most important things for every blogger to satisfy the blog visitors and to increase visitor interest. Finally, I got a solution that is useful. After knowing it, laughing myself because it is very simple to show blogger widgets in the mobile template with simple steps. As I have learned this trick, to help new blogg...
Read more

How to Create Internal Links within The Post in Blogger

Image
How to Create Internal Links within the post in Blogger To reduce the difficulty when users reading very lengthy posts, it is better to create internal links within the post  to jump to the matter which is interested in him. So thus we can decrease user efforts by creating bookmarks and when we are clicking on it, directly goes to its header. Thus anchor links are useful for viewers to read long post interestingly. Automatic internal links in blogger For achieving an  On-Page SEO strategy, we have to create automatic internal links in blogger. Here, you have to understand what is internal linking?. Using the  link strategy , you can increase on- SEO optimization. Visitors can get more deep information from visited to navigate through other related content. It increases your site and posts SEO performance. You can provide in-depth content for blog readers.  Two types are: Internal Internal linking is we are linking our own blog referred posts with anchored...
Read more

How to Display Blogger Posts in Grid View with Thumbnails

Image
How to Display Blogger Posts in Grid View with Thumbnails In a Blogger, as a default, all posts are showing top to bottom in the lengthy bar But here I am sharing Grid view with thumbnails for the blogger posts on the home page and related posts in the short view which reduces users difficulty to show all posts in the grid view which user can select his required post immediately and he will put more interest on the additional posts if he needs. Grid view attracts more visitors and increases the views of our blogger posts. Thumb nails also play a very important role in what is the post in the one view. So you might have known list view templates in the grid style. In my opinion, you have to reduce the complex long scrolling problems for page visitors to choose an interesting article. In the below image, you can see the grid view with thumbnail posts. Start Adding Grid view to Blogger Posts Now, Go to the Blogger Dashboard ->Click on Theme Button->choose the EDIT H...
Read more

How to Get Back A Hacked Facebook Account and Secure within 10 Steps

Image
How to Get Back A Hacked Facebook Account and Secure within 10 Steps One Day, My friend Asked Me that His account is hacked and its password email id setting also has been changed. On that question, I have started writing this Post to get back Hacked Facebook Account and Secure with the following Steps. How to Increase Organic Reach on Facebook How to Get More Likes On Facebook Fan Page How Many Ways Can I Earn Money from Facebook How to Set Up Facebook Business Manager : FBM Tutorial How to Share Your WhatsApp Status Updates to Facebook Stories and Other Apps  Some of my friends asked me, can we recover my  FB Account without email or can we get back my id  through friends' Facebook Id or Gmail, is it possible to use an old password? Another one posted to me that His email also had been changed, he asked? what can I do? , and  Password to be changed. My neighbor asked, his Facebook account Locked and How to delete it? For all these questions, I f...
Read more

Blogger Login Google Account: How to Create a New Google Account(Gmail)

Image
Blogger Login Google Account Creating a free Blogger Blogspot, we need Login Google Account for that we have to create Gmail Account initially, next create Blogger. Keeping the beginner bloggers requirement in my mind, I am sharing this article. Blogger Blogspot whether you are a skilled person or unskilled, you can create a unique and beautiful blog . It’s easy and free. Choose the Blog design theme according to your requirement. Now free responsive and static templates are available from blogger Blogspot. You can get a free domain and if you have good traffic for your Blogspot they will pay you through Google Adsense for your hard work. Google AdSense can automatically display relevant targeted ads on your blog.  You can find the most searched keywords to reach more audiences. You can know more about your blog traffic, where they are coming from, what they are searching for about your posts through Google Analytics . You can use a blogger for posting yo...
Read more