Add Css Verified Trick Like ''Contact Us'' Widget For Blogger

Below are trick of  adding an awesome and cool looking Contact form in a page of your blogger blog. This contact form looks really elegant and is very eye-catching and have a verified twitter trick sign on its tip.This specially contact us widget have some html modified and having a CSS code inside.
This contact form inspired from Bloggertut works on CSS and has a very rich feel in it.  You can make your Contact page more awesome by adding this widget to one of your blog's pages.

Step1:How To Add Contact Form Widget.

First of all add a Contact form widget to your blog,

Step2: Add CSS Code In Your Blog Template


Once you have added the Contact form widget go to Blog Dashboard → Template → Edit HTML.
 Now add the below given CSS code just above ]]></b:skin> .(Directly Find ]]></b:skin> by pressing Ctrl and F in your template)

----------------------- CSS code --------------------------------------------------------------------
#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Vb7WQxsQ-K3QbYbOVbvQoY9cX5OAxpS2_6ft3-_C1lQjATAKkHIS-bbG1ZHutxCeH5EsZCL_eLDjBvcwpI6PIEqV07nm2kMACoXAOzDKYbyDfv9yhAxuE9tVwGjFrbbMD1hjBcNNEG0/s1600/user.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYdHZpzbDi86a4_t9ARBiCTZgkOQq8ljkn_mwFu947Rok7nt3A81Z7QCwv-DlnfqPP_RiNA5xSCAxqLiPKf9TAvCNe-6FB52J3YA2tXpXIJdWi5rl7HBM_KzzbuYXDcXbKp__86GyOIY/s1600/pen.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ylM9GSZZV686nHhimCU5RmguzCfzWVDe47nx2AqHT74oR7LG5e20xPi1uHnv9kXbrtP1sJNWOWhHKhR21y2SJNDsCIJHZ9jwC0eZBwAnOs5VaEEOulzCy-khitaZksiXHJvxXYsMDgw/s1600/msg2.png)no-repeat 10px 10px; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}

----------------------- CSS code --------------------------------------------------------------------

Step3:Adding HTMLcoding In HTML Editor

First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab and paste the below given code in it.

----------------------- Code --------------------------------------------------------------------
<div id="contact_wrap"><h3>Contact Us</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form></div>
<style type="text/css">#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style>

----------------------- Code --------------------------------------------------------------------

After adding the code,Publish Page 

Now your Done. Now you and your visitors can see this awesome and cool contact form widget in your blog.
If it helped you then consider to share on your social profiles and make it worth useful for your friends and followers also.

Read More

Create The File With The Html Code Of The Contact Form

Creating fully functional HTML contact form code with PHP script processing

Firstly we will create the HTML form which will display basic form fields. It will ask users to submit their Name, Email Address and a Message.

To do this follow the instructions below

1. Login into blogger https://www.blogger.com  and Go to Pages

 2. Click "New Page" to create new page.

 3. Give the name of the Form such as "Contact Form"

4. Then Click "HTML" tab and paste Code below as shown in the figure.

<form id="contact_form" action="#" method="POST" enctype="multipart/form-data"> <div class="row"> <label for="name">Your name:</label><br /> <input id="name" class="input" name="name" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="email">Your email:</label><br /> <input id="email" class="input" name="email" type="text" value="" size="30" /><br /> </div> <div class="row"> <label for="message">Your message:</label><br /> <textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br /> </div> <input id="submit_button" type="submit" value="Send email" /> </form>

5. Click PUBLISH. Now your done.

Read More

How To Add Contact Form (Contact Us Page) in Blogger

Adding a contact us form in Blogger is a tedious task as it does not support plugins like WordPress.

The Benefits of Official Blogger Form

1. You will get the message as soon as one sends it. And, the deliverability is 100% as well.
2. The simple interface makes it easy for the visitors to contact you.
3. If you know Cascade Style Sheet (CSS) language, it will be easy for you to customize the form as per your liking.
4. The entire page will not get reloaded for sending the message.

I have divided this tutorial into three sections, adding the contact gadget, hiding it and implementing the official code in a new page.

Part – 1: Adding the Contact Gadget

Follow the steps given below to add a contact us gadget on your blog.

Step 1: Visit blogger.com and log in to your account. If you are running multiple blogs, you need to choose the desired blog from the list.

Step 2: Click on Layout from the left sidebar to get an option to add gadgets.

Step 3: You can see an Add a Gadget link on the main panel on the right side. Clicking on it will bring you to a list of gadgets.

Step 4: Then, choose More gadgets from the left side. Now, you will see Contact Form. Just add the same.

Part – 2: Hiding the Gadget

Now, you are going to learn how to hide the contact gadget.

Step 1: We need to play with the template section here. So, click on Templates from the left menu.

Step 2: Then, click on Edit HTML and you will be provided with the whole code of your blog in a large field.

Step 3: Search for ]]></b:skin> and place the following code just before it.

div#ContactForm1 {
display: none !important;
}

Then, click Save to retain the changes.

After the third step, you will not see Contact widget on your blog.

Part – 3: Adding Contact Form to a Page

You will get the customized official blogger contact form code here to be added to be shown on a separate page.

Step 1: Go to Pages and click on New page.

Step 2: Paste the following code into the HTML post editor after removing everything in it.

Step 3: Add a title (like Contact Us) and then change the settings given right as given below.

Step 4: Finally, click the Publish button. That’s all.

Read More