Thursday, September 12, 2013

How to Create Virtual Contact Form by HTML

Contact Form
Title Mr. Mrs.
Name
E-mail
Subject
Massage
Submit










Contact form is one of the most essential instrument for any website. If you are blogging on blogger platform the Blogger has an official contact form for their users. Beside that you can use other Third party contact form in your blog. But this not topic of this post. I had published several post on Blogger Contact from. In this post I am gonna show how to create Contact form using HTML code.

Basically this is virtual contact for, because users can't contact you through this form. It is just an HTML code. The code that we use to create table, by making a little change we can turn it into a contact form. You can place the in  your Blogger blog to see the result. The demo of this contact form is given at the beginning of this post. The following elements are used in this virtual contact from.
  • Title.
  • Name.
  • Email address box.
  • Message box and
  • A Submit button.

Adding Virtual Contact Form to Blogger:
  1. First sign in to your Blogger account.
  2. Then click on Layout option.
  3. Then click on Add a Gadget link and Choose HTML/JavaScript from the gadget list. 
  4. Then Paste the following code in the content box and click on Save button.
     <table align="left" bgcolor="#CCCCCC" border="5" style="width: 500px;">  
     <tbody>  
     <tr>  
     <td colspan="5"><div align="center">  
     <span style="color: red;">Contact Form</span></div>  
     </td>  
     </tr>  
     <tr>  
     <td align="center" width="150">Title</td>  
     <td colspan="2.5">Mr.<input type="checkbox" /></td>  
     <td colspan="2.5">Mrs.<input type="checkbox" /></td>  
     </tr>  
     <tr>  
     <td align="center" width="150">Name</td>  
     <td colspan="3"><input type="text" /></td>  
     </tr>  
     <tr>  
     <td align="center" width="150">E-mail</td>  
     <td colspan="3"><input type="text" /></td>  
     </tr>  
     <tr>  
     <td align="center" width="150">Subject</td>  
     <td colspan="3"><input td="" type="text" />  
     </td></tr>  
     <tr>  
     <td align="center" width="150">Massage</td>  
     <td colspan="3"><input td="" type="text" />  
     </td></tr>  
     <tr>  
     <td align="center" width="100">Submit</td>  
     <td colspan="3"><input type="submit" /></td>  
     </tr>  
     </tbody></table>  
    
That's it. Now view your blog and see the result.


Stay with www.iTTimesbd.com for more IT related Post