Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Earlier today, I posted an article about Blogger's official Contact Form gadget at this link. This contact form is amazingly customizable. You can also add this form into your blog's static page or post with some simple steps. It's a great way to get rid of some extra forms in your drive. You can check this Contact Form in action by clicking here.
I'm going to finish this tutorial really quick, since I'm posting it second time. First post was not save due to an error. It was a huge post, so I'm not going to write it again :'(
Add Contact Form To Your Blog:
You can add this contact form into your blog's sidebar by reading this tutorial. Note: You must have this gadget on your sidebar to add this to your static page.
Hiding Contact Form From Your Sidebar:
Now you must hide this gadget from your site, so it'll only be available on your site's contact page. Here we go:
- Go To Blogger > Template > Edit HTML
- Search and paste this code just about ]]></b:skin>:
#ContactForm1{
display: none ! important;
}
Save your template. Now time for final step:
Adding Contact Form To A Static Page:
I'm going to finish this real quick, here we go:
- Go To Blogger > Posts
- Click on New Page and select Blank Page
- Now in your blank page, click on HTML option to switch to html editor mode
- Now paste following code and publish or update your page:
<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
That's it! Don't forget to comment. You all are free to share this post on your blog, but don't forget to give us credits for out work.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
