Ask your WordPress questions! Pay money and get answers fast! (more info)

Need CF7 Form to popup in Fancy Box

  • 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">

<!-- cover photo and profile photo -->

<?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 } ?>

<!-- The beginning of the sections -->

<!-- Team section one -->

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

<!-- oily badges go here -->
<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>

<!-- favorite oils section -->
<?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; ?>

<!-- notable facts section -->

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

<!-- upcoming events -->

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

<!-- Right side of the page -->

<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; ?>

<!-- photographs section -->

<?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'); ?> &mdash; 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!

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">
<!-- Now your Contact Form 7 Shortcode-->
<?php echo do_shortcode('[contact-form-7 id="replace_id" title="Replace_Title"]'); ?>
</div>
</div>
<!--The Link -->
<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%});
});