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.

wizard plugin for gravity forms

  1. I just ran into this tutorial on how to convert any form into a wizard form. Wouldn't this be a cool feature for gravity forms as an optional output of the form??

    Posted 9 years ago on Tuesday September 29, 2009 | Permalink
  2. promedia

    That looks pretty cool.

    Posted 9 years ago on Wednesday September 30, 2009 | Permalink
  3. hhhkaraca

    It will be great if they add this future.

    Posted 9 years ago on Friday December 4, 2009 | Permalink
  4. anointed

    +1 on wanting wizard forms.

    Posted 9 years ago on Wednesday December 9, 2009 | Permalink
  5. We have looked into this and it is something we plan on adding in the future. We will first need to implement Fieldset capabilities and then this wizard plugin would be usable.

    Posted 9 years ago on Wednesday December 9, 2009 | Permalink
  6. net_mage

    +1 on this option

    Posted 9 years ago on Friday December 11, 2009 | Permalink
  7. Carl, do you have a timetable for when Fieldset capabilities will be implemented?

    Posted 9 years ago on Monday June 7, 2010 | Permalink
  8. For those interested, I've got a bit of jQuery that will break the form down into sections/fieldsets which theoretically would make it usable with the wizard plugin mentioned earlier in this post.

    In order for the script to work you'll need to:

    • have jQuery included on your page
    • add a section break for every section (anything not included in a specific section will be added to the last section)
    • wrap your form shortcode like so:
      <div class="add-gf-sections">[form shortcode]</div>

    The script checks if the form is inside the 'add-gf-sections' div, and if so, adds everything into sections based on fieldsets. There are some known limitations that weren't an issue for me but might be for you:

    • this does not play nice with recaptcha
    • everything must be in a section; everything not in a specific section will either be appended into the last section of the form or the section above its location in the form

    Hope the helps.

    Posted 9 years ago on Tuesday June 8, 2010 | Permalink
  9. If you don't want to use the section breaks you can always use the jQuery .slice() method..

    Posted 9 years ago on Wednesday June 9, 2010 | Permalink
  10. I would love to try and implement this onto a site I am working on but I'm a little unclear of exactly how I need to do it. I understand what is required to get it to work but not clear how I get jquery on my page?? I'm a little bit of a newbie when it comes to these kinds of customizations so any step by step of how to accomplish this multiple page form based on sections would be greatly appreciated. Thanks!

    Posted 9 years ago on Friday June 18, 2010 | Permalink
  11. You need to make sure the jQuery library is called in your theme. It should be called from the header.php file

    Here's a good resource on including jQuery in WordPress.

    Posted 9 years ago on Friday June 18, 2010 | Permalink
  12. thanks Kevin... I will take a look!

    Posted 9 years ago on Friday June 18, 2010 | Permalink
  13. Well I thought I did everything correctly but I'm not getting it to work. In fact, my form has disappeared :(

    I followed the steps and placed code in the header file of my theme as instructed and created a .js file with the code from inside and then added the <div> tag to surround my shortcode and it doesn't work.

    The .js file I used I simply uploaded to the media folder within WP and didn't think that was a problem but I'm not sure. The URL where the form is currently being worked on is here:

    Again any help getting this worked out would be great. I have a number of sections in this form and it would be great to break it up into those sections as this post is suggesting. Thanks!

    Posted 9 years ago on Friday June 18, 2010 | Permalink
  14. idealists

    Hmmm, I am trying to do this, but can't work it out.

    I have the following in my template head:
    Plus including jquery.
    I'm not sure what the instruction above "wrap your form shortcode like so" means, orhow to do it.

    Also do I have to add some jqeury code that will trigger the form to be made into a wizard on page load? Or does the wizard plugin already do it onload? The example makes you click the link to convert to wizard form, not sure if we need to do anything.

    Any help would be appreciated.

    I'm brand new to GV as of today, and really would love a wizard style form.


    Posted 9 years ago on Thursday July 1, 2010 | Permalink
  15. idealists

    Think I understand the "wrap your form shortcode like so" now.

    To the page that displays the gravity form, I wrapped the:
    [gravityform id=1 name=Test Form]
    And made it:
    <div class="add-gf-sections">
    [gravityform id=1 name=Test Form]

    Also, I have added:
    ^ is that right?

    To the very bottom of the <script></script> tag in the

    Using Firebug I can see Fieldsets being added:
    <fieldset class="gsection-container">

    Posted 9 years ago on Thursday July 1, 2010 | Permalink
  16. idealists

    Maybe the problem is the jquery plgin code uses $ (eg. - $.fn.formToWizard etc) whereas my jquery install for some reason uses jQuery notation (eg. jQuery(document).ready( ..... ) ).
    Not sure, could this be a problem?

    Posted 9 years ago on Thursday July 1, 2010 | Permalink
  17. idealists

    Getting the following error with the code I mentioned above. "Error: uncaught exception: Syntax error, unrecognized expression: #" No idea what is triggering it.

    Posted 9 years ago on Thursday July 1, 2010 | Permalink
  18. idealists

    Ok, I got it to work, but not sure why I had to do it this way.

    Anyway, the notation mentioned in the FormTOWizard plugin tutorial:
    or rather
    jQuery("#SignupForm").formToWizard(); //What I needed

    Doesn't work.
    After 4 hours sleep, and lots of headbanging I worked out the alternative notation worked:
    $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' });
    jQuery("#SignupForm").formToWizard({ submitButton: 'SaveAccount' }); //What I needed

    I am not sure why the earlier mentioned version causes the "Syntax error, unrecognized expression: #" error. I even copied and pasted the form as per the tutorial example into my plainpage template and the earlier call method still caused the same error.

    Not sure exactly what the { submitButton: 'SaveAccount' } achieves, didn't understand the plugin's explanation of it.

    HOWEVER, to get this to work, I had to add the following line of code:
    jQuery('.button').attr("id", 'SaveAccount');
    Which finds any button and adds the ID.
    A better way would be to add the ID element to the Submit Button is gravity Forms, but that is over my head. I'm only a 15hr baby user of Gravity Forms :) If this (assigning an ID to the Submit element) is achievable within Gravity forms, please let me know how. :)

    LASTLY, It still isn't very pretty without having <legend></legend> tags.
    Without <legend> it outputs "Step 1null" etc.

    Is there anyway of modifying the jQuery code:

    To somehow dynamically add a <legend></legend> tag, based on the value of the next

  19. <h2></h2>
  20. which is how I believe the section break lists the section titles.


