PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Confirmation text fade or slide?

  1. Hi,

    Im using the confirmation text on my contact form and after the user submits it does some kind of refresh or something and it displays the confirmation text, at the moment I seems to snappy, can this be done a little more gracefully? like fading out the form and fading in the confirmation text or after submission slide in the confirmation text?

    Thank you!

    Posted 12 years ago on Tuesday September 11, 2012 | Permalink
  2. Can you post a link to your site please so we can see this in action?

    Posted 12 years ago on Wednesday September 12, 2012 | Permalink
  3. http://www.onyxsolution.com

    Thank you!

    Posted 12 years ago on Wednesday September 12, 2012 | Permalink
  4. Sure. You can use the jQuery slow method, or any other jQuery effect you like. There are a couple parts to the solution.

    1. Hide the .gform_confirmation_message by using display:none; in your theme's stylesheet. This is the code for form 3 in my installation:

    [css]
    div.gform_confirmation_message_3 {
        display:none;
    }

    2. We're going to use the gform_confirmation_loaded hook, so be sure you enabled AJAX when you embedded the form. Add this to your existing shortcode if you are not currently using AJAX:

    [php]
    ajax="true"

    3. Create a script called slow-confirmation.js and save it in the js folder of your child theme. Put this into that script (be sure to hover over this code block and click the <> "view source" to see the full code):

    [js]
    jQuery(document).bind('gform_confirmation_loaded', function(){
        jQuery('#gforms_confirmation_message').slideDown('slow');
    });

    4. Add this to your theme's functions.php to enqueue the script which you named slow-confirmation.js and saved in the js folder of your child theme. If you placed the script elsewhere or named it something else, adjust these values. Change the "3" here to your form ID.

    [php]
    add_action('gform_enqueue_scripts_3', 'enqueue_slow_slide', 10, 2);
    function enqueue_slow_slide($form, $is_ajax) {
        // enqueue the slow slide script which is bound to the gform_confirmation_loaded event.  Located in the child theme /js/ subdirectory. Depends on jQuery
        wp_enqueue_script('slow-confirmation', get_stylesheet_directory_uri() . '/js/slow-confirmation.js', array('jquery'));
    }

    Example: http://gravity.chrishajer.com/country-of-origin/

    Posted 12 years ago on Thursday September 13, 2012 | Permalink
  5. Thank you Chris!

    is there any way to stop it from moving to the top of the page? when you submit it shows the loading circle spinning next to the submit and then it snaps to the top of the page and then slides down the confirmation text.

    If I could stop it from snapping to the top of the page it will be perfect!

    Thank you!

    Posted 12 years ago on Thursday September 13, 2012 | Permalink
  6. I think you want to use the gform_confirmation_anchor to take control of that:
    http://www.gravityhelp.com/documentation/page/Gform_confirmation_anchor

    Posted 12 years ago on Thursday September 13, 2012 | Permalink