djferikI use Contact Form 7 with Fancybox 2.0.3 for modal mode.
1) In the root of your website, create a new folder 'example' and new page 'email-contact.php'.
2) Download Fancybox http://fancyapps.com/fancybox/ and extract all in 'example' folder.
3) Download jQuery minified library http://jquery.com/ and copy in 'example' folder.
4) Go in WordPress admin panel / C F 7 and create a new custom form:
<div>
<ul id="form_list">
<li><label>Name:</label>[text* your-name class:wpcf7-input]</li>
<li><label>E-mail:</label>[email* your-email class:wpcf7-input] </li>
<li><label>Subject:</label>[text* your-subject class:wpcf7-input]</li>
<li><label>Message:</label>[textarea* your-message class:wpcf7-textarea]</li>
<li><label> </label>[submit "Send"]</li>
</ul>
</div>save and copy/remember shortcode: [contact-form....].
5) now create a new page 'email-contact.php'
<?php
/** Loads the WordPress Environment and Template */
require('../wp-blog-header.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Email Contact</title>
<!-- start page and form style -->
<style type="text/css">
body{margin:0;padding:0;text-align:left;color:#666;font:12px/20px tahoma,sans-serif}
.content{width:600px;height:380px;clear:left;float:left;padding-left:10px;border:1px solid #d6d6d6;border-radius:5px}
#form_list{list-style-type:none;float:left;clear:left;padding:0;margin:0}
#form_list li{float:left;clear:left;margin-bottom:10px}
#form_list label{width:100px;float:left;margin-right:20px;font-weight:bold}
#form_list .wpcf7-input{float:left;border:1px solid #d6d6d6;font:11px tahoma,sans-serif;width:300px;height:18px;padding-left:5px;padding-right:5px}
#form_list .wpcf7-captcha-input{float:left;border:1px solid #d6d6d6;font:11px tahoma,sans-serif;width:40px;height:18px;padding-left:5px;padding-right:5px;text-align:center}
#form_list .wpcf7-textarea{float:left;border:1px solid #d6d6d6;font:11px tahoma;width:300px;height:100px;padding:5px 5px 0 5px;overflow:auto;resize:none}
#form_list .wpcf7-submit{width:100px;height:30px;float:left;background-color:#43c2fe;color:#101010;text-decoration:none;display:block;cursor:pointer;font-weight:bold;border:0;margin-top:10px}
</style>
<!-- end page and form style -->
<!-- add action wp_head -->
<?php do_action('wp_head'); ?>
</head>
<body>
<div class="content">
<!-- CHANGE with your shortcode [contact-form....] -->
<?php echo do_shortcode('[contact-form....]'); ?>
<!-- add action wp_footer -->
<?php do_action('wp_footer'); ?>
</div>
</body>
</html>6) in header.php or footer.php of your theme. add necessary scripts:
<script src="/example/jquery.min.js"></script>
<script src="/example/jquery.fancybox-2.0.3/jquery.fancybox.pack.js"></script>
<script src="/example/jquery.fancybox-2.0.3/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="/example/jquery.fancybox-2.0.3/jquery.easing-1.3.pack.js"></script>
<script>
<!-- change 'yourdomain.com' with your real domain :) -->
$(function(){$(".email-contact").fancybox({tpl:{iframe:'<iframe class="fancybox-iframe" name="fancybox-frame" frameborder="0" hspace="0" allowtransparency="true" scrolling="no" src="http://yourdomain.com/example/email-contact.php"></iframe>'},maxWidth:"645",maxHeight:"425",fitToView:!1,width:"645",height:"425",autoSize:!1,closeClick:!1,openEffect:"none",closeEffect:"none"})})
</script>7) Now create a final link:
<a href="#" class="email-contact fancybox.iframe">contact</a>
END
try this example on my website djferik.it
I hope it's useful to someone :)
tobydecks