Gravity Forms Tips and Tricks Part 1

March 28, 2016 WordPress Plugins

If you’re a WordPress website developer, or have a WordPress site, Gravity Forms is a must-have plugin. I’ve personally been using it for several years now and don’t know what I’d do without it. Gravity Forms is a very diverse yet easy to use form creation plugin which requires zero programming skills and also integrates with several of your favorite third party services such as PayPal, MailChimp, Dropbox, GetResponse, etc. You can easily create polls, order forms, newsletter signups, coupon codes when using it to sell products and so much more.

Gravity Forms is very user friendly but in this article I’m going to share a few tips and tricks that I’ve learned along the way for quickly and better customizing your forms.

How To Make A Transparent Really Simple CAPTCHA Background

Nobody enjoys receiving spam emails, at least nobody I’ve ever known. Really Simple CAPTCHA is a popular plugin that helps reduce spam via forms on your WordPress website. It also integrates and works well with Gravity Forms.

In most cases, websites are often designed in a way that having a transparent Really Simple CAPTCHA background is not necessary because you can simply select the color that matches the background of the webpage you’re using it on. However, there are some instances where you may want to have a transparent background for the purpose of visual aesthetics.

To achieve this, simply open the “wp-content/plugins/really-simple-captcha/really-simple-captcha.php” file and look for the following lines of code:

Add the following two lines of code and update it to look like this instead:

Voila, you now have a transparent Really Simple CAPTCHA background.

How To Make Transparent Fields With Gravity Forms

Creating transparent fields is quick and easy. First, you’ll want to create a new CSS class. In this case I simply used “gf_custom_contact”, you can call it whatever you like. To add your CSS class go to “Forms > Form Settings > CSS Class Name” and enter the class you’d like to use. See screenshot example below.

Gravity Forms custom CSS class

Then add the following CSS code to your theme.

Below is a screenshot example of a form I created using Gravity Forms that has both transparent input fields as well a transparent Really Simple CAPTCHA background:

Gravity Forms transparent fields and really simple captcha background

Below is the complete custom CSS code I used to generate the above form example:

How to Align Fields Horizontally In Gravity Forms

By default, when you add a single line text field in Gravity Forms it displays on it’s own row. See below example.

BEFORE:

Gravity Forms default before using gf_left_half and gf_right_half

But what if you want two fields, such as “Email Address” and “Phone Number” for example to display side by side? Well fortunately it’s simple enough, and here’s how you accomplish this. Simply add a field and click on the “Appearance” tab. Then, in the “Custom CSS Class” section add “gf_left_half” to the field you want to display on the left and “gf_right_half” to the field you want displayed on the right. Note, these classes are already pre-built into the Gravity Forms plugin so you don’t need to add any custom CSS.

Below is a screenshot showing where to add a custom CSS class to a field.

How to add a custom CSS class to a field in Gravity Forms

Once you apply these classes to your fields, here’s how it will look.

AFTER:

Gravity Forms displaying fields side by side

How to Hide Field Labels In Gravity Forms

By default, there is no option to show or hide field labels in Gravity Forms. Low and behold though, there is a quick and easy workaround for this. If you’re not sure what a field label is, it’s the text that displays above (or beside) the form field such as “Name”, “Email”, “Phone”, etc.

Form field label example

Sometimes you may require field labels to be hidden. An example being, perhaps you have a horizontal newsletter signup bar on your website where having field labels would mess up the design and layout of your form.

newsletter subscription form without field labels

To add a “Field Label Visibility” option for Gravity Forms fields, simply add the following line of code in the functions.php file associated with your WordPress theme. For example: “wp-content/themes/yourthemename/functions.php”.

That’s it, you now have a “Field Label Visibility” option when editing the appearance of a form field. That wasn’t too painful now was it?

Gravity Forms field label visibility option

Conclusion

Of course there are numerous other Gravity Forms tips and tricks but these are just a few to help you get started. I’ll be expanding on this topic with more helpful tutorials in later articles, so stay tuned!

Darryl Burma

Darryl Burma

Founder / Digital Media Specialist at Triumphant Flame Studios
Providing effective digital media solutions that are strategically designed to help you grow your business and gain more customers.
Darryl Burma
Darryl Burma

Latest posts by Darryl Burma (see all)

Pin It on Pinterest