10 Fully Customized Blogger Official Contact Forms (Part 1)

5/23/2013 CSS , Tutorials , Widgets 0 Comments

Blogger released its official contact form but it has just only HTML so today  i will show you how you can add 10 different customized blogger contact form to blogger.

Install It Into Blogger

Step:1

We going to add blogger official contact form to specific page , so you need to understand that how it works on pages.  firstly we need to add it to sidebar or anywhere in our blog, after it we will hide it by helps of CSS. so you will see the contact form at only specific page not to sidebar.
so first go to blogger—> layout—->Add a gadget
Now you will see the new ” Contact form” gadget
Just choose gadget and add it
Now hit “save” option and that’s it.

Now go to template—> Edit HTML
Search for ]]></b:skin> in your blogs HTML
Copy and paste below code just above/before it
#ContactForm1
{
display: none ! important;
}

Don’t change the name or anything in id because it is case-sensitive.
Why we have added display: none; because we have to hide the gadget which we have added to layout tab and only can see able in page.
Finally save template.

Step:-2

So, now let’s add contact form to page,  here is the 10 different designs of contact forms, you can choose anyone as you prefer.
First go to Pages menu.
Click on New page and chose Blank page.

Go to Html tab from two tabes names Compose and HTML.

Now click on “Page Settings—> option at right side of page and check “Press “Enter” for line breaks”

Now here is 10 different designs, Select the one which you prefer
Copy and paste below code just into Blank HTML page

Style: 1

Style:2

Style:3

Style:4