Rock Your WordPress Forms With Gravity Forms Conditional Logic

Rock Your WordPress Forms With Gravity Forms Conditional Logic

Creating a contact form in WordPress can be a daunting proposition. But once you get into it, the form usually comes together OK – as long as it’s a simple form.

Unfortunately, many forms turn out to be complicated, messy, and boring. Wouldn’t it be great if you could create a form that’s super clean, and that shows only what’s necessary for each particular user? And how cool would it be if you could wow your visitors with a dynamic effect, as different parts of the form appear, disappear, and reappear as they select various options?

With Gravity Forms conditional logic you can do all that – and more. Conditional logic isn’t exactly simple, but Gravity Forms makes it easy.

One of the problems is that a form with lots of varying choices can quickly expand, and the form becomes messy, crowded, and unwieldy. Overcrowded forms turn people off, and sometimes site visitors will just give up and go away after a quick glance. That’s exactly what you don’t want.

Even though the phrase “conditional logic” reeks of “advanced mathematics,” all it really means (in this case) is a way to set up an interactive form so that when a user clicks something on your form, some other thing changes on the form. The user might click a checkbox and, as if by magic, a previously hidden form field might appear. And at the same time, some other unnecessary form fields might disappear.

Let’s look at how you can easily set up your forms with conditional logic on your website.

Conditional logic is cool.
Conditional logic is cool.

Magic? No. It’s Conditional Logic

Form ready to be worked on.
Form ready to be worked on.

I’ll assume that you already know how to set up a static form with Gravity Forms, so now I’ll show you exactly how to get conditional logic working for you.

Let’s say you’re setting up an online application form people can fill out to join your PC Club – something very similar to the example form we’ll work on in the upcoming paragraphs.

At the top of the form, applicants have to fill in the usual information, such as name, address, e-mail address, etc. Simple. But things get complicated in the payment area near the bottom of the form, as you start creating form fields with lots of checkboxes and options.

As you can see in the graphic to the right, there’s a heading, a checkbox, a pop-up, and an explanatory line of text for those who want to pay now – and below that, there’s a section for those who want to pay later. There are several lines of text, checkboxes, pop-ups, etc. in this section, and all these various type weights, pop-ups, etc. look messy, and can be confusing to the user.

If you think this isn’t a big deal, consider that the applicant has already filled in several text boxes before arriving at this point in the form, and in some forms, there might be even more areas coming up, with lots of choices before finishing the form. You don’t want user fatigue, and you want a clean-looking form, so it would be great if you could clean up this area.

That’s what we’re going to do.

Getting Into Condition(al)

First, it’s too bad you can’t hide that messy pop-up menu and the explanatory text in the “PAY NOW” area until they’re actually needed. But wait. You can do that – with Gravity Forms conditional logic. Here’s how:

Pop-up menu.
Showing the pop-up area to be hidden.
  1. In the “Form Editor,” move your mouse over the field named “PC CLUB MEMBERSHIP,” which contains the membership-choice pop-up and the explanatory text for those who want to pay now. This is the field you want to become invisible and stay invisible until after the user checks the box under “PAY NOW.”
  2. As you move your cursor over the field, you’ll notice that the field becomes highlighted. Click the flippy triangle (highlighted in yellow in the graphic above) to expand the field so you can choose options that will apply to that field.
  3. Skip the “Properties” tab, and click into the “Advanced” tab.

    Inside the Advanced tab.
    Inside the Advanced tab.
  4. Near the bottom of the tab area, click the “Enable Conditional Logic” option – and then new options will appear where you can choose exactly what you want to happen, as you can see in the graphic above. Remember that you want to keep this field hidden, and only show it when an applicant chooses the “I’ll pay now with credit card” option under “PAY NOW.” The two lines directly under the “Enable Conditional Logic” checkbox contain pop-ups that let you choose options to “fill in the blanks” in these two lines.
  5. In the first line, press and hold the first pop-up, and choose “Show” from the options that appear.
  6. Then press and hold the second pop-up, and choose “All” from the options that appear. The result is a conditional statement that reads, “Show this field if All of the following match.”
  7. In the second line, choose options from the pop-ups until you get a conditional statement that reads, “PAY NOW is I’ll pay now with credit card.” Translated into more conversational English, this tells the form to initially not show this area of the form, but then show it when the user clicks the “I’ll pay now with credit card” checkbox under “PAY NOW.”
  8. When you’re finished, click the flippy triangle to close the field.
  9. Of course, at some point you’ll have to click the “Update Form” button, and then click the “Preview” button in order to view the form preview to see a close approximation of what the form will look like once you install it onto a page or a post.
