Modal Contact Form 7 with Fancybox 2

  • I 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 https://fancyapps.com/fancybox/ and extract all in ‘example’ folder.
    3) Download jQuery minified library https://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="https://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 ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter djferik

    (@djferik)

    correction:
    add css style of fancybox in header.php:

    <style>@import "/example/jquery.fancybox-2.0.3/jquery.fancybox.css";</style>

    That is awesome mate. Just what I was looking for.
    However, I am getting the Fancybox error that it can’t find the content, so I’m wondering if I’ve missed something.

    <!-- change 'yourdomain.com' with your real domain :) -->jQuery(function(){jQuery(".email-contact").fancybox({tpl:{iframe:'<iframe class="fancybox-iframe" name="fancybox-frame" frameborder="0" hspace="0" allowtransparency="true" scrolling="no" src="https://79.170.44.86/curtis-sloane.com/wp-content/themes/curtisSloane/overlayForms/email-contact.php"></iframe>'},maxWidth:"645",maxHeight:"425",fitToView:!1,width:"645",height:"425",autoSize:!1,closeClick:!1,openEffect:"none",closeEffect:"none"})})
    The call has the right URL in for the email-contact.php file, so I’m a bit stumped.

    The shortcode call looks right too <?php echo do_shortcode('[contact-form-7 id="248" title="OverTest"]'); ?>

    I’m using WP-property that already uses fancybox, but the overlay is working so I guess there’s no conflicts. Any ideas?

    The dev site is here
    https://79.170.44.86/curtis-sloane.com/
    Click the Register to find out more link the top right.

    Cheers
    Toby

    Thread Starter djferik

    (@djferik)

    try to change address ‘./overlayForms/email-contact.php’:

    <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="./overlayForms/email-contact.php"></iframe>'},maxWidth:"645",maxHeight:"425",fitToView:!1,width:"645",height:"425",autoSize:!1,closeClick:!1,openEffect:"none",closeEffect:"none"})})
</script>

    I’m not sure because you’re using the old version of fancybox. I try to see where the differences between 1.3.4 and 2.0.3.

    ??

    Thread Starter djferik

    (@djferik)

    this is correct for your Fancybox 1.3.4:

    The script in ‘header.php’:

    <script>
jQuery(function(){
  $(".email-contact").fancybox({
		'transitionIn'	: 'none',
		'transitionOut'	: 'none',
		'autoScale'     : false,
		'type'		: 'iframe',
		'width'		: 645,
		'height'	: 425,
		'scrolling'   	: 'no'
  });
});
</script>

    The link:

    <a class="email-contact iframe" href="https://79.170.44.86/curtis-sloane.com/wp-content/themes/curtisSloane/overlayForms/hello.php">Register to find out more</a>


    Try my example

    I hope goes well.

    bye ??

    Hey djferik.

    Thank you!
    I’ve got it working now.
    The old version of Fancybox is because it comes with WP-Property.

    I really appreciate you taking some time to look at it.
    You’re a legend ??

    Thanks again

    Toby

    Thread Starter djferik

    (@djferik)

    solved? well

    now, if you want to add a captcha code, install and activate the wordpress plugin really simple captcha.

    Go to CF7 admin and generate a Captcha tag.

    add this is my sample form field:
    <li><label>Captcha code:</label>[captchar captcha-138 6/4 class:wpcf7-captcha-input] [captchac captcha-138 size:m class:wpcf7-captcha-image]</li>

    change only “captcha-138” with your.

    style:

    #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-captcha-image{width:72px;height:24px;border:none}

    bye ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Modal Contact Form 7 with Fancybox 2’ is closed to new replies.