Show a Gravity Form with a Click of a Button

On a recent project, I wanted to add a Gravity Form to a post/page, but hide it behind a button so that it would only show if the user clicked on the button (the form is rather long). The client needs to be able to do this on her own, so my solution for her needed to be something accessible from the post editor, and easy to implement. A google search gave me a step in the right direction, with a solution which involved loading the form using Ajax. I encountered issues with this, though, with the form not submitting properly (quite likely due to something I did wrong).

After a fair amount of grappling with the code, I was able to modify it to work with a simple bit of jQuery, no ajax required (although it is important that the form be submitted via Ajax). It works by using the default Gravity Form shortcode output, and then you just add a little bit of text to it, which may take some client training, but since the shortcode is visible in both the text and the visual editors, it should be pretty doable. So, let me show you how I did this.

Code: Filter the Shortcode

I’ve set this up within a unique file in my theme/plugin, but you can put this code into your theme’s functions.php file if you like. Just please remember, practice safe coding, back up your site and files, etc. etc.

/**
 * Helper Functions for Gravity Forms.
 * @package Leaven
 */

add_filter( 'gform_shortcode_button', 'leaven_gravity_button_shortcode', 40, 3 );
/**
 * Add the "button" action to the gravityform shortcode
 * e.g. [gravityform id="1" action="button" text="button text"]
 * @param $shortcode_string
 * @param $attributes
 * @param $content
 *
 * @return string|void
 */
function leaven_gravity_button_shortcode( $shortcode_string, $attributes, $content ) {

	if ( 'button' !== $attributes['action'] ) {
		return $shortcode_string;
	}
	$defaults = array(
		'title'        => true,
		'description'  => false,
		'id'           => 0,
		'name'         => '',
		'field_values' => '',
		'tabindex'     => 1,
		'text'         => __( 'Click to open form', 'leaven' ),
	);
	$attributes = wp_parse_args( $attributes, $defaults );

	if ( $attributes['id'] < 1 ) {
		return __( 'Missing the ID attribute.', 'leaven' );
	}

	return leaven_build_gravity_button( $attributes );
}

/**
 * Build the button/form output.
 * @param $attributes array shortcode arguments
 *
 * @return string
 */
function leaven_build_gravity_button( $attributes ) {

	$form_id = absint( $attributes['id'] );
	$text    = esc_attr( $attributes['text'] );
	$onclick = "jQuery('#gravityform_button_{$form_id}, #gravityform_container_{$form_id}').slideToggle();";

	$html  = sprintf( '<button id="gravityform_button_%1$d" class="gravity_button" onclick="%2$s">%3$s</button>', esc_attr( $form_id ), $onclick, esc_attr( $text ) );
	$html .= sprintf( '<div id="gravityform_container_%1$d" class="gravity_container" style="display:none;">', esc_attr( $form_id ) );
	$html .= gravity_form( $form_id, $attributes['title'], $attributes['description'], false, $attributes['field_values'], true, $attributes['tabindex'], false );
	$html .= '</div>';

	return $html;
}Code language: PHP (php)

What we have here are two functions: the first modifies the Gravity Forms shortcode so that it knows to create the button; the second handles the actual button and form output. Although you could do this all in one function, I chose to separate for two reasons: 1) it actually simplifies the code and makes it easier for me to understand; and 2) the first function deals with just the shortcode bits, while the second does the heavy lifting without requiring anything from me.

You May Also Like:

Create a Gravity Form for Two Users

Defining Editor Font Sizes in the Block Editor

Notes on Working with Custom Colors in the WordPress Block Editor

Remove Time from Comments in Genesis

One client for whom I’ve implemented this solution is in the process of setting up an ecommerce store, but they sell a mix of stock and custom items. The custom items cannot be sold through the store at all, because they vary so much. For those items, we’ve disabled the cart functionality, and in the single product template, we’ve added a bit to include a “Request a Quote” button, which uses the second function (here’s the code I used for that–definitely not the only way to do this, but fairly easy to implement).

This honors most of the default Gravity Form shortcodes, except for enabling Ajax–since that’s necessary for the submission to work properly, the modified shortcode always forces Ajax for the form submission.

Modify the Gravity Form Shortcode

Now that your code is in place, you just need to know how to make it work. Pretty easy. At its most basic, when you add a Gravity Form to your post/page, the shortcode looks like this:

[[gravityform id="1"]]Code language: JSON / JSON with Comments (json)

Go ahead and add your form to your post/page, and then add just two things to the shortcode: 1) an action; and 2) text for your button:

[[gravityform id="1" action="button" text="Click this button"]]Code language: JSON / JSON with Comments (json)

The action is required and must be button, or else it will just be ignored. The text is optional: the default is set back in that first function: Click to open form. This allows you to use whatever you want for the button text.

Here’s our end result:

Bonus Round: Be Kind to Those With No JavaScript

I know this is less common, but if you want to consider your users who might not have JavaScript enabled in their browser, for whatever reasons, you need to do just a bit more work. If your theme already includes code to detect whether JavaScript is enabled, follow your standard practice and style the button and form so that they’ll show no matter what.

In my theme, I have a bit of code which assigns a class of no-js to the body output initially (my code is based on this nifty plugin by Gary Jones), and then changes it to js, using JavaScript. So I can do this styling in my theme:

.no-js .gravity_button {
  display: none;
}

.no-js .gravity_container {
  display: block !important; // !important required to override inline style
}Code language: JavaScript (javascript)

If I didn’t include this, my non-JS users would see the button, but no form. This way, they don’t see the button, but they do see the form, and all is well.

So there you have it–some fairly easy to drop in code to make it a little more friendly to add a longish form to a post or page without disrupting the content around it, or having to create a new page just to hold the form. Hope you’ve found it helpful!