Dynamic population (via URL variables) to Gravity Forms

Dynamic population in Gravity Forms is an easy way to get pieces of data from Page A to Page B… like when you order a pizza and then it gets delivered to your house.  You didn’t make the pizza at home, but yet here it is.

Before we get into the HOW of dynamic population of data into form fields… I want to give you some examples as to WHY you might want to do this. There are thousands of industries out there but here are a few ideas for when you should use dynamic population:

  • Leasing Apartments = If your website is for an apartment building and you have descriptions of the available unit layouts, let website visitors click on a “Get More Information” link. That will send the particular unit number to the form.
  • Landscaping Service = If your website talks about the different landscaping services you offer, next to each service description include a “Get A Quote” link that sends visitors to an estimate page.
  • Staff Bio Page = If your staff have bio pages on your website and you want visitors to be able to send them information include a link like “Email Jessica Jones” next to her name that sends Jessica’s name to the contact form.
  • Custom Furniture = If you make custom furniture using different types of wood and you have a page dedicated to each type of wood you work with, include a link that says “Get An Estimate” which links to an estimate form that includes a field for “Wood Type” which is automatically populated.

I know I’ve only covered a few scenarios here, but because it’s so easy to setup dynamic data population whenever you have #1) a list of things and #2) a need to send some information to somebody via a form… you should try it on your next website.

The concept here is that rather than having to continually update your Gravity Form with each new apartment that becomes available or each new employee that you bring on board… just let those form fields be automatically populated with that information from the source data page.

If you do this you’ll have a form that never needs updating because the data is being dynamically populated from the previous page content.


Setup Dynamic Population (via URL Variables)

Just to make sure everybody is on the same page… in order to follow these steps to setup dynamic population you need to have a WordPress powered website and a copy of Gravity Forms! I know that other form plugins can handle this type of thing (and the process will be similar) but this tutorial is specifically geared toward Gravity Forms.

Step 1: Create a new form in Gravity Forms

This is the easy part!  Assuming you’ve used Gravity Forms before simply go to Forms > New Form and give your form a name. If you have no idea how to use Gravity Form, we’ve created a video course showing you exactly how it all works, visit LearnGForms.com.

Dynamic Population (URL Variable) Gravity Forms

Dynamic Population (URL Variable) Gravity Forms

Step 2: Add the contact fields

Once you are in form editing mode in Gravity Form, add the normal form fields that most contact form have.  Fields like Name, Email Address, Phone, etc… 

I recommend using the Gravity Forms fields that is for that specific type of data (so instead of using a Single Line field for a phone number, use the actual Phone form field – this will help with formatting user data).

Dynamic Population (URL Variable) Gravity Forms

Step 3: Add the form fields that you want to be dynamically populated

What form fields do you want to have dynamically populated? Which field types would best accommodate that source data? If you’re unsure, your best option is to use the Single Line form field. In my form, I’m going to use TWO fields that I want to be dynamically populated which are Apartment Unit and Agent (but you can do this with only one (or more than two!).

Dynamic Population (URL Variable) Gravity Forms

Step 4: Enable the dynamic population option

On EACH of the fields that you added above, you’ll need to activate the dynamic data population option. This is super-easy to do, just edit any form field (by clicking the down arrow), then clicking the Advanced tab and checking the “Allow field to be populated dynamically” box. Like this:

Dynamic Population (URL Variable) Gravity Forms

Once you do that, a box will display below and in this box you need to enter in a simple name for this type of data.Whatever you type in this box will be what is used in the URL variable (aka: query string). This is officially called the Parameter Name.

Make sure you SAVE your Gravity Form!

NOTE: I recommending using one word and only using lowercase letters.  For example “unit” will be a lot easier for you to work with than “Apartment Unit #” (which contains multiple uppercase letters, multiple words, special characters and spaces).  Keep things simple… it will make your life much easier.

Step 5: Create one page with the Gravity Form on it

Now that the form is done, you need to put that form on it’s own page.  You can do this just like adding any other WordPress page… go to Pages > Add New.  Once on the Add New Page screen, give the page a title and in the content box, click the Add Form button and select your form.

Dynamic Population (URL Variable) Gravity Forms

This will put the Gravity Forms shortcode on the page… make sure you save your new page!

Step 6: Create another page with the source data

Now that you have one page with the Gravity Forms shortcode on it, now add a new page with the source data on it. By “source data” I mean build out the Apartment Units for lease or the Employee Information or the Custom Furniture Wood Types, etc… this is the page that will list all the “things” that the website visitor will click on.

Add your titles, tables, buttons, photos, descriptions to this page now.

Since this is just an example, here is what my source page looks like:

SEE SOURCE DATA PAGE HERE

SEE SOURCE DATA PAGE HERE

Step 7: Link the source page items to the form page with URL variable hyperlinks

With all the source data complete, now we need to create a special link that will enable dynamic population (send the data ot the form).  To do this you’ll need to create a unique link for each item. 

Here’s how you do it:

With each item there is probably a button or a text link that says something like “Get A Quote” or “Request More Information”, etc.. right? You are going to hyperlink those with a link that looks like this… keep in mind this is just the format, you’ll want to rebuild your link with your real information! Format your hyperlinks like this:

http://siteurl.com/form-url/?your_parameter=value

Where “http://siteurl.com/form-url/” is the URL to the page that contains the form (from Step 5), then the “?your_parameter=” is the Parameter name you created in Step 4 and finally the “value” is the source data you created in Step 6 (like the Apartment Unit Number of the Employee Name).

So in my example of the Apartment Leasing site, the URL that would bring the unit data (in this example the Unit is 3B) from my source page to my more information form would be this:

https://demo.webdesignersacademy.com/lease-an-apartment/?unit=3B

NOTE: I am using a subdomain that’s why my link starts with demo.webdesignersacademy.com

The above URL is for ONE piece of data (variable) to include multiple pieces of data in that URL string put a question mark “&” and then the next one like this:

https://demo.webdesignersacademy.com/lease-an-apartment/?unit=3B&agent=Jimmy Jones

If you look at that URL, you can tell that the Unit is 3B and that the agent for this listing is Jimmy Jones.

Step 8: Test It & Build Out The Rest!

Like everything you create, do not just follow along, hit save and move on… try it out!  In a different browser, go to your source page URL, click on ALL of your links and verify that the information was passed correctly to the form! Like this:

Dynamic Population (URL Variable) Gravity Forms

Do not assume that it works, always VERIFY your work!

Once you are sure that your link works as expected, copy YOUR URL and use that as the template for all the other items on the page!

More Posts You Might Like

Get notified when we publish new posts and download a free gift right now!

Leave a Comment