I migrated an old version of a B2B website I redesigned that used the GravityForms plugin for WordPress and a Lightbox plugin. In the old site, I customized a specific template page buried deep in its theme folder that used the WordPress loop to capture the SKU of the product and passed the value to a SKU field in the GravityForms form within a lightbox popup.

It was a quick fix, but it worked. The problem: it wasn’t pretty. I didn’t use the GravityForms shortcode to insert the form in the lightbox in the first place – I hard-coded it. It wasn’t a form that required changes so it wasn’t a problem; here’s a snippet of the hack:

<div class="product_meta">
    <?php if ( $product->is_type( array( 'simple', 'variable' ) ) && get_option('woocommerce_enable_sku') == 'yes' && $product->get_sku() ) : ?>
        <span itemprop="productID" class="sku"><?php _e('SKU:', 'woocommerce'); ?> <span style="font-weight:bold;"><?php echo $product->get_sku(); ?></span></span><br/>
    <?php endif; ?>

    <?php echo $product->get_tags( ', ', ' <span class="tagged_as">'.__('Tags', 'woocommerce').' ', '</span>'); ?>
<p><a href="#" class="large green tt-button fl_box-1" target="_self">Ask us about this Product</a></p>
<div style="display:none">
    <div id="form-lightbox-1" style="padding: 0;">
<div class='gf_browser_gecko gform_wrapper' id='gform_wrapper_3' >
    <a id='gf_3' name='gf_3' class='gform_anchor' ></a><br />
    <form method='post' enctype='multipart/form-data' target='gform_ajax_frame_3' id='gform_3'  action='/about/#gf_3'>
    <div class='gform_heading'><h3 class='gform_title'>Product Inquiry</h3><h2><?php echo get_the_title($ID); ?></h2></div>
    <div class='gform_body'>
    <ul id='gform_fields_3' class='gform_fields top_label description_below'>
        <li id='field_3_5' class='gfield gfield_contains_required'><label class='gfield_label' for='input_3_5'>SKU<span class='gfield_required'>*</span></label>
            <div class='ginput_container'>
                <input name='input_5' id='input_3_5' type='text' value='<?php echo $product->get_sku(); ?> - <?php echo get_the_title($ID); ?>' class='small'  tabindex='1'   />
            </div>
        </li>

The form took the SKU, customers name, email, phone number and message and emailed it to customer service. The problem was, when I was redeveloping the new site, it used its own Lightbox function and to make things worse, I didn’t even remember how I hacked the solution in the first place. So, with the redesign and two years of GravityForms experience now under my belt, I decided that to clean up the code so that I could simply use the GravityForms shortcode to insert my form and pass any data I wanted from the product page to the lightbox which contained my form. Here’s my new, efficient solution:

1. Create & Configure a New Text Field in Your Form

I needed to pass a product’s SKU to the form, so for this example, I’m using “SKU” as the name of the field in the General tab. If this field is important, then check the “Required” field under rules.

Then, click the Advanced tab and under Visibility, select “Admin Only”. I don’t want to waste space and add redundant information on the form so I left it out.

Important Step: Check “Allow field to be populated dynamically” and below, in the Parameter Name, use this syntax, “input_<GravityForms Field ID#>” – GravityForms uses this naming covention when building its form’s text input type names; it prefixes the field ID # in your form editor, “Field ID 5”. In my example, this field had an ID of “5”, thus “input_5”:

<div class='ginput_container'>
   <input name='input_5' id='input_3_5' type='text' value='' class='small' tabindex='1' />
</div>

2. Identify the Data/Value to Pass to Your Form

If the data you want to use is enclosed in an HTML tag and has a specific class attribute, there’s no need to edit and add that to your code… otherwise, you’ll need to just like my example below. I’m using the class attribute value, “sku”.

<div class="product_meta">
   <span class="sku_wrapper">
    SKU: <span class="sku" itemprop="sku">L44740</span>
   </span>
</div>

3. Add an Event Handler to “Capture” the Data

In Step 1, the default value of the text field input_5 was empty. Adding the following javascript within your <head> section will change the value to the class I specified in Step 2, “sku”. (I’m using jQuery for my scripting)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   var the_sku = $( ".sku" ).text();
   $("#input_3_5").val(the_sku);
});
</script>

I created a variable, the_sku, where I store the value of the data between my span with class=”sku”. Then I set the value of the input field, “input_5” with the value stored in the_sku variable. I didn’t use a click(function()… because the existing Lightbox already had an eventlistener/click function associated with it so I just set the value when the page was finished loading using

$(document).ready(function()...

4. Test Your Form

You should see the value passed successfully when you open your form in the Lightbox popup. That’s it.