feedback

Beautiful Wordpress contact form

Contact form

This will be done using a plugin for Wordpress, Contact form 7 and ThickBox. ThickBox is a part of Wordpress so you don’t have to download it and Contact form 7 is very popular plugin and you probably have it :) . There are 4 simple steps to complete this:

  • Inserting ThickBox css and javascript files
  • Creating appropriate contact form
  • Inserting contact form
  • Linking to the form

Inserting ThickBox css and javascript files ThickBox is a dialog widget written using jQuery. It’s part of Wordpress and it’s used in admin area when we try to preview a theme. So there is no need to download it and to change the css file in order to get it work. We just need to insert the code for .js and .css file. Go to your theme folder and find header.php open it up and just before closing head (</head>) add this:

<script src="<?php bloginfo( 'url' ) ?>/wp-includes/js/thickbox/thickbox.js"></script>

Creating appropriate contact form Login to your blog, find Contact Form 7 settings and customize the form. I created mine with just an email and message field. After you done note somewhere the shortcode for the form you will need it later. contact form 7 shortcode Inserting contact form Now you will need that short code just insert it instead of mine in the code and don’t forget to put the name of the form in correct brackets. Again find header.php and open it, and right after closing head tag insert:

<div id="cform" style="display:none"><?php echo do_shortcode("[contact-form 3 'Feedback']"); ?>
</div>

This div will only be shown when someone clicks on the link that we will prepare. Linking to the form Find the place where you want link to be shown and insert this:

<a class="thickbox" title="Feedback" href="#TB_inline?preview=1&height=350&width=410&inlineId=cform">Contact me</a>

Change it to your needs and enjoy. You can test mine by clicking the feedback button.

Related Posts

  1. Contact form 7 PHP Invocation Code
  2. How to make tabbed widget for Wordpress
  3. How to use su.pr with Wordpress
  4. Increasing a page rank of wordpress blogs
  5. New clean theme
Digg icon Delicous icon Stumbleupon icon Reddit icon Twitter icon Facebook icon Technorati icon

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

2 Comments to Beautiful Wordpress contact form

  1. Eric's Gravatar Eric
    24. November 2009. at 16:21 | Permalink

    You don't show how to add Contact Form 7 into the header. You say to replace the code in the brackets, but you forgot to show the brackets. I have no idea how to get this to work.

  2. 25. November 2009. at 11:43 | Permalink

    Thanks for pointing out, recently I moved my site to Hostgator so this was lost during that, I fixed it now.

Leave a Reply

You can use some HTML tags

Subscribe by RSS or mail

RSS icon Mail icon
Benefits of subscribing

Tweet, tweet

Twitter bird

"Finished watching CS75 lectures, would be great to find more like this"

Follow Bojan on Twitter!!

Random Quote

quote openJust remember: you’re not a ‘dummy,’ no matter what those computer books claim. The real dummies are the people who–though technically expert–couldn’t design hardware and software that’s usable by normal consumers if their lives depended upon it.quote end
by Walter Mossberg

Tag cloud