This module enhances both the interactive and API configurability of
fields in ProcessWire (both admin and front-end). It can add custom
attributes to Inputfields in ProcessWire, FormBuilder, or other
Inputfield forms. Custom attributes can be configured interactively in the
admin, or they can be added via this module’s API method.
Custom attributes can be added to the <input> element of an Inputfield or
they can be added to the wrapping .Inputfield element. You can add any
attribute that you want (with a few exceptions), whether replacing or appending
existing attributes, adding data-* attributes or any other named attribute.
This feature was originally considered for the core but I'm not sure enough
people need this ability to warrant that, so have developed this module instead.
This module might also be useful to other module developers looking for an
example of how to modify or add Inputfield attributes. If so, feel free to
copy or adapt any code out of this into your own.
Install
ProcessWire 3.0.220 or newer is recommended.
- Copy the files for this module to
/site/modules/CustomInputfieldAttributes/ - In your admin go to Modules > Refresh.
- Click “Install” for Modules > Site > Custom > Custom Inputfield Attributes.
- Note the settings on the configuration screen and adjust as needed.
Usage
ProcessWire fields
When editing a field in ProcessWire, you'll see the “Add Custom Attributes”
setting on the “Input” tab, towards the bottom.
FormBuilder
When editing a field in FormBuilder, you'll see the “Add Custom Attributes”
setting on the “Details” tab, towards the bottom.
Elsewhere
When editing other forms in ProcessWire (such as in LoginRegisterPro) you'll
see the “Add Custom Attributes” setting near other input settings such as
visibility and required settings.
Inherent limitations
Custom attributes may not work on all Inputfield types, as not all Inputfield
types render attribute strings dynamically, even if most do. For this reason
the module lets you optionally specify which Inputfield types you want to
enable it for in the module configuration. Note however that the wrap option
that applies to the wrapping .Inputfield element should work on most if not
all Inputfields, since that portion is handled by the same code in the core
for all Inputfields.
There are also cases where an Inputfield doesn't have a specific <input>
or <select> element where attributes would apply, such as repeatable types.
For these types, this module is not likely to be able to do anything, or
it may produce unexpected results.
Built-in limitations
This module won't let you add certain attributes interactively, such as
id, name, or any on* attributes like onchange, onfocus,
onblur, etc.
Should you need them, it will let you add those attributes using the
module’s API, or you can add/modify/remove the limits directly from the
module file using the $badNames and $badValues array settings near
the top of the module file.
It may be that there are more attributes it should block that I'm not
yet aware of. Please let me know if you have any suggestions.
Append attributes
By default, this module will append class and style attributes rather
than replace them. It takes care to also append a space before any added
class names, or a semicolon ; before any added styles. If needed, you
can add more append attributes from the module's configuration. Other
append attributes will be treated like class attributes, appending a
space before the added values.
API
This module will let you add custom attributes from an API method that
is likely to be called from your /site/ready.php file:
// get the module
$cia = $modules->get('CustomInputfieldAttributes');
// add a class to <input> element for Inputfield named "title"
$cia->addAttribute('title', 'class', 'uk-form-large');
// add a class to wrapping (^) .Inputfield element for "headline"
$cia->addAttribute('title', '^class', 'InputfieldIsPrimary');
// add an onchange event attribute to "headline"
$cia->addAttribute('headline', 'onchange', 'alert("Headline changed")');
This will add the attribute to any Inputfield having the given name, whether
it appears in a ProcessWire field, FormBuilder, or some other form in the
admin or front-end. So it's possible you may need to be more selective
before adding an attribute. For instance:
if($page->process == 'ProcessPageEdit') {
$cia->addAttribute('title', 'class', 'uk-form-large');
}
if($page->template->name === 'contact') {
$cia->addAttribute('phone', 'placeholder', 'i.e. 123-123-1234');
}