Beautiful WordPress 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>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'url' ) ?>/wp-includes/js/thickbox/thickbox.css" />

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