USP Pro provides a wealth of attributes for dialing in the perfect custom form fields, but sometimes you need to add a little something extra. This tutorial explains a couple of ways to add custom attributes to any custom field.

custom_n

The first way to add custom attributes is to use one of the five predefined attributes:

  • custom_1 – syntax: custom_1#attribute:value
  • custom_2 – syntax: custom_2#attribute:value
  • custom_3 – syntax: custom_3#attribute:value
  • custom_4 – syntax: custom_4#attribute:value
  • custom_5 – syntax: custom_5#attribute:value

So for example, if you need to add a new data- attribute to the custom field, you would include the following in the custom field definition:

custom_1#data-whatever:some-value

This would add the following attribute to the form field:

<input ... data-whatever="some-value">

Wild Card

If the custom_n attributes aren’t your thing, you can alternately just add any attributes wholesale to the custom field definition. For example:

data-custom#custom-att

This will add the following attribute to the form field:

<input ... data-custom="custom-att">

So any name/value pair separated by a pound sign # will be included as an attribute in the output form field. So your custom field definition could include as many custom attributes as needed, for example:

data-custom-1#custom-att-1|data-custom-2#custom-att-2|data-custom-3#custom-att-3

This would result in the following attributes added to the form field:

<input ... data-custom-1="custom-att-1" data-custom-2="custom-att-2" data-custom-3="custom-att-3">

Plenty of flexibility to customize things exactly as needed.