Wednesday, June 20, 2007

Add Contact Me form to give professional look to your blog

Is your blog visitors sending messages to you with the help of comments? Are your missing direct advertising options on your blog due to lack of Contact Me form? If so don't worry, adding a Contact Me form to your blog is very easy. Without having any HTML programming skills we can easily add a contact me form using the free online services like Feedback.com, Response-o-matic and wufoo.com.

Once you signup with any one of these free sites, you can design the required form with the help of simple and elegant drag and drop user interface. After completing the design of the form,  you will be provided with a simple HTML which you have to copy and paste in your blog. To display a Contact Me form you can make us any of your older posts or use footer area. Otherwise to give more professional look, the Contact Me form can be displayed on a pop up window(to see demo, click on Contact Me link available on the right side top corner of my blog).

Displaying Contact Me form as a popup is bit tricky. Follow these simple steps to achieve it

  1. Place the HTML code of Contact Me form provide by free online service with in the <body> section of the following HTML snippet

    <html >
        <head>
            <title>Contact Me</title>
        </head>
        <body>
            <!-- Paste your Contact Me form code
                 provide by  free online
                 service below(before </body> tag) -->
        </body>
    </html>

  2. Save the code as a HTML file and upload it any web site (you can use Google page creator free service to host the file). After uploading the file, get the URL of the file.
  3. Now it is time to edit your blogger template HTML. Take a back up of your template HTML before modifying it so that we can rollback incase of any problems
  4. Copy and paste the following java script before the </head> tag of your blogger template HTML code
    <SCRIPT TYPE="text/javascript">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
    href=mylink;
    else
    href=mylink.href;
    window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
    return false;
    }
    //-->
    </SCRIPT>

  5. It is almost over, we are just a single step away. Now add a Contact Me link in the desired location of your blog using the following HTML code
    <A 
    HREF="Don't forget to replace this text with your Contact Me form URL"
    onClick="return popup(this, 'notes')">Contact Me</A>

  6. That's all your blog displays a popup window contact form when some one clicks on Contact Me link.

Hope you have successfully added the Contact Me form. Incase if you face any difficulty please don't hesitate to contact me.

6 Comments:

Anonymous said...

Brother Gopinath and Damodhar,
G'day,

Been tried your tricks but instead of present an finished- pop-up, I got this messages : "this is a BIN files, what should mozilla firefox do ? Open (can't) or save it to disk ?"

I use wufoo for the free form, and take it placed in googlepage creator for host the file.

Any help ?

Dutt said...

Thanks for your tip
It helped me in implementing contact us form for my site.
but i have used www.creator.zoho.com form

see at http://msdotnetsupport.blogspot.co m

Thanks,
Dutt

Anonymous said...

thank you for oyur tips. now my blog has a contact form.

but is it posible to embed it into a post page?

Gopinath M said...

Yes it is possible to embed in a post.

Anonymous said...

Thank you dude, I used the contact form in my blog too
Check it once
www.technoinvent.blogspot.com

Trade Show Displays said...

yeah,Great information .it is really helpful to me.Thanks.......