What are form field attributes?
Attributes help define the appearance and behavior of form fields, such as restricting users to a specific number range with minimum and maximum attributes. The most common attributes are id and class. Most input elements should have a valid type attribute. Not all attributes are valid on all elements. For example, the placeholder attribute is not a valid attribute on select elements, but is perfectly valid on input elements with a type attribute set to text.
Configurable Attributes and Boolean Attributes
Some attributes are configurable with different options while others simply need to exist. An example of a configurable attribute is like the id or class. In order for those to be valid, the HTML needs those attributes to be set to a valid value like so:
<input id="dynamic-input" class="dtx" />A Boolean attribute does not need a value, it simply needs to exist. An example of a Boolean attribute is like required or readonly. You may also see these as set to themselves like so:
<input readonly />
<input readonly="readonly" />Contact Form 7 Attributes
In Contact Form 7, attributes are defined in the form tag by attribute, followed by a colon (:) and a value. Boolean attributes have just the attribute’s name. For example, a form tag that is not allowed to be edited by the user would need the readonly attribute like this:
[text static_text readonly "Hello world"]In another example, setting the maximum length of a required text field to 50 characters would be achieved with this form tag:
[text* static_text maxlength:50]In Contact Form 7, the follow attributes are available:
id– theidattribute of theinput,select, ortextareaelementclass– theclassattribute of theinput,select, ortextareaelement. To set two or more classes, you can use multipleclass:option, like[text your-text class:y2008 class:m01 class:d01]minlengthandmaxlength– See Contact Form 7 documentation for max & min length options and character countsize– thesizeattribute of theinputelements. Default is 40.akismet– See Contact Form 7 documentation for spam filtering with Akismetplaceholderandwatermark– See Contact Form 7 documentation for setting placeholder textdefault– See Contact Form 7 documentation for getting values from shortcode attributesautocomplete– See Contact Form 7 documentation for form autocompletion
View more attributes available specific to text fields, number fields, date fields, and checkboxes/radio buttons/menus.
Dynamic Attributes in DTX
In version 4.4.0 of Contact Form 7 – Dynamic Text Extension, we introduced dynamic attributes!
In the form tag generator for the dynamic text field, you’ll see that there are text input fields for some of the form tags (where they’re valid HTML of course!). For example, you’ll see options to set the Range for number, range, and date fields. On others, you’ll see new options to set values for Auto-Complete and Auto-Capitalize. These values can be static or accept a shortcode value that outputs a valid string.
For Boolean attributes, shortcodes that return an empty string are considered valid, so to dynamically remove that attribute, pass something other than the attribute’s name or a blank string!
For example, let’s say a field named hello is set to only be editable if the URL contains the parameter foo. We can achieve that by using our CF7_GET shortcode setting the key to foo (because that is the parameter’s name in the URL) and defining the default value to be bar which is what we want the shortcode to return if foo does not exist or is empty. So that shortcode configuration looks like this:
CF7_GET key='foo' default='bar'To work with Contact Form 7’s form tag syntax, the value you type into the text field undergoes two changes: it converts apostrophes to their HTML entity code and encodes the whole thing like a URL. This is what will allow you to use apostrophes in static text or shortcodes with attributes for dynamic content. Though the output looks less-than friendly. In our example, the above gets turned into this:
CF7_GET%20key%3D%26%2339%3Bfoo%26%2339%3B%20default%3D%26%2339%3Bbar%26%2339%3BAnd then inserted as the attribute’s value for readonly like this:
[dynamic_text hello readonly:CF7_GET%20key%3D%26%2339%3Bfoo%26%2339%3B%20default%3D%26%2339%3Bbar%26%2339%3B "Some Static Value"]If viewing the URL where ?foo or ?foo=anything or ? (because there is no foo!), the dynamic field will be editable because missing/blank values return bar by default, and anything other than readonly (the attribute’s own name) is invalid for Boolean attributes. However, if the URL includes ?foo=readonly, then the field will not be editable because the shortcode will return the attribute’s own name, making it valid.
The following attributes accept dynamic values:
autocapitalize– great for accessibility, the form tag generator includes suggestions for common options, see documentation for the auto-capitalize attribute.autocomplete– great for accessibility, the form tag generator includes suggestions for common options, see documentation for the auto-complete attribute.autofocus– a Boolean attribute, great for accessibility, it sets the focus on the form field when the page is loaded, see documentation for the auto-focus attribute.cols– only valid ontextareaelements, this defines the number of columns. See documentation for the cols attribute.disabled– a Boolean attribute, prevents this form field from being submitted, see documentation for the disabled attribute.list– allows text-based fields to offer suggestions, see documentation for the data list element and the associated list attribute.max– a ranged attribute, restricts a numeric or date field to be less than this value, see documentation for the max attribute.maxlength– a ranged attribute, restricts a text-based field to be less than the number of characters, see documentation for the maxlength attribute.min– a ranged attribute, restricts a number or date field to be greater than this value, see documentation for the min attribute.minlength– a ranged attribute, restricts a text-based field to be greather than the number of characters, see documentation for the minlength attribute.pattern– see documentation on thepatternattribute.placeholderandwatermark– See DTX Placeholder documentationreadonly– a Boolean attribute, prevents users from editing theinputortextareafields. See documentation for the read-only attribute.rows– only valid ontextareaelements, this defines the number of rows. See documentation for the rows attribute.size– thesizeattribute of theinputandselectelements. Default is 40 forinputelements and 1 forselectelements, see documentation on the size attribute.step– defines how a numeric field is incremented, see documentation on the step attribute.
For ranged attributes, if both values exist, the minimum must be smaller than or equal to the maximum.
There are probably some bugs with this feature, so if you find one, please report it in the support forums. Thank you!
