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.

Partially Modal Multi-Page Form

  1. bakelly
    Member

    Hey there. I've been struggling with this for the last few hours, hopefully someone knows the answer. I've followed Kevin's Fancy Box modal tutorial, and I've got it working beautifully.

    What I'd like to do however, is have the first page of a multi-page form inside the modal window, but on submit, I'd like the modal window to close, and I'd like to parent window to load a second page, passing the submitted variables from the modal form.

    For example, the user clicks a link to select a specific product. The modal window is popped on the click, and prompts them for their zip code. When they hit submit, the modal window closes, and the parent window goes to the product configuration page, where the zip is passed to a hidden field.

    I can see how the functionality could be done with a standard HTML form using onclick with the submit button. I've tried calling Fancy Box's close-window function in form_display.php (I think between lines 500 and 530, off the top of my head) but haven't had much luck.

    I should add that right now, as I would expect because of my form 1 redirect settings, upon submitting the modal form, my 2nd page (the aforementioned product config page) loads inside the modal, rather than the parent with the modal closed.

    Does anyone have any suggestions? Thanks.

    Thanks,
    Brad Kelly

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  2. I think this might be more readily accomplished by created two separate forms. One simple single page form for the modal window which when submitted would pass the submitted information via query string to a second multi-page form.

    The information submitted from the first form could then be populated into hidden fields on the second form so that all the form information is still available on the second form submission entry.

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  3. bakelly
    Member

    Thanks for the response David! I like your assessment; using two forms and passing the values would probably be easier. I'll be sure to give that a shot.

    Do you have any idea how I can show the second multi-page form in the parent window instead? It currently opens inside the modal window.

    Also, might you have any suggestions on automatically closing the modal window upon submission? Normally I would use the submit button's onclick to do this, but because the form display code is shared and the whole form is called via php or a shortcode (instead of each element individually), I'm having a hard time locating where I can inject an instruction into the Gravity code to close the modal automatically and thus eliminate a click.

    I understand this is borderline out-of-scope for you guys, but would appreciate any input on how I might accomplish this using Gravity Forms.

    Thanks again for the quick response.
    Brad

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  4. Most modal window scripts have a built in function that can be called to close the modal window.

    In regards to opening the second form in the parent window... theoretically you could add (via javascript) a target attribute to the first form element and specify "_top" to target the parent page. Give it a shot and see how it works.

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  5. bakelly
    Member

    Thanks again for your help David. I was able to craft a solution that worked.

    Posted 13 years ago on Wednesday May 4, 2011 | Permalink
  6. Glad to hear it! Are you able to share the finished product yet? If not, make sure you do when you can. :)

    Posted 13 years ago on Wednesday May 4, 2011 | Permalink