Ask your WordPress questions! Pay money and get answers fast!

Need CF7 Form to popup in Fancy Box WordPress

SOLVED

I have a current WordPress template file that shows a fancy box pop when a small jar is clicked on. See this example (scroll DOWN and click on one of the jars):

[[LINK href="http://sample-one.oilysites.com/team/sample-team-member/"]]http://sample-one.oilysites.com/team/sample-team-member/[[/LINK]]

That works fine. However, I want to add a CF7 form on the same page that also loads in a fancy box. I'd like to have the form load triggered by clicking on a button.

Below is the current code that makes up this template file (I'm using Advanced Custom Fields in case some of the code is unfamiliar):

<?php get_template_part('templates/header'); ?> <?php get_template_part('templates/sub-header'); ?> <?php setcookie("team_site", "Team Site", time()+3600, "/"); ?> <div class="container"> <div class="row"> <?php while (have_posts()) : the_post(); ?> <div class="team-main">  <?php if (get_field('profile_cover_photo')) { ?> <div class="team-cover-photo" style="background:#ccc url(<?php the_field('profile_cover_photo'); ?>);"> <div class="team-logo"><a href="<?php the_field('profile_pic'); ?>" rel="lightbox"><img src="<?php the_field('profile_pic'); ?>" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>"></a></div> </div> <?php } else { ?> <div class="team-cover-photo" style="background:#ccc url(<?php the_field('profile_cover_photo'); ?>);"> <div class="team-logo"><a href="<?php the_field('profile_pic'); ?>" rel="lightbox"><img src="<?php the_field('profile_pic'); ?>" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>"></a></div> </div> <?php } ?>   <div class="team-left"> <div class="team-box box-sizing fill"> <div class="team-name-padding box-sizing fill"> <div itemscope itemtype="http://schema.org/Organization"> <?php if (get_field('first_name')) { ?> <h2 class="team-name"><span itemprop="member"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></span></h2> <?php } else { ?> <h2 class="team-name"><span itemprop="member"><?php the_author_meta('first_name'); ?> <?php the_author_meta('last_name') ?></span></h2> <?php } ?> </div> <div itemscope itemtype="http://schema.org/PostalAddress"> <div class="team-location"><span itemprop="addressLocality"><?php the_field('city'); ?></span>, <span itemprop="addressRegion"><?php the_field('state'); ?></span></div> </div> </div> </div>  <div class="team-box box-sizing fill"> <div class="team-about-box-padding box-sizing fill" style="padding-bottom:.22em;"> <?php get_template_part('templates/oily-badges'); ?> </div> </div> <?php if (get_field('show_content')): ?> <div class="team-box box-sizing fill"> <div class="team-header box-sizing fill"><h2 class="profile-no-pad"><?php the_field('about_title'); ?></h2></div> <div class="team-about-box-padding box-sizing fill"> <?php the_field('a_short_summary_about_me'); ?> </div> </div> <?php endif; ?> <div id="favoils"></div>  <?php if (get_field('favorite_oils')): ?> <div class="team-box box-sizing fill" itemscope itemtype="http://schema.org/LocalBusiness"> <div class="team-header box-sizing fill"><h2 class="profile-no-pad">A Few of <?php the_field('first_name'); ?>'s Favorite <span itemprop="makesOffer">Essential Oils</span></h2></div> <div class="team-oils-box-padding box-sizing fill" style="background:#fff;border:1px solid #f1f1f1;"> <?php //Loops through the repeater while (have_rows('favorite_oils')) { the_row(); //fetches the post object field. Assumes this is a single value, if they can select more than one you have to do a foreach loop here like the one in the example above $oil_object = get_sub_field('select_oil'); if($oil_object){ //Fetch the image field from the oils post $image = get_field('main_image_link', $oil_object->ID); $post_url = get_permalink($oil_object->ID); $aj_img_title = get_field('your_own_product_title ', $oil_object->ID); if( empty($aj_img_title) ) $aj_img_title = get_field('short_name', $oil_object->ID); $aj_img_text = get_field('your_own_product_text ', $oil_object->ID); if( empty($aj_img_text) ) $aj_img_text = get_field('section_text_one', $oil_object->ID); } ?> <div style="display:none"> <div id="aj-fancy-<?php echo $oil_object->ID;?>" class="aj_fancy_div" > <div style="padding:1em;"> <div style="font-size:24px;background:#f0f0f0;padding:.3em 0 .2em .5em;margin:0 0 .5em 0;"><?php echo $aj_img_title;?></div> <?php echo $aj_img_text;?> </div> </div> </div> <div class="team-oils-small ajfancybox"> <a href="#aj-fancy-<?php echo $oil_object->ID;?>" > <img src="<?php echo $image;?>" /> </a> </div> <?php //Echo out the image with the medium size. Change this as you like! //echo ' <div class="team-oils-small"><a target="_blank" href="'.$post_url.'" ><img src="' . $image . '" /></a></div>'; } ?> <div class="clear"></div> </div> </div> <?php endif; ?>  <div class="team-box box-sizing fill"> <div class="team-header box-sizing fill"><h3 class="profile-no-pad">Notable Facts on <?php the_field('first_name'); ?> <?php the_field('last_name'); ?></h3></div> <div class="team-box-padding box-sizing fill"> <div class="clear"></div> <div class="team-left-divider-dark"></div><div class="team-left-divider-light"></div> <?php if( get_field('degree') ): ?> <div class="team-detail-item box-sizing"> <div class="team-detail-menu-image"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/menu-degree.png" class="tooltips" title="Degree or Training" alt="Degree or Training"></div> <div class="team-detail-menu-text box-sizing"><?php the_field('degree'); ?></div> </div> <div class="clear"></div><div class="team-left-divider-dark"></div><div class="team-left-divider-light"></div> <?php endif; ?> <?php if( get_field('career/skill') ): ?> <div class="team-detail-item box-sizing"> <div class="team-detail-menu-image"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/menu-briefcase.png" class="tooltips" title="Job or Skills" alt="Job or skill"></div> <div class="team-detail-menu-text box-sizing"><?php the_field('career/skill'); ?></div> </div> <div class="clear"></div><div class="team-left-divider-dark"></div><div class="team-left-divider-light"></div> <?php endif; ?> <div class="team-detail-item box-sizing"> <div class="team-detail-menu-image"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/menu-start.png" class="tooltips" title="Started using oils on..." alt="Started using oils on"></div> <div class="team-detail-menu-text box-sizing">Using oils since <?php $date = date_create(''.get_field('started_using_oils').''); echo date_format($date,'F d, Y'); ?></div> </div> <div class="clear"></div><div class="team-left-divider-dark"></div><div class="team-left-divider-light"></div> <div class="team-detail-item box-sizing"> <div class="team-detail-menu-image"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/menu-map.png" class="tooltips" title="<?php the_field('city'); ?> Essential Oils Distributor" alt="<?php the_field('state'); ?> essential oils"></div> <div class="team-detail-menu-text box-sizing">Essential Oils <?php the_field('city'); ?>, <?php the_field('state'); ?></div> </div> <div class="clear"></div><div class="team-left-divider-dark"></div><div class="team-left-divider-light"></div> <div class="team-detail-item box-sizing"> <div class="team-detail-menu-image"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/menu-yl.png" class="tooltips" title="Young Living Member Number" alt="Young Living Member Number"></div> <div class="team-detail-menu-text box-sizing">YL Member #:<a href="https://www.youngliving.com/vo/#/signup/start?site=US&sponsorid=<?php the_field('young_living_number'); ?>&enrollerid=<?php the_field('young_living_number'); ?>" target="_blank"> <?php the_field('young_living_number'); ?></a></div> </div> </div> </div>  <?php if( have_rows('upcoming_events') ): ?> <div class="team-box box-sizing fill"> <div class="team-header box-sizing fill">Upcoming Classes & Events</div> <div class="team-box-padding" itemscope itemtype="http://schema.org/Event"> <?php while( have_rows('upcoming_events') ): the_row(); // vars $eventtitle = get_sub_field('event_title'); $eventdate = get_sub_field('event_date'); $eventdescription = get_sub_field('event_description'); $eventvenue = get_sub_field('event_venue'); $eventlocation = get_sub_field('event_location'); ?> <div class="team-calendar-icon box-sizing"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-calendar.png" alt="<?php echo $eventtitle; ?>"></div> <div class="team-calendar-event box-sizing fill"> <div class="team-event-title" itemprop="name"><?php echo $eventtitle; ?></div> <div class="team-event-date">Date: <span itemprop="startDate"><?php echo $eventdate; ?></span></div> <div class="team-event-date">Address: <span itemprop="address"><?php echo $eventlocation; ?></span></div> <div class="clear"></div> <div class="team-event-description" itemprop="description"><?php echo $eventdescription; ?></div> </div> <div class="clear"></div> <?php endwhile; ?> </div> </div> <?php endif; ?> </div>  <div class="team-right"> <div class="team-box box-sizing fill"> <div id="socialmedia"></div> <div class="team-header box-sizing fill">Connect with <?php the_field('first_name'); ?> <?php the_field('last_name'); ?></div> <div class="team-social-padding box-sizing fill"> <?php if( get_field('social_twitter') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_twitter'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-twitter.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Twitter" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Twitter" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Twitter"></a></div> <?php endif; ?> <?php if( get_field('social_facebook') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_facebook'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-facebook.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Facebook" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Facebook"></a></div> <?php endif; ?> <?php if( get_field('social_google') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_google'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-google.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Google Plus" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Google Plus"></a></div> <?php endif; ?> <?php if( get_field('social_pinterest') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_pinterest'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-pinterest.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Pinterest" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Pinterest"></a></div> <?php endif; ?> <?php if( get_field('social_vimeo') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_vimeo'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-vimeo.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s Vimeo Channel" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s Vimeo Channel"></a></div> <?php endif; ?> <?php if( get_field('social_youtube') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_youtube'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-youtube.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s YouTube Channel" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s YouTube Channel"></a></div> <?php endif; ?> <?php if( get_field('social_instagram') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_instagram'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-instagram.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Instagram" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?> on Instagram"></a></div> <?php endif; ?> <?php if( get_field('social_blog') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_blog'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-blog.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s Blog" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s Blog"></a></div> <?php endif; ?> <?php if( get_field('social_website') ): ?> <div class="team-social-icon"><a href="<?php the_field('social_website'); ?>" target="_blank"><img src="<?php echo esc_url( home_url( '/' ) ); ?>media/team-website.png" class="tooltips" title="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s Website" alt="<?php the_field('first_name'); ?> <?php the_field('last_name'); ?>'s Website"></a></div> <?php endif; ?> </div> </div> <div id="contactform"></div> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_field('first_name'); ?> <?php the_field('last_name'); ?>" style="color:#000;"><a href="https://www.youngliving.com/vo/#/signup/start?site=US&sponsorid=<?php the_field('young_living_number'); ?>&enrollerid=<?php the_field('young_living_number'); ?>" target="_blank"> <div class="team-order-button box-sizing"><?php the_field('order_button_text'); ?></div> </a> <?php if (get_field('email')): ?> <div class="team-box box-sizing fill"> <div class="team-header box-sizing fill"><h3 class="profile-no-pad">Contact <?php the_field('first_name'); ?> <?php the_field('last_name'); ?></h3></div> <div class="team-box-padding box-sizing"> <?php the_field(contact_form_intro); ?> <div class="team-detail-form box-sizing"> <?php echo do_shortcode('[contact-form-7 id="1309" title="Team Profile Form"]'); ?> </div> </div> </div> <?php endif; ?>  <?php if( get_field('photo_gallery') ): ?> <div class="team-box-tall box-sizing fill"> <div class="team-header box-sizing fill"><h3 class="profile-no-pad"><?php the_field('first_name'); ?>'s Photos</h3></div> <div class="team-photos-padding box-sizing fill"> <?php $images = get_field('photo_gallery'); if( $images ): ?> <?php foreach( $images as $image ): ?> <div class="team-gallery-image box-sizing"> <a href="<?php echo $image['url']; ?>" rel="lightbox"><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" /></a> </div> <?php endforeach; ?> <?php endif; ?> </div> </div> <?php endif; ?> </div> </div> <div class="clear"></div> <?php if (get_field('promo_image_one',2)) { ?> <a href="<?php the_permalink(); ?>" rel="lightbox"><img src="<?php the_field('promo_image_one',2); ?>" alt="<?php the_field('promo_image_title',2); ?>"></a> <?php } else { ?> <a href="http://www.oilysites.com/media/young-living-monthly-promotion.jpg" rel="lightbox"><img src="http://www.oilysites.com/media/young-living-monthly-promotion.jpg" alt="Young Living Essential Oils Promo"></a> <?php } ?> <div class="clear"></div> <div class="team-header profile-blteam-header box-sizing fill"> <div class="profile-blteam-signature">Want to learn more about the Young Living <?php the_field('monthly_promo_month', 40); ?> Promo? <a href="#contactform" rel="m_PageScroll2id">Click here</a> to contact <?php the_field('first_name'); ?> — Essential oils <?php the_field('city'); ?>, <?php the_field('state'); ?></div> </div> </div> </div> <div class="clear" style="height:.56em;"></div> <?php endwhile; ?> <?php wp_link_pages(array('before' => '<nav class="pagination">', 'after' => '</nav>')); ?> <script type="text/javascript" src="<?php echo get_template_directory_uri();?>/fancy/jquery.fancybox.js"></script> <link rel="stylesheet" href="<?php echo get_template_directory_uri();?>/fancy/jquery.fancybox.css" type="text/css" media="screen" /> <script> jQuery(document).ready(function($) { $(".ajfancybox a").fancybox({ autoDimensions: false }); }); </script> <?php get_template_part('templates/footer'); ?>

Some notes on what was done to make the fancy box work on the image bottles:

<blockquote>
1. added folder fancy to the theme
2. added following code line 347 - 356

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/fancy/jquery.fancybox.js"></script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/fancy/jquery.fancybox.css" type="text/css" media="screen" />

<script>
jQuery(document).ready(function($) {
$(".ajfancybox a").fancybox({
autoDimensions: false
});
});
</script>

3. commented old code line 127

//echo ' <div class="team-oils-small"><a target="_blank" href="'.$post_url.'" ><img src="' . $image . '" /></a></div>';

4. added following code line 110 - 122

<div style="display:none">
<div id="aj-fancy-<?php echo $oil_object->ID;?>" class="aj_fancy_div" >
<h1><?php echo $aj_img_title;?></h1>
<p>
<?php echo $aj_img_text;?>
</p>
</div>
</div>
<div class="team-oils-small ajfancybox">
<a href="#aj-fancy-<?php echo $oil_object->ID;?>" >
<img src="<?php echo $image;?>" />
</a>
</div>

5. added following code line 96 - 104

$aj_img_title = get_field('your_own_product_title ', $oil_object->ID);

if( empty($aj_img_title) )
$aj_img_title = get_field('section_title_one', $oil_object->ID);

$aj_img_text = get_field('your_own_product_text ', $oil_object->ID);

if( empty($aj_img_text) )
$aj_img_text = get_field('section_text_one', $oil_object->ID);

</blockquote>

Let me know if this doesn't make sense - thanks!

2015-12-04 by Kyler Boudreau

Answers (4)

2015-12-04

Reigel Gallarde answers:

you can add something like this on the template...

<div style="display:none"> <div id="load_cf7" class="some-class" > <?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?> </div> </div> <div class="my-button ajfancybox"> <a href="#load_cf7" >Button</a> </div>

you just then need to style it.

note of the id on the cf7 shortcode.. id="1234" should have your cf7 id

Kyler Boudreau comments:

You get the award man - I tried everyone's code and your's is the only one that worked 'out of the box.' Thank you!

2015-12-04

Arnav Joy answers:

which button you want to load it ?

2015-12-04

Sébastien | French WordpressDesigner answers:

this i exactly the cde you need
<div class="team-oils-box-padding box-sizing fill"> <div style="display:none"> <div id="form_1309" class="aj_fancy_div" > <div style="padding:1em;"><div>THE FORM</div> <p>this is the Team Profile Form</p> <?php echo do_shortcode('[contact-form-7 id="1309" title="Team Profile Form"]'); ?> </div> </div> </div> <div class="team-oils-small ajfancybox"> <a href="#form_1309" > Contact Form </a> </div>

2015-12-04

Rempty answers:

You need add this
<div id="hidden-content"> <div id="form-popup">  <?php echo do_shortcode('[contact-form-7 id="replace_id" title="Replace_Title"]'); ?> </div> </div>  <a href="#form-popup" class="open-form">Open Form</a> /*Add this to your css*/ #hidden-content{ display:none; } /*And this Javascript Code*/ jQuery(document).ready(function($) { jQuery(".open-form").lightbox({inline:true,width:60%}); });