Create a Custom Contact Form For Blogger - Part 2

In the first part of our series you learnt how to add a contact Form to your BlogSpot blog and control its display settings. Today you will learn how to change its stylesheet to reflect your custom styles with a more appealing design. You will learn today how to customize the Form input fields, add icons to it, add a "Clear Button" and play several tricks with your custom form. The form is built using XHTML Get or Post Methods unlike PHP Forms which are used widely today. If you have not referenced the first part of our tutorial then kindly read it first:

The above Stylesheet will work just fine with all browsers including Internet Explorer. The code has been made compatible to work fine with all major browsers like IE, Mozilla and Webkit browsers.

To change button colors edit the class .MBT-button-color

To change the button color on mouse hover edit the class .MBT-button-color:hover and for active mode edit .MBT-button-color:active

5. Save your template and you are all done!

4. Add the Form anywhere you like!

Now if you wish to add the form to your sidebar or post then simply follow these steps:

To add the form to sidebar. Copy the HTML code in Step#4 and paste it inside HTML/JavaScript Widget

To add the form to Post editor, switch to HTML mode and paste the code in Step#4 inside it

Your Views:

I just hope this tutorial would be helpful for all of you. The steps are extremely simple and the codes are carefully written. You can now create a contact form to let your clients request you for a price quote or add it to let your readers contact you in person. Wish you all the best with your blogging endeavors. I will make sure you enjoy it to your fullest. Peace and blessings buddies :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by
Clicking Here »

Hey Hafeez! have you ever tried such a contact form where it's possible to connect the form by a tab with the support of Jquery and you could even use Muhammad's recently released style of contact form...

Try out how to connect contact form by a tab with Jquery the robustic way you've ever seen..

Sir use an effective way to represent contact form by connecting with a link where no needed to add it by a blank page (the antiquary way) just it will show a dynamic popup with form and other area will remain underneath of opacity effect and entire thing will be great charming try out atHere

heyy, When i click on the send button , nothing happens. Where would the contact form details go. Don't i need to add my email id or Google Docs URL.. This is just the front end,, what about the back end :?

@Mustafa:Brother, I followed all steps carefully.But, there is some problem with my blog.Please check it out: www.pdfuniverse.blogspot.comThe contact form is not hidden from homepage.And some of my css is also shown on the homepage screen.Please solve it :(

As I expected I guess most of you who are having troubles did not even read Part1? did you? :pIn Part1 I mentioned that you will firts need to create a contact form using Layouts > Add a Gadget option. Once you create it you will control its display after whihc you will follow Part2.

Post Updated and FixedI am extremely sorry buddies I forgot that I was adding the IE conditional statement inside the b:skin tag. I just fixed the code and it works fine now. :)

@依之汉 @Moihammad Waqas and @KunalForgive me buddies :) Code fixed now

@BrianThanks for that alternative way and for helping the readers dear. I would suggest that you add the IE conditional tags inside the style tag else the contact form wont display correctly in explorer. I have corrected the code you can now use it.:)

My form is working fine on Chrome and Firefox but when i am using it on Internet explorer and click on send button. It just gets stuck on sending and does not send message to me. When i use this on Chrome and Firefox, i am getting emails correctly. This problem is coming only in Internet explorer. Can you please suggest something?

Mine works fine, but i have a quesiton.why you did't give a condition, the CSS will execute for all Posts and pages and will increase load time? is't?why not Css code execture just for the Static Page contact form page? can we add CSS code inside Contact me form page?

@Shiraz Shakeel Dude you need to add Contact Form widget in your template, after that if you wants to hide it, then hide it ( steps to hide widget : http://www.mybloggertricks.com/2013/05/customize-blogger-contact-form-part-1.html )

after that copy above code and past it in static page and publish it and check.... hope so it ll work for you :)

Well, I am glad to see that there is a Muslim blogger who is much famous and equally helpful. Your tutorials are good. And this one for making contact form page is extremely beneficial for me. Keep up :)

I have a blog " www.benignblog.com " and I need some help regarding it. Even though, I have almost completely designed it by myself but there is still something which I am not able to fix. So, I should contact you in person via email, I guess...!

Dear Mustafa Wordpress Is good or BloggerI like wordpress because in wordpress if you publish anything in the you won't get .html which is good now which should i select and in wordpress you will get your website / blog when you upload media files in blogger it goes to picassa which is to wrost

I think for starters blogger is a good platform to start a blog it's easy to use and very effective also. I would suggest you to go with blogger blog because i think the biggest problem with a wordpress blog is you can't use it's full features like you can't add a HTML codes like Google Adsense codes unless you have a pro wordpress account and for this you will have to pay a monthly amount to wordpress which i think is very difficult for any new blogger to pay that fee. But in blogger you don't have to pay any kind of monthly fee to host your blog or any thing. and you can also use any HTML codes very easily in blogger blog like Google Adsense codes.

Very informative post. But I have also used these tasks for my site seo. I'll try to adopt your tips for few time to check if it really helps my site's seo. Also visit Free Likes and Tech Blog Thanks for sharing the article!

I have just added it on my blog....It works fine...thanks for it....Can I please tell me how to add a title above each box? Like Name, Email Id, Message etc....and How to add more boxes like 'website link' and 'subject'??

Very cool Mustafa, but you didn't tell us on how to change the messages which show after sending the message, or when something is wrong with the form, and of course we need to modify the emails where the message will be sent.

hi.this is really great article. I followed this article and created the contact form on my blog www.webcodeexpert.com.Its working and looking awesome. Thanks for this post. I suggest all reader and bloggers to follow this article and implement contact form as i did. Anyone can also check the implemented form live on www.webcodeexpert.com/p/contact-us.html

this is awesome method to add a contact us form, but it has bug. When anyone clicks on any label, it start showing this the contact form and i fixed this bug :Just press Ctrl+F and type ]] and paste this code just above it

Your solution worked perfectly for me, thanks a lot for posting such an excellent method.I have one question though: I would like to track contact form submission as a goal in Google Analytics. Do you have an idea on how it is possible?Thanks!

hello Mohammad,i added all the above code to my contact us pageand form will will be sowing as you mentioned but there is problem??send button is not working ???what can i do please help me if you have time then?thanksmy contact us page is http://www.latestpicsms.com/p/contact-us.html

Hi i get lots of tips from MBT. I have used modifeid contact form and added mobile coulumn in it but it does not captures the data. Could you please help . my blog is http://atshealth4u.blogspot.in/p/contact-us.html#. Mobile feild does not gets capture.

About The Author

Hi! I am Mohammad, an experienced SEO Consultant, Pro Blogger, Computer System Engineer, an addicted Web Developer and now a father to a beautiful princess "Ifza". STCnetwork was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..