CustomInputfieldAttributes by Ryan Cramer

Add custom attributes to Inputfields in ProcessWire, FormBuilder, etc.

Custom Inputfield Attributes for ProcessWire

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.

  1. Copy the files for this module to /site/modules/CustomInputfieldAttributes/
  2. In your admin go to Modules > Refresh.
  3. Click “Install” for Modules > Site > Custom > Custom Inputfield Attributes.
  4. 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');
}

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Latest news

  • ProcessWire Weekly #551
    In the 551st issue of ProcessWire Weekly we'll check out what's new in the core this week, share a new weekly poll, and more. Read on!
    Weekly.pw / 1 December 2024
  • Custom Fields Module
    This week we look at a new ProFields module named Custom Fields. This module provides a way to rapidly build out ProcessWire fields that contain any number of subfields/properties within them.
    Blog / 30 August 2024
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer