Awesome Contact Form Widget for Blogger

Today I am going to show you how you can add a really awesome and cool looking Contact form in a page of your blogger blog. This contact form looks really elegant and is very eye-catching.

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. A live working demo of this widget can be seen by clicking the below button.





After seeing the demo if you wish to add this contact form in your blog then follow the steps below.


1. Adding The CSS


Step 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:







Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.






Once you have added the Contact form widget go to Blog Title → Template → Edit HTML.

 Now add the below given CSS code just above ]]></b:skin> .
#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/AVvXsEhGeC9ho_mLiBRf8-J7edNd-L0QIa19YIYvkZc9lyIQtxP9NxCN0SkxLrYwLLERa3P4INoDIf8q-0dc4OhBIXGFRDal-rJV5dKfZq2YDvJbUCxy6hAWWFRhh1t8KHAehBiQG-wPCuRRLoQ/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/AVvXsEhVlWjDmkPfmsf5dQcAwhhPROoloQIOsPE7ak2oNECAbrIo1LdlmKZ2Qeh_DSP74LyB238H2HJj0rTAWRhIoq-PZdMhSYEQwCxFYp-oqoglmmnH9TnjbcZd0yJObWtpczFRwrIp6nKndhA/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/AVvXsEjYuJnypnmJe5ERTAZK8MD6YIjYyMujY6VIlBRbDmTr8uOu4jSw_RbQO8EfwBtHdX-rj2twxCf4qSjbCRPw8-A-BGCGURvivz_Yn6Y7ETBY_kj_NXVBCQdg-KNSeP3nJIflOrdi2o5TuB0/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;
}



After adding the code save the template.

Step 3 : Adding the HTML in Page


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.


<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>
After adding the above code, publish the page.

You are done now. Now you and your visitors can see this awesome and cool contact form widget .

Backup Image.







Comments

Post a Comment

Popular posts from this blog

Boot Hiren’s Boot CD From USB by Using RUFUS

Image
In order to create a bootable USB drive for Hiren’s Boot CD you will need to download the following 3 things: Hiren’s Boot CD (The download link for the latest ISO version is at the bottom of the linked page) Rufus (Bootable USB creator) – This will direct you to the official Rufus download page A USB stick (Minimum requirement is 1GB for the latest version of Hiren’s) Firstly make sure that the USB stick that you are going to put Hiren’s on is blank, as these steps involve formatting your USB. Once you are sure that the stick is OK to use follow the steps below: Step 1 Right-click on the Rufus program that you have downloaded and select Run as administrator. If you are running Windows XP, just double-click on the program to open it. Before the window opens it may ask you to see if there is an update available. I elected not to check for an update as I know that the version I have works for me, but the choice is up to you. You will also be asked if it is OK for the prog
Read more

Old New Explorer For Windows 10

Image
Many Users Like windows 7 explorer, Here there is solution for that in windows 10,windows 8.1. Single "Devices and Drives" group by type in Windows Explorer Addition of 6 annoying folders in Windows Explorer Addition of Ribbon instead of Command bar Moving Details pane to right-side of Windows Explorer "OldNewExplorer" or O-N-E is a free and portable Windows Explorer tweaking utility created by "Tihiy" @ MSFN forums which allows you to: Restore Windows 7 style devices and drives grouping in Windows 8.1 Explorer Restore default libraries and remove 6 folders from Windows 8.1 Explorer Restore Command bar and remove Ribbon from Windows 8/8.1 Explorer Move Details pane back to bottom in Windows 8/8.1 Explorer Enable/disable Status bar in Windows 8/8.1 Explorer Change appearance/color of Command bar and Status bar in Windows 8/8.1 Explorer Using this free tool is very easy. You just need to run its EXE file, check/uncheck desired o
Read more

Internet Download Manager Progress Download Bar Color Change Tutorial

Image
This Tutorial is for Education Purpose, Let start open the RESOURCE Hacker Software. STEP 1.File Menu open the IDMAN.exe from Installed Location.  STEP 2.Goto Bitmap STEP 3.Goto folder 361  STEP 4.Open that and Right-click start icon  STEP 5.Then press Replace Resource  STEP 6.It'll open Dialog Box and press open file with new Bitmap  STEP 7.Choose new BITMAP exact size and Dimension of .bmp file format  STEP 8.Press Replace Button  STEP 9.Then Save it in the Programfile\Internet download manger\IDMan.exe  STEP 10.Before saving that make a copy of orginial IDMAN.EXE  STEP 11.Enjoy This
Read more