Required fields should be reflected as such in the new multi-step form template

[DevinWalker]

User Story

As a donor, I want to be aware of required fields in the new Multi-step form template so that I'm not confused when I submit my donation.

Details

Right now when you require a field, such as the "Title Prefix Field" or by default the "First Name" and "Email" fields there is no indicator that these fields are required in the multi-step form template.

Expected Behavior

Required fields should have an indicator such as an asterisk * that then is removed when the field is completed.

Steps to Reproduce

1. Create a new multi-step form template
2. Go to the payment step and see that required fields have no indicator

Acceptance Criteria

• [x] A required * displays on required fields
• [x] The required indicator is compatible with all field types (including FFM fields)

[canny[bot]]

This issue has been linked to a Canny post: Required Fields on Multi-step Template :tada:

[alaca]

@DevinWalker how we want to do this?	Current	Solution 1	Solution 2

Solution 3 would be to change the FFM fields to look like default form fields ( without labels ) but then we lose helper icon functionality.

[ravinderk]

Recently in the core, we implemented a change to mark non-required fields as optional.

@DevinWalker @alaca Are we planning to redesign? or will we already consider a past change when updating UI?

[DevinWalker]

@ravinderk I would rather keep it how it is with NON-required fields having the (optional) text. Otherwise we're going to have asterisks all over the donation form fields and it won't look good.

[lindseymacmillan]

This issue can be resolved by ensuring that the setupOptionalInputLables function (which should be renamed to fix typo), is called in refreshPaymentInformationSection (immedieately after setupInputIcons should do the trick). Currently setupOptionalInputLables is only called on form initialization, and only adds the "optional" text to fields within #give_checkout_user_info.

See original conversation here: https://github.com/impress-org/givewp/pull/5161#discussion_r553413883

[alaca]

@henryholtgeerts thanks for pointing that out. This is also the FFM add-on issue as we have to change its fields to match the default form fields for consistency.

[ravinderk]

Slack discussion: @DevinWalker agrees to show asterisks as design decision instead of reflecting optional fields: https://lw.slack.com/archives/C02QJ8F07B3/p1656076203215979