How to Dynamically Pass Data to a GravityForms Field Value in a Lightbox Popup

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:

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.

gravity-forms-setup

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

 

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

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)

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 the $(document).ready(function()…

4. Test Your Form

success-passing-of-data-to-gravityforms

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

 

Tags

Leave a Reply

Your email address will not be published.

top