caldera_forms_field_attributes

This filter was added in Caldera Forms 1.5.0

This filter can be used to add, remove or modify HTML attributes for input elements.

The parameter exposed by this filter is an array of attributes that are used for the HTML inputs of Caldera Forms. Each of these attributes will be passed through esc_attr(). Do not add additional escaping.

You can use this filter to add an attribute to a field type’s input:

	<?php
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'button' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'data-form-id' ] = $form[ 'ID' ];
	}
	return $attrs;
	}, 20, 3 );

view raw caldera_forms_field_attributes-add-attr.php hosted with by GitHub

You can also add to an existing attribute. For example, to add an additional class to all text inputs:

	<?php
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'text' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'class' ] .= ' my-special-class';
	}
	return $attrs;
	}, 20, 3 );

view raw caldera_forms_field_attributes-add-class.php hosted with by GitHub

More Examples

Set Maximum Value For Caldera Forms Number Fields

Because this filter exposes form and field configuration you can target field’s by type, or field ID or form ID. All three options are shown here for adding a maximum argument for number fields:

	<?php
	/**
	* Set all Caldera Forms number fields' max value to 75
	*/
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'number' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'max' ] = 75;
	}
	return $attrs;
	}, 20, 3 );
	/**
	* Set the Caldera Forms number field with the ID of fld_456's max value to 75
	*/
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'fld_456' === $field[ 'ID' ] && 'number' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'max' ] = 75;
	}
	return $attrs;
	}, 20, 3 );
	/**
	* Set all Caldera Forms number fields that are in the form with the ID cf_12324's max value to 75
	*/
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'cf_12324' === $form[ 'ID' ] && 'number' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'max' ] = 75;
	}
	return $attrs;
	}, 20, 3 );

view raw caldera_forms_field_attributes-number-max.php hosted with by GitHub

Limit Total Characters For A Paragraph Field

Paragraph fields use textarea elements. You can set the maximum allowed characters using the maxlength attribute.

	<?php
	/**
	* Set all Caldera Forms paragraph fields' maxlength to 75
	*/
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'paragraph' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'maxlength' ] = 75;
	}
	return $attrs;
	}, 20, 3 );
	/**
	* Set the Caldera Forms paragraph field with the ID of fld_456's maxlength to 75
	*/
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'fld_456' === $field[ 'ID' ] && 'paragraph' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'maxlength' ] = 75;
	}
	return $attrs;
	}, 20, 3 );
	/**
	* Set all Caldera Forms paragraph fields that are in the form with the ID cf_12324's maxlength to 75
	*/
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'cf_12324' === $form[ 'ID' ] && 'paragraph' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'maxlength' ] = 75;
	}
	return $attrs;
	}, 20, 3 );

view raw caldera_forms_field_attributes-para-max.php hosted with by GitHub

Set The Date Range For Caldera Forms Date Fields

Many of our fields use data attributes for configuration, for example, the date picker field can change its behaviour by adding data attributes to the input. Here is how you can use this filter to set the date picker field to have Saturday and Sunday disabled:

	<?php
	//Disable saturday and sunday as options for date picker fields
	//see: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=disable#daysofweekdisabled
	add_filter( 'caldera_forms_field_attributes', function( $attrs, $field, $form ){
	if( 'date_picker' === Caldera_Forms_Field_Util::get_type( $field, $form ) ){
	$attrs[ 'data-date-days-of-week-disabled' ] = '06';
	}
	return $attrs;
	}, 20, 3 );

view raw disable-date-picker-days-of-the-week.php hosted with by GitHub

Dynamic Filters

There is also a dynamically named version of this filter for each field type. For example, to modify all paragraph fields, you would use caldera_forms_field_attributes-paragraph or for all hidden fields, you would use caldera_forms_field_attributes-hidden. See this example.

Set a Custom Validation Error Message for One Caldera Forms Field

	<?php
	/**
	* Set a custom validation error message for one Caldera Forms field
	*/
	add_filter( 'caldera_forms_field_attributes', function($attrs, $field){
	//IMPORTANT - Change your field ID
	if ( 'fld1234' === $field[ 'ID'] ) {
	$attrs[ 'data-parsley-error-message' ] = 'You must enter a number between 42 and 88';
	}
	return $attrs;
	}, 10, 2 );

view raw caldera_forms_field_attributes-error-message.php hosted with by GitHub