Posted 9 years ago on Friday July 2, 2010 | Permalink
  • idealists

    Ok, after some play, and modification I got it to add legend tag based on section titles.
    Here is the code:

    Please remember I'm a gravity forms infant, and well just hack my way through jQuery, so if there is any better way of achieving this I would love to know. Thanks!

    Also, still, if there is anyway of adding an ID element to the submit button within gravity forms, without needing my jQuery hack, I would still love to know. Thanks.

    ps. Sorry if I posted in here too much :) Just hope somebody finds it useful.

    Posted 9 years ago on Friday July 2, 2010 | Permalink
  • idealists

    Hmmm, this breaks the gravity Forms form validation. Anyone worked out a solution to that?
    (*feel like I'm talking to myself here*) :)

    Posted 9 years ago on Friday July 2, 2010 | Permalink
  • Hi Idealists, could you provide a link to the form you are working with?

    Posted 9 years ago on Friday July 2, 2010 | Permalink
  • idealists

    Hi David, it is on local host at the moment. I will try and get it to a test "live" site soon.

    Have you got this working yourself, with Gravity Forms' form validation etc?

    ps. Anyway of posting a link to you, without posting it in the forum, want to keep it private.

    Posted 9 years ago on Saturday July 3, 2010 | Permalink
  • idealists

    Thanks, David you've got mail, with link.

    Kind regards.

    Posted 9 years ago on Monday July 5, 2010 | Permalink
  • idealists

    Ok, I have fixed the problem.

    The original jQuery code that did the conversion was deleting the line:
    <input type='hidden' class='gform_hidden' name='is_submit_1' value='1'>

    ..which seems to be required for the form to process.

    So I simply added the following line:
    sections_html = "<input type='hidden' class='gform_hidden' name='is_submit_1' value='1'>" + sections_html;

    See here for the full code:

    Hope that helps somebody else.

    Posted 9 years ago on Wednesday July 7, 2010 | Permalink
  • idealists

    Have updated the fix.

    As I only have 1 form, i didn't realise my fix wouldn't work unless the form # is 1.

    So this fix should work no matter what the form # is.

    Also, it would seem, you can not have more than 1 gravity form per page to use wizard forms.

    If anyone can fix that, please let me know.


    Posted 9 years ago on Wednesday July 7, 2010 | Permalink
  • idealists

    Made a slight modification (adding form_number) to make sure forms work where form number is not 1: (modified previous pastie with fix)
    Quick fix, sure it could be done neater.

    Posted 9 years ago on Thursday July 8, 2010 | Permalink
  • This works for me, except if there is validation error, it will break back to a normal form.

    Posted 8 years ago on Friday October 1, 2010 | Permalink
  • Derk

    Does this 'work around' validate fields when submitting the form for step 2?

    Posted 8 years ago on Friday October 8, 2010 | Permalink
  • Ok,

    So if we put this into a concise outline is this what we have:
    1. Create form with multiple sections
    2. Insert form into post/page with form wrapped in div class="add-gf-sections" like so:
    <div class="add-gf-sections">[gravityform id=1 name=Test Form]</div>
    3. Insert code from into head of page - before the <body>
    4.ensure you have jquery called in the head of the site
    5. Should work...

    Am I missing a step? The entire form is now "invisible".
    Here is the page I have currently in progress:
    (form is there - wizard jquery is hiding the entirety of it though...

    Is there additional work needed in the form creation.
    Tips or pointers would be awesome.

    Posted 8 years ago on Monday November 8, 2010 | Permalink
  • Tim, Gravity Forms 1.5 now adds built-in multipage form support. You can download the beta version from the downloads page and give it a try.

    Posted 8 years ago on Monday November 8, 2010 | Permalink
  • Kevin,

    Looking awesome!
    Testing and almost ready to use this live.
    Question - the progress bar:
    In my mind this should start at 0% and progress should be displayed after the first part is complete.

    I.E. note the page mentioned.
    5 part form - 20% complete shown at the next step?
    Also wondering if there is anything here I can configure - such as showing the progress at the bottom instead of the top. Perhaps there is a forum post on this already?

    Good stuff!

    Posted 8 years ago on Tuesday November 9, 2010 | Permalink
  • Tim

    Theres no option to put the progressbar at the bottom. The only options are selecting the style, displaying the alternate steps or not displaying anything.

    We originally tried starting the bar at 0 on the first page but in tests, it proved more confusing to people when the last step (confirmation) never got to 100%.

    You can always add an HTML block to the end of each page and recreate the progressbar manually. Copy the markup, set the percentage (defined by inline style) to your preference and you're good to go.

    <div class="gf_progressbar_wrapper" id="gf_progressbar_wrapper_4">
    <h3 class="gf_progressbar_title">Step 1 of 5 - Contact Information</h3>
    <div class="gf_progressbar">
    <div style="width: 20%;" class="gf_progressbar_percentage percentbar_orange"><span>20%</span></div>
    Posted 8 years ago on Tuesday November 9, 2010 | Permalink