Making your Gravity Forms Work for You – Part One

I’ve been doing some thinking, and I’ve concluded, that one of the least well utilised functions on people’s websites are contact forms. We probably all have them on our sites, and as useful as they are I am willing to bet that most of us aren’t doing anything more than setting them up to email us some basic information. But… did you know, that they can do ever so much more than that?

In this post, and the the next, I’m going to shamelessly use my contact form as an example. First off, I’ll tell you what’s happening when you submit an inquiry via the form on my contact page. Then I’ll give you the inside track on how I made it jump through all those hoops.

What the form does.

When you arrive at the contact page you’re presented with a fairly standard looking contact form. It predictably asks for name and email and company details, and then phone and website address if you feel so inclined, and it presents a list of four possible options you may be wanting to contact me about. Then it finishes off with a message box for just in case you’re simply wanting to send a quick hello (go on, say Hi and introduce yourself, I dare ya!).

For the most part, the form behaves the way you’d expect… Three of the four radio buttons are simply form to email. As I get better organised I can think of changes for at least one of those other options but for now, let’s focus on the website project option, that’s the one that has the most functionality.

As you’d anticipate, the user completes the form with the usual details and selects the radio button that indicates they’re interested in a website project.  When they hit submit, that data gets added to the database and forwarded to me as an email, and the user then gets redirected to a second form, a proposal request.

The proposal request starts off looking similar, it needs all the same information as the contact form, but then it offers a whole lot more questions; questions to help me get an idea of the project they want to undertake.  The first thing you’ll notice that’s different is the a progress bar indicating that this page is one of four pages of form content, this may or not be off putting for people, but I’m actually quite happy to make people work a little bit if they want to work with me…  and the more information I have at this point, the better off we’ll all be when it comes time to run up quotes or proposals. So if they’re keen, they’ll fill this out! I’m not going to bore you with all the details of every question, but on page two of this form the e-commerce question that actually behaves a little differently, it’s a conditional.

If the user answers yes to that question, they get a different response from the form than if they answer no.  Actually, there are a few conditionals happening in this form, form items that display, or not, depending on answers chosen by the person adding their data. In this case, if they answer yes, they’ll be served page three of the form, which asks a series of specific e-commerce questions.

When they’ve completed this page and the following they reach the end of the form and hit ‘Submit’ and the form is submitted to me, and a copy sent to them for their records.

OK, that’s good, but hey, it’s not all that… right?

Oh, but wait, there’s more…

This form and the first one also synchronises external products that really help me with my business, and my work flow. First, when they submit data via the first form, the contact form, their information is sent directly as a new lead to my Client Relationship Manager (CRM)  – it’s software that helps me keep up with who’s been in touch with me, what kind of lead they are, and helps me plan how I keep in contact with them and helps me manage our business relationship.

Secondly, when they hit submit on the second form, their data gets sent to Asana, and a new project is created.  Asana is the project management software I use, and having the form do that work means when I log into Asana to plan my tasks and schedule for the week, half of the work is already done!  Clever, huh?

Now you know what I mean by making this  contact form work. So that’s what’s happening… and following this is how I made it work.

I’m spreading this across two posts, lest it become so long you could print it out and wallpaper with it, and in this first half I’ll take you through the details of how the form is set up.  In Part two we’ll talk about how I connect it up to the external services, Zoho CRM and Asana.

How the form does it

What I used

1. Gravity Forms – Developer License*
2. Zapier Add On for Gravity Forms
3. Zapier Account – Basic Plan
4. Zoho CRM account – Free Version
5. Asana account – Free Version
6. Two WordPress pages, one for the contact form, and one for the proposal form.

Step 1 – Set up the forms

Form One

If you’re already a Gravity Forms user, you’ll be familiar with setting up a form and their easy drag and drop interface.  I set up my form, called it Contact Form and added a couple of little cosmetic tweaks to make the published form a little neater.

Using classes to align form fields

By default Gravity Forms inserts all your form fields one above the other … but to achieve the inline setup you can see above where the email and company, and website and phone fields are side by side, we’ve used a couple of the inbuilt gravity forms styles to make them align.  To achieve the same for yourself, open the editor for the field in question, hit the advanced tab and add the relevant css class in the CSS Class Name field… gf_left_half for the form field to sit on the left and gf_right_half to align to the right.

Form Two

This is the really long and convoluted one, and the significant differences on this are things like the paging.  To set that up, drag across the page break form field from the Standard Fields into your form, complete the relevant fields including the labels for your Next and Previous buttons.

The conditional I mentioned earlier, to show or hide the e-commerce form fields is actually on one of these page break items.  It means I can hide the whole page as necessary. In this case I have two conditionals on the page… One, to show the content if the user selects Yes for the E-Commerce question, and two, to hide it if their query is about small tweaks and maintenance.

There are quite a few other conditionals throughout the form, mostly to reduce some of the amount of form fields shown if the user doesn’t want a full site design/development.

Step Two – Set up the Confirmations – passing data from one form to another

The confirmation on the 2nd form is easy, it’s a straightforward default text type confirmation that simply advises the user that I’ll be in contact with them in due course.

The confirmation on the first form is the tricker one, it’s the one in which we pass the data from the first form, to the second.  To make that happen, we first have to set up fields on the second form that we want to pre-populate – in my form we’re pre-populating the Name, Email, Phone, Website and Company fields.  So we have to edit the second form and set those fields up.

First in the advanced tab of the relevant fields, we select the check box that says ‘Allow field to be populated dynamically’ then we assign a parameter to each of the fields.  You could make these parameters whatever you want, I tend towards making them semantically useful… For this form, these are the parameters I’m using

First Name: first_name
Last Name: last_name
Email: email
Phone: phone
Website: website
Company: company

 Once that’s done, we have to set up the confirmation/redirect on the first form and tell it to send the duplicate data to those waiting form fields in the second form.  You can see in the image below we have two confirmations on this form, they’re conditional as well. The default one is there as the redirect only happens if the user has completed the website field indicating they’re wanting to undertake a website project.

 

Set up the redirect by choosing the redirect radio button and completing the Redirect URL with the address of the second form’s page.

Then set up the query string to pass the data from this form to the second one. These parameters will be passed at the end of the redirect url and will complete each of the relevant form fields we set up earlier.

We set the parameters up with the merge fields that will add in the values submitted by the user.  So, enter your parameter, follow it with an = symbol, and then the merge field from your form (merge tags will be available from that little button to the right of the text area ).

To add one after another, add an ampersand (&) after each one to join them up. Here’s what mine looks like

first_name={fname (First):7.3}&last_name={fname (Last):7.6}&email={Email:2}&company={Company:8}&website={Website:4}&phone={Phone:3}.

Having done that, whenever you insert data into the contact page form it will be passed with the redirect and inserted into the form fields on form two.

Now, I should point out at this juncture that if you are passing data like this you may well want to consider having an SSL certificate and passing that data via a secure (https://) connection (which is what happens on my site) rather than on an unsecured connection (which is the default).

If you want more information about this dynamic field population, here’s a link to the Gravity Forms Documentation.

---

Conclusion

Contact forms are an incredibly useful tool not only for gathering information and leads to help you build your business but also for qualifying those leads and sharing that information with tools that can help manage your tasks and client relationships. Gravity Forms is incredibly powerful, and with a little bit of planning, some awfully useful external tools, and some time invested to create your forms you can use them for way much more than information gathering.

What do you think? Are you using your forms for more than just collecting data? If yes, how

*Affiliate Link