Releasing Highly Stylized “Contact Me” Form For Bloggers and Web Developers – Available For Free Of Charge!

Stylized-Contact-Me-Form-For blogger A Contact Form is a must for every website and weblog for feedback and suggestion purposes. There are many free email services that let you create free online Contact Forms but most of these forms are casual in look and appearance and are already used by millions of websites. Then how can you make your free form look any different from others?

Well luckily after spending some hours of hard work I have successfully created a well stylized and optimized code that is unique in every aspect and that is capable enough to turn your free Contact form from this,


Normal looking contact form 

to this,


This new stylized version has CSS effects added to it. Text inside fields appear in different colours and the radio buttons change colour on mouse hover. Click Here to see it in action.

You need to follow two simple steps to get to the end result,

  1. Sign Up to create a Normal Contact Form
  2. Stylize Your Contact Form*



Sign Up To Create A Normal Contact Form

First and foremost you need an account at a free email service to create a normal looking contact form which will be controlled by the email service itself. Go to Email Me Forms and Sign Up for an account and then follow the steps below


Go To Control Panel

After you have created an account click the link “Create a New Form” at the right-hand pane under Control Panel as shown below,



Then There will a total 7 steps which are illustrated in the images below. But Before going for step#1 kindly create a thank you page for your blog. This thank you page will appear when readers have successfully submitted their message to you using the contact form.  You can see my Thank you Page as an example. Make sure you give it an old date.

Once you have created it then follow each step below carefully,

1.   Step#1

Add a name for your contact form, enter your email address, leave spam Email address emtpy, add your thank you page URL/link and let number of fields be 6.


Hit Next

2.   Step#2

Change your options to the ones shown in the image below. As far as the Required? Portion is concerned, you can set it according to your will but set other options the way they are shown in the image below,


Hit Next

3.   Step#3

Change your options to exact ones below,


Hit Next

4.   Step#4

For step 4 only edit the part as shown in the image below and leave the above portion as default. Make changes for regions indicated by blue arrows only.


Hit Next

5.   Step#5

Follow the image below,


Hit Next

6.   Step#6

And this is how your contact form looks like,


Hit Next

7.   Step#7

Copy the link indicated in the image below. This is your the ID for your form. We only need this ID link and not the HTML code they provide because you deserve a better stylized code!


Now jump to the next important part shared below

Stylize Your Contact Form

First you will need to add a CSS code to your selected blogspot template. To do this follow the steps below,

  1. Log into your blogger account
  2. Go to Layout > Edit HTML
  3. Back Up your template
  4. Search for ]]></b:skin>
  5. And finally add the code below just above ]]></b:skin>

