Today I was putting a Gravity Form in the footer of a site with long pages, hiding the form by default, and displaying it when a user clicks the contact link using a little jQuery. Since Gravity Forms shows validation and ( optionally ) confirmation messages on the form itself, this presented a problem when the form is submitted, and the page reloads, hiding the form again.

Creating the Hidden Form using jQuery

In my footer template file, there is a div to wrap all the elements, one for the form itself, and a link to click and display the form. Note the use of do_shortcode function to show the form.

First, we need to print the html. Mine is in the footer.php template of the theme.

<div class="contact">
<div class="contact_form">
<?php echo do_shortcode( '[gravityform id="1" title="true" description="false"]' ); ?>	
</div>
<a class="contact_link" href="javascript:void(null);" title="Contact Support">Contact Support</a>
</div>

The form starts hidden, using a little css in the theme stylesheet:

.contact_form {
  display: none;
}

We also need some javascript. In case you don’t already have a file loading for your theme, here’s how to do it, and make sure jquery is loaded for you.

# Use the wp_enqueue_scripts hook to enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue', 99999);

# Callback function
function mytheme_enqueue()
{

	wp_enqueue_script( 'mytheme', get_stylesheet_directory_uri() . '/javascripts/theme.js', array( 'jquery' ), '', 'footer' );

}

In the theme’s javascript file we just included, we have a click event on the link, which both toggles the form div, and scrolls the page to the bottom, since it is in the footer.

jQuery(document).ready(function() {

	$( '.contact_link' ).click( function() {

		$( '.contact_form' ).toggle( 'slow' );

		$('html, body').animate({scrollTop:$(document).height()}, 'slow');

	});

});

Showing Validation Errors

Now that we have our nifty hidden form that toggles open when the user clicks the contact link, lets make sure they see the confirmation and validation errors.

In our theme functions file, we will check to see if the form has been submitted using the superglobal $_POST array, which will contain the data from the form submission. The variable for your form, will be is_submit_1, the ‘1’ being the id of the gravity form.

We simply check to see if that variable is set, and print some javascript in the footer if so. For just a couple of lines of scripting, that only shows when the form is submitted, I think embedding it is the best choice, but you can also put it in an external script to enqueue as well.

# Was this form submitted?
if ( isset( $_POST[ 'is_submit_1' ] ) ) :

# Print our javascript in the footer.
add_action( 'wp_footer', function()
{ ?>
<script>
jQuery(document).ready(function() {
	$( '.contact_form' ).toggle( 0 );
	$('html, body').animate({scrollTop:$(document).height()}, 0);
});
</script>
<?php }, 99999);

endif;

The script is identical to what we used to show the form on the click event, aside from the easing parameter. We don’t want to make people dizzy by scrolling all the way down the page. Change the easing parameter on both functions to 0.

This post is specific to Gravity Forms, but you can use the same techniques for any form.