Getting better control of Gravity Forms

Gravity Forms is without doubt one of the best form plugins out there. I chose this to be my go-to form creator for a few reasons. The pricing is very clear, unlimited installs, you get access to loads of Add Ons and everything is well documented.

It’s is incredibly powerful with it’s drag and drop interface, Add-Ons and API. Even though it doesn’t have all of it’s customizations enabled through the UI – we can use filters, actions and a few more clever tricks. Luckily, we have everything well documented.

I’ve hand picked a few hooks that I use on most of my projects. Here we go!

Add a custom submit button.

This adds the Bootstrap button class. But you can change it to whatever you like.

One caveat is that, for example, the conditional hide/show submit button stops working. I’ve never used this, so it’s not a big deal for me.

// Add Bootstrap btn class to Gravity Forms submit button
add_filter( 'gform_submit_button', function ( $button, $form ) {
    return "<button class='btn btn-primary'><span>{$form['button']['text']}</span></button>";
}, 10, 2 );

Hide Gravity Form labels. Don’t just empty them.

Sure, you can just remove the content in the labels input. But the label is still there and causes layout issues.

This enables an option under Appearance which completely removes the label.

// Enable option to hide labels in Gravity Forms
add_filter( 'gform_enable_field_label_visibility_settings', '__return_true' );

Check if a given form exists. Form, are you there?

Need to use the forms title instead of the id? Easy. Just replace $form->id with $form->title.
Don’t forget to change the $id variable to $form.

 * Check if Gravity form exists
 * @param  [type] $id [description]
 * @return [type]     [description]
function rn_gravity_form_exists( $id ) {
  $forms = GFFormsModel::get_forms();
  foreach ($forms as $form){
    if ($form->id == $id) {
      return true;

  return false;

Populate ACF field with Gravity forms.

Gravity Forms is a very popular plugin and so is Advanced Custom Fields. This piece of code gets all active forms and populates them to a select, checkbox or radio field in ACF.

Just rename the FIELD_NAME_HERE and create the field in ACF with the same name. Magic!

 * Populate ACF field with Gravity forms.
 * @link
 * @link
add_filter('acf/load_field/name=FIELD_NAME_HERE', function($field) {
    // Reset choices
    $field['choices'] = array();

    // Get all active Gravity forms
    $forms = \GFFormsModel::get_forms();

    if( is_array($forms) ) {
        foreach ($forms as $form) {
            $field['choices'][ $form->id ] = $form->title;

    // Return the field
    return $field;

Move init scripts to footer.

This filter moves the various form scripts to the footer. It’s useful when you’re loading jQuery in the footer. Roots Sage, for one, does this by default.

 * Move Gravity Forms init scripts to the footer.
add_filter('gform_init_scripts_footer', function() {
    return true;

And here’s the error message in console you’ll get if you’re loading jQuery in footer.

Uncaught ReferenceError: jQuery is not defined

Remove default styling.

 * Remove Gravity Forms deafult styling
add_action('wp_print_styles', function () {
    wp_dequeue_style( 'gforms_reset_css' );
    wp_dequeue_style( 'gforms_datepicker_css' );
    wp_dequeue_style( 'gforms_formsmain_css' );
    wp_dequeue_style( 'gforms_ready_class_css' );
    wp_dequeue_style( 'gforms_browsers_css' );

Populate fields using Query String.

This is super useful when sending users from a different application to your website.

Go to the Advanced tab in your field and add a parameter.

Then visit the page where your form lives and append the query string. In my example, it would look something like this:

Create form layout grids using CSS classes.

There is no interface for creating grids within Gravity Forms. But that doesn’t mean it’s possible! Gravity Forms actually ships with CSS classes to create grids.

To create a two column form, add the class gf_left_half to the first field and gf_right_half to the second. These should be placed in the Custom CSS Class field under Appearance.
Looking good, right?! 😁

I will let this following screenshot explain the rest of the available classes. 

Don’t hesitate to comment below if you have any questions!

And here’s the official documentation for CSS Ready Classes.