gbirch's sandbox: Custom Input

Summary:

Custom Input modifies the standard "Manage Fields" interface to enable site builders to customize the way that fields are presented on a form. For each field you can:

• Add custom CSS classes to the wrapper, the label, the input element and the help text, and even to the intermediate grouping div that surrounds radios and checkboxes.
• Add other, custom HTML attributes (such as type, placeholder, data, validation, etc) to the input, label and help elements.
• Change the label text, so that the field can have a friendly, wordy prompt when shown on a form without mucking up the display of the data in other contexts.
• Move the position of the help text so that it appears above the main input element.
• Prepopulate the value of the field from a URL.
• Make the appearance or attributes of the field conditional upon the state of another field, using the #states property of the Form API.

Why?

We tend to use Drupal for sites that require significant amounts of structured data. And usually this means forms; big, long forms. CSS frameworks like Foundation and Bootstrap offer lots of pre-built, modularized CSS classes that make it easy to create nicely aligned, responsive forms, but we couldn't use these CSS classes out of the box -- instead we had to either customize the CSS (i.e. apply bootstrap class X to field Y), or do custom programming (i.e. add bootstrap class X to the markup for field Y in a form_alter function). Neither approach appealed - they take a lot of time, and they're hard to modify and maintain when the data structure changes. So we wrote a module.

Custom Input enables site builders to assign custom CSS classes to common form elements using the familiar Field UI. Because it hooks into the Field UI, it works with any fieldable entity - nodes, comments, taxonomy terms, user profiles, entityforms, and so on. And since you often need to customize the presentation of the label and the help apart from the input, the module can assign custom classes to the individual components of the field (the input itself, the label, and the help text), and not just to the field wrapper div (and, in the case of checkboxes and radios, the intervening grouping div).

Once we had that working, we figured out that we could use the same interface and same method to customize the other HTML attributes of form elements as well. So Custom Input enables you to use most of the nifty HTML5 improvements to the standard input element, including types (email, tel, url, and so on), placeholders and validation. In some cases this may also be useful for improving the accessibility of the field.

And if you're fiddling with attributes, why not add the ability to use Drupal 7's cool #states functionality, which is otherwise only available on custom forms?

Finally, the module also provides some logically related auxiliary functions that replicate (to some extent) the functionality of other modules, including changing the text of the field label when used in a form (so you can change "Name" to "Please provide your name"), and permitting the value of the field to be pre-populated from a URL.

Limitations: Custom Input does not work with every field type and widget. And for some field types it works only partially. Customizing the display of form errors is not supported. Suggestions welcome.

Module created by Tech-Tamer