Form after first round of conditional logic.
Our form after the first round of conditional logic.

SPECIAL USER TIP: If you want to see what your form is really going to look like as you’re making adjustments – to get a better view than the preview – install the form onto a page or post, and then open it in a separate browser window. Keep that window open off to the side, and then every time you update the form, just refresh the page in that open window, and you will see the changes you made as they will actually look in your finished project.

I’ve used a yellow keyline in the graphic above to show you that the form is a bit cleaner, because now when the form first appears on the page, the pop-up and the explanatory line are no longer visible in the “PAY NOW” area. And those two elements will only become visible if the user checks the box in the “PAY NOW” area.

Nice But…

…You can do better.

The form is still crowded, and there’s still the possibility of confusion for the user because all the choices and explanatory text are still visible in the “PAY LATER WITH CHECK” area.

It’s distracting, but it won’t be a problem for much longer.

Conditional logic settings.
Conditional logic settings.

You want everything between the “PAY NOW” area and the “SUBMIT” button to disappear when a user chooses to pay with credit card in the “PAY NOW WITH CHECK” area. Here’s how to make that happen:

  1. In the “Form Editor,” move your cursor over the “PAY LATER WITH CHECK” form field, click the flippy triangle to expand the field.
  2. Get into the “Advanced” tab.
  3. As before, check to enable conditional logic.
  4. Set the conditional options as shown in the graphic above. Be sure you choose Hide this time, because you want to hide this field until it’s needed.
  5. Close the form field when you’re finished.
  6. Update the form, and view the preview or the actual page (as described above) to check your work.

You have now set the conditional logic so that this area of the form will be visible until the user checks the box in the “PAY NOW” area – at which time this area will disappear.

Do it Some More

Final form area.
The final form area.

Now do the same thing with the other form fields that you want to hide: Open the fields, choose the conditional logic option, set the conditional options, close, update, and view to check your work.

As you can see above, the user has clicked the “PAY NOW” option, and conditional logic has done its thing. Not only has it brought the membership-choice option into view, but it has caused all the now-superfluous “PAY LATER WITH CHECK” stuff to disappear. All the unnecessary distractions are gone.

But what if the user suddenly decides to not pay now, and wants to pay later, by check? No problem. Soon as the user deselects the credit-card option, all the “PAY LATER WITH CHECK” information reappears.

See for Yourself

Play the video below to see the magic for yourself. Areas of the form will disappear and reappear depending on what the user clicks.

We’ve only scratched the surface of conditional logic, but now that you understand how it works, it’s a sure thing you’ll think of lots more ways to use it.

Gravity Forms is a premium plugin, which means you have to buy it. It’s available under three different licenses, depending on how many sites you want to use it with. Gravity Forms offers great support for their product, they have lots of add-ons to extend the basic plugin, and their documentation is well above average. Check out their site to find out more.

We often over use “Cool!” when describing things we are think are, well, cool. But, really, when you try it for yourself, and see how Gravity Forms conditional logic can transform your own forms, you won’t be overdoing it one bit if you exclaim, “How cool is that?!”

Do you use conditional logic on the forms for your website? Let us know in the comments below.