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 questions

  1. If I select Text for the form submission confirmation, the text message is appended to the bottom of the page the form was submitted from. On a long page, that's hard to spot, especially since it looks like the page just reloads and you're at the top of the browser window (scrollbar at the top, confirmation message at the bottom.) Is there a way to get that message at the top, or scroll the browser window to the bottom so someone will actually see the message? Or is it better to redirect to a confirmation page to have that level of control?

    Also, if the form is inserted into a page, it looks like on reloading the page content is still there (which is what's causing the problem described above) but the form fields are gone. Is that accurate? I mention that because it seems like I created a form once that on reload the only thing that was visible was the confirmation message. But thinking back, I think that's because only the form was in the page, no additional content. In this new page, the form is inserted at the end, so when it's submitted and the confirmation message is displayed, it's at the bottom of all the other content on the page.

    Thanks for your thoughts.

    Posted 9 years ago on Friday October 23, 2009 | Permalink
  2. Yea this is by design, the confirmation text is going to appear where the form was. No way around that as that is where the form is displayed. You would have to use the page redirect and redirect to a custom page in order to have more control over it.

    Posted 9 years ago on Friday October 23, 2009 | Permalink
  3. 10-4, thanks.

    A lot of the AJAX confirmations are like that in WordPress forms plugins (I am thinking of CForms II, I think.) Oh well. I will use a page. Thanks.

    Posted 9 years ago on Friday October 23, 2009 | Permalink
  4. Actually, you can do something very similar with a little CSS tweaking and a simple jQuery function.

    To keep things really simple for this test, I created a new page template for this particular form and just included an inline style block and snippet of jQuery.

    If you wanted to style all of your form confirmations the same way, you could add the styles to your theme style sheets and the jQuery snippet to your header.

    Here's what I added inline

    <!-- new styles for the standard inline confirmation -->
    <style>
    #gforms_confirmation_message {
    	width:500px;
    	position:absolute;
    	top:0;
    	left:0;
    	z-index:5000;
    	background-color:#A4FA7F;
    	border:10px solid #82c466;
    	color:#4f763e;
    	font-size:28px;
    	line-height:110%;
    	padding:20px 10px;
    	text-align:center;
    }
    </style>
    
    <!-- call the jQuery library if not already loaded in theme -->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <!-- the function to fade the confirmation text -->
    <script type="text/javascript">
      $(document).ready(function(){
       setTimeout(function(){
      $("#gforms_confirmation_message").fadeOut("slow", function () {
      $("#gforms_confirmation_message").remove();
          });
    
    }, 3000);
     });
    </script>

    I called the "jquery.min.js" file in since it wasn't already being used in this test theme. Of course, you'll want to make sure you're calling the jQuery library somewhere in the code before the snippet so it all works.

    The last value (3000) in the function is the time delay in milliseconds before the fade effect occurs. You can adjust that value to suit your preference.

    I put together a quick test that you can see here. The video doesn't really capture the slow fade effect well, but you'll get the idea.

    Demo Video

    That's pretty much it - nothing too fancy. Here's the basic page template markup so you can see it all together.

    Posted 9 years ago on Friday October 23, 2009 | Permalink
  5. Any way to prevent the form to disappear after submission? Just clear the text?

    Posted 7 years ago on Wednesday December 7, 2011 | Permalink
  6. sascha
    Member

    Hi Kevin,

    pasted your code into the template file and the confirmation box comes up in a different style, but it does not fade out. Somehow the jquery does not fire.... I tried removing the loading of the jquery library, but that did not help either. Any ideas?
    I also tried your other page template from another post, which does the page redirect and uses a passed query string. With that template I just get redirected, it does not show any confirmation message.

    Posted 7 years ago on Wednesday January 18, 2012 | Permalink
  7. I'm having the same problem that sascha mentioned. Seems like a great solution if it can be made to work--am looking forward to any ideas people might have for solving that problem. If I happen to figure it out first I'll post back here. Thanks!

    Posted 7 years ago on Thursday February 16, 2012 | Permalink
  8. I would like to do the same thing as Alex, just have the confirmation message pop up without actually removing the form, just clear the data from the fields after submission and leave a fresh form in it's place.

    Seems like there hasn't been any activity on this thread for over a year; did anyone get this working?

    To be honest, I'd be happy with the confirmation message just appearing at the bottom of the form (without removing the form itself). It seems from reading other threads, that previous version of Gravity Forms used to behave like this? It'd be good to get this behavior back again...

    Posted 5 years ago on Monday May 20, 2013 | Permalink