juergenweb / FrontendForms

A module for ProcessWire CMS to create and validate forms on the frontend easily using the Valitron library.
MIT License
15 stars 1 forks source link

Feature request: Description position change #7

Closed donatasben closed 7 months ago

donatasben commented 7 months ago

Hi, I couldn't find any option or easy way in the docs to print the field's description text above an input field, just below the label. For UX it is more beneficial. Could you add such an option? Or advise how to achieve that in code?

juergenweb commented 7 months ago

Hello Donatas

Thank you for you report. Unfortunately there is no easy inbuilt way to achive this. You can use the prepend() method to the label to add text before the label, but this is not an elegant way and it needs to add CSS classes for the description manually.

I find your suggestions for this addition useful and I will add new methods to get the desired results.

My plan:

This should give you full control over the description rendering.

Just to be clear: The description should be on the first position before the label -> is this correct (description -> label -> input field -> ...)?

I will add this as soon as possible.

Have a nice weekend

Jürgen

donatasben commented 7 months ago

Thanks! I personally need 2 positions mostly for field descriptions:

  1. label > description > input
  2. label > input > description (current)

But there could be options to mix and match any order, maybe? :)

juergenweb commented 7 months ago

Sure, you can set the position of the description of each input field individually on demand (one before the input field, the next after the input field,...).

I guess, adding the description before the input field at checkboxes and radio buttons will look not really nice, but you can check it out after I have added this feature (maybe this weekend) to the next update.

Best regards

juergenweb commented 7 months ago

Hello Donatas

I have added your feature request to the latest version of FrontendForms (2.1.64). Please download this version to be able to use the new feature.

I have decided to offer 2 new additional positions for the field description instead of 1: before the label and after the label.

The 3rd and default position is after the input.

In general we can say now you have 3 possibilities to position your field description inside the field markup (before the label, after the label and after the input field).

BTW: There is no problem by positioning the description before the label by checkboxes and radio buttons. This was a wrong information from me. It works without problems on any type of inputfield.

In addition I have also added a new CSS class to each position, so you are able to style the field description differently on each position.

New CSS classes on various positions:

You only need to take a look inside the source code.

The full documentation of the new feature and how to use it can be found inside the changelog.md.

I close this issue now. If you discover any problems, please open a new issue report.

Best regards Jürgen

juergenweb commented 7 months ago

Feature added!