search

verbb / formie

The most user-friendly forms plugin for Craft CMS.
Other
96 stars 73 forks source link

Disabled state of submit button missing? #1514

Open carinameissl opened 1 year ago

carinameissl commented 1 year ago

What are you trying to do?

Hello,

I integrated a form into one of my projects and it seems I the button does not have a disabled state even when required fields are not filled in yet? Is there a way to style the button when the form can't be submitted yet?

Thanks! Carina

What's your proposed solution?

Natively adding a disabled state

Additional context

Multi-page form: No Submission Method: Ajax Custom Form Templates: No

Plugin version: "verbb/formie": "2.0.24", Craft version: "craftcms/cms": "4.4.0", Multi-site: No

engram-design commented 1 year ago

That's not something that Formie uses at the moment, and I'm not quite sure if that's a good UX pattern, or a bit of an anti-pattern. On the one hand, it makes sense to guide users into filling out the required fields, but on the other it can be error-prone and a downright frustration to users who can't figure out why they may not be able to hit next (user-error, legitimate error, etc)

So right now, there's a hands-off approach to this that users can hit the submit button all they like. Client-side validation is there to provide useful and clear instructions on what required fields (or other validations) need to be addressed.

carinameissl commented 1 year ago

Thanks for your answer - I understand your point, guess it can be argued both ways. Our UI/UX team approached me with the request of adding the disabled state arguing it would be misleading (and again frustrating) for the user if they submit the form and keep getting error messages rather than noticing that they're missing fields beforehand. We also style our forms with "optional" labels to make sure the user fills out the needed fields, however, would it be possible to add a disabled state either way - we could then individually decide whether we make use of it and style the button accordingly or not?

Thanks, Carina

engram-design commented 1 year ago

It’s certainly an option we can look at adding! I know others have asked for optional indicators too.

as for implementing it now, you’re essentially on your own. There’s not going to be a great way to listen and evaluate the empty state of fields in a page to enable a disabled button. This might get easier for us when we switch validators.

It should be achievable through custom JS, but it’ll just be some work on your end to implement, which may or may not be ideal.