Better UX for Multi Form Checkouts

  • Hey,

    I’m looking at checkout situations with multiple forms and submits as well and there is a UX issue.

    If the user fills out three forms and clicks submit for the last form, the page reloads and the 3rd form is gone (successfully submitted) but the first two are still there, unsubmitted and blank. It’s going to be confusing and frustrating for people.

    Here’s the options as I see it:

    1. Post a message at the top of the page that says “Complete each form and submit each form one at a time.”
    2. Come up with a technique to obfuscate all but the first/”top” form so that a user can only fill out one form at a time. Perhaps this would be an absolutely positioned psuedo element with a semitransparent background that covered all but the first form, making it impossible for users to use subsequent forms…
    3. Allow AJAX form submission so that when someone submits the 3rd form, it is submitted and the confirmation message appears, but the other two forms stay and retain the entered data. ( And we assume the person realizes that they need to click every submit button and do so. ) Perhaps Gravity Forms’ existing AJAX tools can be deployed.
    4. Allow paging in the case of multiple forms so that if there are several forms, only one appears at a time. Perhaps Gravity Forms’ existing paging tools can be deployed and we can even have the progress bar available.

    Obviously, 3 and 4 are the best options for UX.

    I see that in gravity-forms-checkout-info.php I can set the form to AJAX => TRUE, and it resolves my issue. Is there a reason that the default here is false?

    https://www.ads-software.com/plugins/gravity-forms-checkout-info-add-on-for-ithemes-exchange/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Timothy Jacobs

    (@timothyblynjacobs)

    Hey JRyven.

    Pull requests are welcome, https://github.com/iron-bound-designs/exchange-addon-gravity-forms-checkout-info.

    1. Certainly possible.
    2. Sounds awful.
    3. That was my initial thinking. But in order to move to the next purchase requirement, Exchange requires a full page refresh. Were you able to get the AJAX solution to completely work for you? Does it work if you have something like shipping enabled which would require another purchase requirement?
    4. Could work as well, but we’d still have to solve the full page refresh problem.

    What do you think?

    Thread Starter JRyven

    (@jryven)

    2. Yep… I have an awful imagination.

    3. You’re right – I can’t proceed if AJAX is enabled.

    4. Would a work around be to create a “submission form” that only refreshes the page? Say they’re ordering a membership and e-course. For the membership we want to know their occupation and some other general info, and for the e-course, we want to know specific information about their proficiency at a certain skill.

    The first form regarding general information is on a page. Clicking submit moves them forward to form two, which asks about specific information. Clicking submit on form two sends them to a final confirmation:

    ” Thank you for providing the required information. [ Complete your purchase now! ] “

    Where the sole purpose is to refresh the page?

    Do you foresee an issue with that?

    I can give it a shot myself. I can say I can at least test the “submission to submit form”.

    Plugin Author Timothy Jacobs

    (@timothyblynjacobs)

    I’m working on some ideas for AJAX. My idea is to keep track of which forms are still needed to be submitted, and when we run out of forms, then refresh the page after the form has been submitted via AJAX. If you can send me an email, timothy [at] ironbounddesigns.com, I can send you a version for you to test when I have a solution.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Better UX for Multi Form Checkouts’ is closed to new replies.