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.

I've done it! dynamic multi-paged form!

  1. net_mage
    Member

    One thing to note before hacking your form WP page template:

    You should have experience with jQuery, editing your WP page templates and extensive css formatting. Otherwise this technique will be difficult.

    My method will not be required if the GF team adds fieldsets (begin and end) options into the form. I'll cross my fingers.

    Solution:

    Basically the idea requires the use of the dynamic form wizard found here:

    http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

    It requires fieldsets... but we don't have any. So we create some.

    1. Download and include the form wizard & jQuery in your header file for the form page.

    2. We need to create fieldsets to wrap sections of the <li.gfield> elements.

    Count the number of fields you want to include on the "first page" of the form. Then use the following code to insert a fieldset around just those fields:

    $("li.gfield").slice(0,2).wrapAll('<fieldset></fieldset>') <!--WE WRAP 2 FIELDS HERE -->

    To wrap the next two fields in another fieldset (2nd page of form) just adjust your .slice() function:

    $("li.gfield").slice(2,4).wrapAll('<fieldset></fieldset>') <!--WE WRAP 2 MORE FIELDS HERE -->

    Once you have wrapped all of your forms wfields in fieldsets to create our form pages we call the .FormtoWizard(); function to produce our multi-paging.

    Now all of those things put together in a header script would look like the following:

    $(document).ready(function(){
    
      $("li.gfield").slice(0,2).wrapAll('<fieldset></fieldset>');
      $("li.gfield").slice(2,4).wrapAll('<fieldset></fieldset>');
      $("#gform_wrapper_2").formToWizard({ submitButton: 'mybuttonid' });
    });

    Above code will create a 2 page form from 4 fields.

    Sorry if that was hard to follow. I can answer basic questions here if anyone gets stuck.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  2. If you wrap code blocks with the ` character it will format the code for you.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  3. net_mage
    Member

    Oh, nice. Ill see if I can format that post a bit.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  4. Nice work!

    We have actually been able to do the same thing on our end and we intend on implementing this as a native feature to Gravity Forms as early as the 1.4 release which will be the next major feature release.

    You may want to post to a sample demo form of this in action so others can see it actually working.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  5. net_mage
    Member

    Carl,

    Do you have a beta of the 1.4 I can test? I am developing a site which will rely heavily on this type of form manipulation.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  6. There is no beta of 1.4 available that has new functionality. The beta of 1.4 that some people were using was purely for testing the MailChimp add-on while it was in beta. However, that version of Gravity Forms was actually released as 1.3.9 and only introduced Add-On compatibility and bug fixes.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  7. net_mage
    Member

    Roger. Well keep me in the loop, I would love to be a part of the testing process.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  8. When 1.4 is ready for beta testing we will most certainly make it available to users who would like to contribute to the testing process. No timetable has been set.

    Posted 14 years ago on Tuesday February 9, 2010 | Permalink
  9. I also would not mind being part of the testing process aswell...

    Posted 14 years ago on Wednesday March 10, 2010 | Permalink
  10. Hi.

    As far as I can tell, this feature has not been implemented into 1.4 after all or is that not true?

    I am also looking for this solution of splitting the sections with fieldset.
    http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx

    I havent tried it yet, but maybe doing something similar to what is done here might fix it?
    http://forum.gravityhelp.com/topic/css-for-2-columns-5-fields-in-first-column-2-fields-in-second-column

    Cordially
    Vayu

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  11. No, multi-page forms didn't make it into the 1.4 release. They're still on the to-do list but it's going to be a little later down the line still.

    Yes, you can use the HTML fields similar to the 2 column example you referenced to create fieldsets around elements.. then you could use the multi-page script.

    The form is structured in a nested list, so you would need to add markup inline to close the list, start a new fieldset, reopen the list.. then, in another html field below, repeat the process, closing the list and fieldset, then opening a new fieldset and list.

    It sounds a bit whacky, but once you've looked at the markup, you'll see it's actually pretty easy to pull off

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  12. Hi Kevin,

    yeah, thats the same thought I had, but wasnt sure if it would work. Thanks for clarifying that for me. :-)

    Cheers
    Vayu

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  13. I'm actually testing an example now - using the wizard form script and utilizing the inline HTML fields to add the fieldsets inline.

    As soon as I can wrap that up, I'll post the example and share a link to the exported form xml file so you can grab it and try it out.

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  14. That sound great Kevin. I look forward to seeing that. :-)

    I actually have an issue with this process though, because a closing fieldset tag is automatically added immediately after the opening fieldset tag. I dont know if it is WP or Gravity doing this.

    I have done like you explained by adding a <fieldset> in an HTML field at the top of the form and another HTML field at the bottom with a closing </fieldset> tag. But the bottom one is being ignored and a clsoing fieldset is added to the top one.

    Do you get this problem?

    Posted 14 years ago on Thursday September 30, 2010 | Permalink
  15. I haven't experienced any issues like that. The HTML fields don't have any built-in autocomplete functionality so that might be something that's being added by another plugin or script that's running somewhere.

    Posted 14 years ago on Friday October 1, 2010 | Permalink
  16. hmmm, I have deactivated all plugins, but still get the same problem.
    http://vayu.dk/kontakt/

    I am just using a plain ol Twentyten theme, so I dont think there is any script there causing it.

    Have you inserted the form via shortcode in the textarea og via php code in a template?

    This is how I have done it:

    <fieldset>
    <legend>Section 1</legend>
    <--! form input fields -->
    </fieldset>
    <fieldset>
    <legend>Section 2</legend>
    <--! form input fields -->
    </fieldset>

    Am I doing something wrong?

    Posted 14 years ago on Friday October 1, 2010 | Permalink
  17. Is there an update on this? I have a "page" of my form that i need to repeat continuously by having the user click an "add another item" button...
    thanks

    Posted 13 years ago on Saturday March 26, 2011 | Permalink
  18. @beyoyo2

    You can't dynamically add new pages to your form. You can create a multi-page form and conditionally show/hide pages based on a selection, but you can't click on a button to "add another item" on the fly.

    Posted 13 years ago on Saturday March 26, 2011 | Permalink
  19. so i would basically need to create 5 "pages" that are the same...
    and only let the user submit up to 5 items...

    I am guessing each field will need to be incremented so they have unique values.
    So all form page1 items have a "1" after each field... and all page2 items have a "2" after each field, etc.?

    Posted 13 years ago on Saturday March 26, 2011 | Permalink
  20. @beyoyo2 I'm not 100% sure what you are trying to accomplish, but yes you would need to add 5 page breaks to your form where you want a new page to begin and then apply conditional logic to that page break to determine when to show/hide it. What you name your fields on each page is entirely up to you if you want to denote the page in the field name.

    Posted 13 years ago on Sunday March 27, 2011 | Permalink

This topic has been resolved and has been closed to new replies.