Introduce a submit confirmation step modal to Form API for usability

Created on 5 June 2017, about 7 years ago
Updated 26 February 2024, 4 months ago

Problem
There is currently no standard (and easy) way in Drupal's Form API to allow for a user friendly form submission confirmation step.

We have ConfirmFormBase which can be used as a separate form for a single action, this is not fit for a multi-step flow in which you first want to gather input from the user. And it is especially not straightforward to ask for extra (to be validated) input during a confirmation step.

Exemplary is the current edit account page. In this case the Edit action and Confirm action are put together on the same page. Several usability studies, including the issue below, show that this pattern is confusing to users.
https://www.drupal.org/node/1259892 β†’
But also the new Content Layout functionality could benefit from this new option.

Solution

Introduce a confirmation modal, which optionally allows for extra user input that can be validated.

This allows for easily separating two dedicated user interaction steps from each other. So users only need to deal with one step at a time, and by using a modal the urgency is more clear and allows for a more fluid interaction.

By providing a standardized solution to this problem contrib can also create better forms.

Example

Please see how it can work in the following prototype.
This prototype uses the Edit Account page as an example. When submitting changed field(s) that require the current password to apply, show a modal window asking the user to confirm the changes by entering the current password.

http://prototype.goalgorilla.com/drupalux/currentpassword/#g=1&p=edit_ac...

API changes

We would need some new properties/methods to the Form API that allow to:
- Set that a form submission confirmation is always needed OR set a list of fields that need confirmation on change
- Give a custom confirmation form (class), which defaults to a default confirmation form like ConfirmFormBase.

Other examples
This design pattern is also widely used by other services.

Mailchimp:

Hubspot:

✨ Feature request
Status

Active

Version

11.0 πŸ”₯

Component
FormΒ  β†’

Last updated about 1 hour ago

Created by

πŸ‡³πŸ‡±Netherlands xinyuma

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡©πŸ‡ͺGermany Feuerwagen Bonn πŸ‡©πŸ‡ͺπŸ‡ͺπŸ‡Ί

    This maybe started as kind of a bug report, but apparently turned into a feature request shortly afterwards.

    Btw: Looks useful to me as well. ;)

  • πŸ‡ΊπŸ‡ΈUnited States Tregonia

    +1 for this being a potentially nice addition to core.

    In my use-case, when a user is changed from Active to Blocked, several custom things are triggered. Having the ability to define a confirmation step between validation and submit would be a welcome addition, and better encapsulate all the form functionality.

  • πŸ‡ΊπŸ‡ΈUnited States maskedjellybean Portland, OR

    I've love to see a solution for this.

    I mistakenly thought I could solve this using ConfirmFormBase ( https://www.drupal.org/docs/drupal-apis/form-api/confirmformbase-to-conf... β†’ ), but I've come to the disappointing conclusion that it's simply not feasible to add confirmation to an existing form that does not already extend ConfirmFormBase. In order to add this to an existing form you would first need to override the existing form class with a new class that you control. This is possible. However, in order to avoid duplicating all of the code from the existing class, you would want to extend that class and only modify the necessary methods while calling the parent methods inside your modified methods when possible. But then of course your new class does not extend ConfirmFormBase, so you are right back where you started.

Production build 0.69.0 2024