Question

I’m looking for a way to have one Gravity Form on a page, but break it up into sections, then show/hide sections with jQuery. I’m happy with the showing and hiding of sections, but I need help with the following:

How can I place some reference-able element around a group of Gravity form fields so that I can target them to show/hide in blocks.

The built in ‘pages’ feature actually reloads the WordPress page to show the second set of fields. I my designer has insisted that this form be smooth, one-page, fadey and tarty looking.

Cheers,
Ben

Answer 1

You can target the li’s Gravity Forms creates using jQuery and hide them. Then on click of the button you can show them again. There’s no animation with this, it’s just hide/show. You could add some animation like fade in if you wanted to.

Obviously you’ll need to change the #field_1_1 and #field_1_2 to match the ID on the li’s you want to hide/show as well as the ID of the click function. You can put as many in there as you want, just comma separate them.

This is a quick and easy fix for you. Let me know if this works.

<script type="text/javascript">
    jQuery(document).ready(function() {

        jQuery('#field_1_1, #field_1_2').hide();

        jQuery('#idOfClickElement').click(function() {
            jQuery('#field_1_1, #field_1_2').show();
        });

    });
</script>

I’m sure you know where to put this code in your theme files, but if not, include it right before the closing </head> tag in header.php or right before the closing </body> tag in footer.php.