input.mbt1 {
font:10px 'trebuchet ms',helvetica,sans-serif;
border:1px dotted #0080ff;

input.mbt1hov {
font: bold 10px 'trebuchet ms',helvetica,sans-serif;
border:1px solid;

textarea {width:100%; color:#0080ff;
font:12px 'trebuchet ms',helvetica,sans-serif;
border:1px dotted #0080ff; }

textareahov { width:100%;

  • Save Your template

Now open your blogger Editor and create a new post entitled as “Contact Me” . You can give it any title you like. Give this post an old date so that it should not appear in recent posts.

  • First Create a Welcome Note  as shown in the image below. You can see my Welcome Note as an example.


  • Then Click the Edit HTML tab at the top right-hand corner and add the code shared below just below the visible text.

<form action="PASTE THE EMAIL ME FORM ID LINK HERE" charset="UTF-8" enctype="multipart/form-data" method="post"><table bg="" border="0" cellpadding="2" cellspacing="0" style="color:white;"><tbody><tr><td><span style="font-family:Verdana;font-size:85%;color:black;"></span><div id="mainmsg"></div></td></tr></tbody></table><table bg=""border="0" cellpadding="2" cellspacing="0" style="color:white;"><tbody><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Name</span></td><td><input class="mbt1" maxlength="100" name="FieldData0" size="30" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Email</span></td><td><input class="mbt1" maxlength="100" name="FieldData1" size="30" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Country</span></td><td><input class="mbt1" maxlength="100" name="FieldData2" size="30" value="" type="text"></td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Age</span></td><td><input class="mbt1" maxlength="100" name="FieldData3" size="30" value="" type="text"></td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;">Subject</span></td><td><input class="mbt1" maxlength="100" name="FieldData4" size="60" value="" type="text"> </td></tr><tr valign="top"><td nowrap="nowrap"><span style="font-weight: bold; color: rgb(102, 102, 102);font-family:Verdana;font-size:10px;"  >Message</span></td><td><textarea cols="60" name="FieldData5" rows="10"></textarea></td></tr><tr><td colspan="2"></td></tr><tr><td></td><td align="left"><input maxlength="100 " name="hida2" size="3" style="display: none;" value="" type="text"><input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" class="mbt1" name="Submit" value="Submit " type="submit"> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" class="mbt1" name="Clear" value="  Clear  " type="reset"></td></tr><tr><td colspan="2" align="center"></td></tr></tbody></table></form>



Kindly replace the bolded green text in the code above with the URL of your contact form. Copy this code as it is and don’t try to edit it. Paste it as instructed in the image below,


  • That’s it, You are Done! Click the Publish Button and see a beautiful contact form on your weblog

Let me know how you liked it. Any suggestion is highly appreciated.

Need Quick Help within 24 Hours? ASK NOW

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 »

58 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. wooooooow. this is amazing trick, and i know you made it in a long time, thanks for your time.

  2. Thanks, for this very informative post. You have made it so simple to understand to add a "contact form". I have subscribed to your RSS feeds to make myself updated with your articles.

    I really appreciate your efforts as you always come up with informative tricks and tips for bloggers. Keep posting. :)

  3. @Anonymous
    yes bro, hard work always take a longer time

    @Shabnam Sultan,

    I am glad you liked the tricks shared at this blog. With encouragement from readers like you anyone can go higher and higher. I appreciated it. thks a lot

  4. Mohd that was awesome! It is very difficult for any one to align an email form in blogger but your provided code is really the easiest way to add a form to a blog post. Thks friend for this lovely gift. As a CSS lover myself I am inspired with your work. Thumbs up!

  5. Dear,
    You made a nice and much informative Site but im sorry to say that you don't have trick to play with Ads Placement.
    You given one Google Ad but the placement is not much effective, Under the heading of post or in between the post is, i think, best placement.
    Again, im sorry to say.

  6. @vuabid,

    Well you are right that I haven't shared any trick on ad placement as yet because I launched this site on march 2009 and it would take some time to cover all topics. As far as ad placement is concerned there are several posts already shared on several blogs and I really don;t share things shared elsewhere for we share rare content only.

    Let me correct you about the ad placement on MBT Church Theme and to give some short-hand tips about Ad-placement

    1) As professionals we give more priority to Visitors first impression of our website and hence avoid embedded Ad-display at homepage

    2) Its good to add AD within the post body only if you are adding it correctly so that it may not distort the overall look of the post. Unfortunately even most of the commercial websites have underestimated this thing and have lost visitors for the last few years.

    3) The best placement for an AD is to add a AD just next to the header, sidebar and within post bodies ensuring that they absorb the areas deeply.

    Note:- Don't display ADS on homepage. Don't make a blog a Fish Market

    You are always welcome to suggest things but we would like to emphasize that you will never find repeated content on and a post on ad-placement is one of it.

  7. "Give this post an old date so that it should not appear in recent posts."

    but How?
    pls help me....


  8. @Razak

    When you write a post in blogger Editor, there you will see a link at the bottom-left-corner entitled as Post Options Click this link and you will see that there is an option at the right side entitled as Post date and time This options lets you edit the time and date of your posts. For example if the current date is 10/13/09 i.e mm/dd/yy Than change the month or year to something old like 10/13/08 Which means that the post will have a publishing date of 2008 and it will appear behind all recent posts, far at back.

    Hope you understood.

  9. Salam yaa Br. Muhammad Musthafa...,

    Thanks alot ur quick reply...

    with prayers....

    Your br.

  10. does hotmail provide email form building? if yes how? i dun wanna use so called free website email form builders... i want genuine hotmail or windows live email form... help will be much appreciated..

  11. @dawny

    Unfortunately not! Hotmail does not support email syndication and Neither does Yahoo provide such a service. Usually wed owners use their own hosting services to forward their emails to them via a Contact Form. If you want to have a genuine one then try a good hosting service like

  12. Its not the same as this form of course, but you can make a contact form on goggle docs.

  13. This is nice,im using a free form from its look amazing n has captcha code for avoid spammer :D n its also be able to be custimed :D

  14. On my blog why the result was like this

  15. the link you gave to sign-up an account is not working....
    Please update it....

  16. @samsexy

    Dear I forgot to share the link. Here it is
    Thanks for reminding

  17. i cannot see the link in your comment...
    is it
    if yes then the structure is fully different from the one in ur tutorial...

    plz check it out....
    i desperately need a contact us form.....

  18. Is there any way to have a form that allows you to avoid the use of a third party? I worry about privacy issues when a third party is controlling the message....


  19. Nice tutor.. We can add even more attractiveness with "Step-by-Step" submission.. (Code


  20. Thanks for the tip Mohammad,

    It looks like had made it even easier to add the email forms.
    All you have to do is add a page to your blog and copy and past the HTML with Javascript/CSS code they give you under my forms tab.



    PS. Your website is so easy and wonderful, thanks for all your help.

  21. @G
    Yeh I just observed that they have changed their interface. The tutorial tells you how to customize the code that they provide. And I am glad you are finding the tricks helpful. Peace :)

  22. hey mohammad,
    I am really confused from where this control panel will come ???are u talking about the one in the computer we have or something else because computer one dose not show according to ur tutorial ????
    i really want to add this form but just cant figure out HOW :(
    waiting for ur reply !!
    blessings and love

  23. use the control panel in the email me form account

  24. BTW you have too much stuff on your webpage so you should try to lessen the amount of widgets and return the CSS coding to the original template...

  25. @Priyanka

    Its emailmeform's control panel buddy! :p Create an account there and apply as guided.


    CSS is the lightest of all codes and never loads the page a lot pal.

  26. I meant it where the original CSS code looks better on her page. I my self used your mbt church theme and customized it into :

  27. How to add contact form according to the colour of the template? My blog is showing a white contact form in a black background and is looking yucky .
    Please help

  28. It seems they have changed many things while creating the form like to use include data for export we need to choose pro paid plan,dint see the option of adding clear button,I was using but now will try this incase any issue would be there will switch back to kontactr but it seems they also saw your post lolz and stopped giving the php code in one line its again for paid users so I guess cant use this or need to learn html/css/java as they are providing only that code to free users.

    Its another great post I must say however sad to see blogs that copied your content ranking higher in search engines but yet they dont have much traffic.Do we have any posts for SEO as well for blogspot?After that I dont think any reason to use self hosted wordpress unless someone wanna go for forum

    You can also use disqus for blogger comment system instead of the by default

  29. @Neeraj

    I have received several queries from some others readers too with regard to emailmeform change of interface and options and I think I must go check that again and probaly write a more updated one on it. Since my contact form is still working fine with the old code so I guess we can still style the form even if they have changed the coding system. We just need the class names.

    For copyright violators, I can just hope people may turn honest and respect the efforts of others, and what else can one say. :>

    I think you for your kind comment buddy. I will surely publish a new post.

    I have explained the reason of not using disqus in this post -> Customize Blogger Comment form

  30. Ohk I just wanted to try it out as they give a text link as well for contact form,as if now I am using and its working perfectly fine.

    Your code is working as you have the php id of your form they havent disabled it but stopped providing that id to new users,they are still giving the form with no issues but not the id instead they are giving the complete code to embed at the end link to their site,we can modify it too will explore after 1 month as if now dont have much time to explore the code

  31. @Neeraj
    I will visit the admin dashboard and will look into it. I hope I write a post soon. Thanks pal for informing.

  32. Dear Mohammad,

    Greetings !!

    Is it possible to create a contact me form in Google docs or anywhere else which is free and one need not be dependent on third party service provider like emailmeform which slows the loading time. I intend implementing a fresh contact me form at

    Your help will be appreciated and look for your comment on the blog.

  33. @Shares

    Brother apologies for the late reply:

    Yes we can make a contact form using Google DOCS and you are right it will be faster and more efficient then emailmeform however we can not customize that. You can google this " How to create a contact form using google docs?"

  34. thank you very much!!!

  35. This comment has been removed by the author.

  36. Thanks! but when i tried to install the code to my blog ,i got some errors and the contact form didn't work out..

  37. @techgeeks

    I guess they have changed their codings. I will write a fresh post on this within two days.

  38. This is truly awesome, I guess I can make a whole template with your help Sir! I just created my Contact Form following your tutorial, and because I enjoyed it so much I even created two forms, mine and my special someone! and i made two forms that suits our theme! Great! Long Live MBT!!!


  39. Hi!

    Here's an alternative. Why?

    1. No registration required.
    2. Easy to use.
    3. Anti-Spam protection.
    4. Customizable.
    5. Very, very tiny ad.

    Draw back (for me at least)?
    1. Doesn't include a drop down menu to send to different people.

    Example:,,,, etc...

    O.K. enough with the And those with the FlagFox add-on, the server is located in Germany.

  40. Forgot to mention that it is FREE too!

  41. Great! Thanks a lot for making my blog look and feel soo professional. Please take a peek at my contact for here and send me feedbacks

    Thanks Mohammad! You're the best!


  42. Great! Thanks a lot for making my blog look and feel soo professional. Please take a peek at my contact form here and send me feedbacks

    Thanks Mohammad! You're the best!


  43. Mohammad,

    THANK YOU! I am trying to put together a blog and I have been searching for an email submit form - just a plain and simple email me for more info form. I have found what I needed because of you.

    Thank You!

    also the email sig. is cool too.

  44. hi Mohammad Mustafa Ahmedzai evry thing is working fine for me but when i test the form by submitting it redirecting to email me form about the notification that its submitted how do i link it to my message notifier page.....and thanks for tutorial it really helped me....waiting for your reply ...

  45. hey emailme form is not openin on any browser

  46. there is something very important , if you actually didn't type the email it will still publish , restriction should be there in case of fooling around with the form try it out this technique is nice what you have posted , try using the sample for as a demo and see if you type the number as a text it actually accept! , this post needs to be updated


  47. Do we need to publish the 'Thank You' page as a normal page or we simply create it and save it as a draft?

  48. Thanks for the post. Here’s a tool that lets you build your custom web form in minutes – without coding. Just point-and-click

  49. @mohammad this is a spammer Please report this blog..Please must see this link..

  50. Is it complete methord dear no wont to the form creator website plz tell me i wont to add this on my site

  51. thanks a lot for U information....:D

    have nice day.

  52. Thank you brother for sharing this tutorial. At present I am using wordpress contact me form. That is very helpful for me.
    Admin of manual article submission

  53. Thanks
    Now my blog looks complete

  54. where to create form ordinary form you have given no link

  55. thanks for the great post