--> Releasing Highly Stylized “Contact Me” Form For Bloggers and Web Developers – Available For Free Of Charge! | Experience Lab - Online business creation and development guide for bloggers and startups

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

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

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.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Releasing Highly Stylized “Contact Me” Form For Bloggers and Web Developers – Available For Free Of Charge!
Releasing Highly Stylized “Contact Me” Form For Bloggers and Web Developers – Available For Free Of Charge!
https://lh5.ggpht.com/_7wsQzULWIwo/SruJFejcycI/AAAAAAAAB3g/fyyQeO0omBw/Stylized-Contact-Me-Form-Fo%5B4%5D.gif?imgmax=800
https://lh5.ggpht.com/_7wsQzULWIwo/SruJFejcycI/AAAAAAAAB3g/fyyQeO0omBw/s72-c/Stylized-Contact-Me-Form-Fo%5B4%5D.gif?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2009/09/releasing-highly-stylized-contact-me.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2009/09/releasing-highly-stylized-contact-me.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy