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,

MBT-Stylized-Contact-Me-Form

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,

email--me-form-control-pane

 

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.

EMAIL-FORM-STEP1

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,

EMAIL-FORM-STEP2

Hit Next

3.   Step#3

Change your options to exact ones below,

EMAIL-FORM-STEP3

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.

EMAIL-FORM-STEP4

Hit Next

5.   Step#5

Follow the image below,

EMAIL-FORM-STEP5

Hit Next

6.   Step#6

And this is how your contact form looks like,

EMAIL-FORM-STEP6

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!

EMAIL-FORM-STEP7

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 {
color:#FF8E1F;
font:10px 'trebuchet ms',helvetica,sans-serif;
background-color:#fff;
border:1px dotted #0080ff;

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

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

textareahov { width:100%;
color:#0080ff;
}

  • 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.

Blogger-Compose-Mode 

  • 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,

EDIT-HTML-MODE

  • 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.

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 »

48 comments

PLEASE NOTE:
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.

    ReplyDelete
  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. :)

    ReplyDelete
  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

    ReplyDelete
  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!

    ReplyDelete
  5. @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 www.mybloggertricks.com and a post on ad-placement is one of it.

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


    but How?
    pls help me....

    Razak

    ReplyDelete
  7. @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.

    ReplyDelete
  8. Salam yaa Br. Muhammad Musthafa...,

    Thanks alot ur quick reply...

    with prayers....

    Your br.
    Razak

    ReplyDelete
  9. 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..

    ReplyDelete
  10. @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 godaddy.com

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

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

    ReplyDelete
  13. On my blog why the result was like this http://www.senyawa.com/2010/03/contact-me.html?

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

    ReplyDelete
  15. @samsexy

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

    ReplyDelete
  16. i cannot see the link in your comment...
    is it http://www.emailmeform.com/
    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.....

    ReplyDelete
  17. 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....

    Honey

    ReplyDelete
  18. Nice tutor.. We can add even more attractiveness with "Step-by-Step" submission.. (Code http://www.dynamicdrive.com/dynamicindex16/formwizard.htm)

    Shrinivas
    www.techgyo.com

    ReplyDelete
  19. Thanks for the tip Mohammad,

    It looks like emailmeform.com 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.

    Thanks,

    Gimmi

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

    ReplyDelete
  20. @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 :)

    ReplyDelete
  21. 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
    priyanka

    ReplyDelete
  22. use the control panel in the email me form account

    ReplyDelete
  23. 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...

    ReplyDelete
  24. @Priyanka

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


    @Anonymous

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

    ReplyDelete
  25. 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 : http://histofill.blogspot.com/

    ReplyDelete
  26. 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

    ReplyDelete
  27. 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 http://kontactr.com/ 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

    ReplyDelete
  28. @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

    ReplyDelete
  29. 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 http://kontactr.com/ 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

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

    ReplyDelete
  31. 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 http://www.indian-share-tips.com/

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

    ReplyDelete
  32. @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?"

    ReplyDelete
  33. @techgeeks

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

    ReplyDelete
  34. 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: webmaster@xyz.com, advertise@xyz.com, manager@xyz.com, owner@xyz.com, etc...

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

    ReplyDelete
  35. Forgot to mention that it is FREE too!

    ReplyDelete
  36. 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 http://www.win7extremeblog.info

    Thanks Mohammad! You're the best!


    Regards,
    Angelo

    ReplyDelete
  37. 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 http://www.win7extremeblog.info

    Thanks Mohammad! You're the best!


    Regards,
    Angelo

    ReplyDelete
  38. 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.

    ReplyDelete
  39. 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 ...

    ReplyDelete
  40. hey emailme form is not openin on any browser

    ReplyDelete
  41. 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

    thanks

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

    ReplyDelete
  43. Thanks for the post. Here’s a tool that lets you build your custom web form in minutes – without coding. Just point-and-click
    http://www.caspio.com/online-database/features/web-forms-online.aspx

    ReplyDelete
  44. thanks a lot for U information....:D

    have nice day.

    ReplyDelete
  45. very nice blog..

    ReplyDelete
  46. Thanks
    Now my blog looks complete http://torrentfreaknews.blogspot.com

    ReplyDelete