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.

Multi-Page form question

  1. idealists
    Member

    Hi

    I have used the hack for jQuery form hack for multi page forms that was posted on here much earlier (http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx). It split a regular form with javascript into a multi page form. I was fairly happy with the way that worked, except for it being a "hack".

    I was very happy to see multi page integration into the latest version of gravityforms. I have yet to get it installed as my development PC is being repaired.

    A few questions I have.

    1)
    I played with the example multi-page form (http://www.rocketgenius.com/gravity-forms-1-5-multi-page-form-preview/). It seems that after each page "Continue to Next Page" that it does some processing (back to the server) before proceeding to the next page.
    I was hoping for a solution that held off from doing all server-side processing until it got past the final step "Submit this application" (illusion of being faster experience for the user). This would be similar to the jQuery hack I mention above.
    Is this possible with the inbuilt solution?

    2)
    Can we change the wording of the buttons? "Continue to Next Page" to "Next >" etc

    3)
    Can we change the style of the process bar? I really liked the way the hack did it:
    http://www.jankoatwarpspeed.com/examples/webform_to_wizard/ (click the link "Click here to turn this webform into a wizrd.")
    Step 1Account information
    Step 2Company information
    Step 3Billing information
    Also at the top of each "page", it indicates what Step you are up to, in big letters.

    I hope these are all possible as I would really love to move away from the hack.

    Many thanks! great work.

    Posted 13 years ago on Thursday January 20, 2011 | Permalink
  2. idealists
    Member

    Oh, and one more question:

    4) Can this new integration for multipage forms work along with Google analytics, so when you traverse from page to page in a multi-page form, so that it records the page view in Google analytics.

    The URL in the hack version I mentioned in the previous post had a static URL no matter what step you were in, which meant you couldn't do goal/funnels in Analytics properly. However, I was able to add some javascript code to that hack which triggered pageviews being recorded in Analytics. Eg:
    function selectStep(i) {
    var funnel_url="/applications/loan-form?step="+(i+1);
    _gaq.push(['_trackPageview',funnel_url]);
    }

    Hope that makes sense.

    Posted 13 years ago on Thursday January 20, 2011 | Permalink
  3. 1) There is an ajax option; however, I'm not sure that you will ever get it quite as instant as the single form, jquery option you shared. Each page has to be processed as it is submitted in order to handle validation in a simple and smooth fashion, to provide for conditional page logic, and some other features as well.

    2) Yes, you can update the text for the next/prev buttons: http://grab.by/8ueo

    3) Yes, you can style it similarly: http://grab.by/8ufy

    4) There is a javascript hook that you can use when a new page is loaded which you could use to tie in this same GA code.

    Posted 13 years ago on Thursday January 20, 2011 | Permalink
  4. idealists
    Member

    Thanks David for taking your time to answer my questions. Can you point me in the direction of that hook that you refer too?

    Also when do you expect the stable release for 1.5 to be released APPROX? Next few days, next few weeks, next few months :)

    Posted 13 years ago on Saturday January 22, 2011 | Permalink
  5. Hi Idealist, the javascript hooks is gform_page_loaded and here is an example of it used to refresh Cufon fonts:

    <script type="text/javascript">
        jQuery(document).ready(function(){
    
            jQuery(document).bind('gform_page_loaded', function(){
                Cufon.refresh('h1,h2,h3,h4,h5,h6');
            });
    
        })
    </script>

    In regards to the expected release of 1.5, we're busy wrapping up the last details of the plugin so it will be coming soon. Can't put a time frame on soon, but soon. :)

    Posted 13 years ago on Saturday January 22, 2011 | Permalink
  6. idealists
    Member

    Thanks for your reply,

    With that jQuery Hook is there any way of knowing what page (step) number in the multi-page form you are in? This is required for the funnel URLs.
    Eg, like what I had with the jQuery hack:

    var funnel_url="/applications/loan-form?step="+(i+1);
    _gaq.push(['_trackPageview',funnel_url]);

    Many thanks again!!

    Posted 13 years ago on Sunday January 23, 2011 | Permalink
  7. Hi Idealist,

    I had actually intended to provide you this snippet as well which shows you the parameters available to this hook and how to retrieve them:

    <script type="text/javascript">
    
    jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
        // code to be trigger when next/previous page is loaded
    });
    
    </script>
    Posted 13 years ago on Sunday January 23, 2011 | Permalink
  8. johnmce
    Member

    Hi guys I'm trying to get Analytics setup on multi-page forms as described by idealists.

    Can anyone share the exact code I need to use and where I need to put it? (assuming its roughly that simple!)

    Thanks:-)

    John

    Posted 13 years ago on Wednesday March 23, 2011 | Permalink
  9. joshuakons
    Member

    I am trying to insert this snippet of code to prevent AJAX from breaking my Cufon fonts when I use multi-form pages. I have tried everything, but cannot figure out where to insert this code or how to make it function. I have inserted it directly in header.php in several locations to no avail. Can someone help me with this? The code I am trying to insert is below:

    <script type="text/javascript">
    2 jQuery(document).ready(function(){
    3
    4 jQuery(document).bind('gform_page_loaded', function(){
    5 Cufon.refresh('h1,h2,h3,h4,h5,h6');
    6 });
    7
    8 })
    9 </script>

    Posted 12 years ago on Sunday January 29, 2012 | Permalink