A user in the Fluent Form Facebook group wanted to add their own autocomplete attributes to form fields. Luckily, Fluent Forms makes it really easy for us to add any attributes to input fields.
Snippet
Add the code below to functions.php or code snippet plugin.
PHP
/** * Modify text input field attributes for Fluent Form rendering. * * This function adds the 'autocomplete' attribute to text input fields with the value 'country' * when rendering a Fluent Form. * * @since 27/11/2023 * @author Taylor Drayson * * @param array $field The field properties. * @param array $form The form properties. * @return array The modified field properties. */ add_filter( 'fluentform/rendering_field_data_input_text', 'tct_add_country_autocomplete', 10, 2 ); function tct_add_country_autocomplete( $field, $form ) { $form_id = 1; // Change to your form ID $target_field = 'my_field'; // Change to the name attribute of your field // Check if our form is equal to $form_id if($form->id != $form_id) { return $field; } // Check if our field is equal to $target_field if (\FluentForm\Framework\Helpers\ArrayHelper::get($data, 'attributes.name') != $target_field) { return $field; } $field['attributes']['autocomplete'] = 'country'; return $field; }Copy
Explanation:
- We are hooking into the input text filter –
fluentform/rendering_field_data_input_text - Next we run some checks to see if we are targeting the right form and field using the
$form_idand$target_fieldvariables. - If we fail either of the checks, we return the unmodified $field value. Otherwise we continue.
- We can then add a new array element to the
$field['attributes']array.- This is in the format: [ATTRIBUTE] = VALUE
- You can add as many attributes as you need.
How to Use the Hook for Other Elements and Attributes:
To modify attributes for other form elements, follow these steps:
- Find the field element name you want to modify: see similar filters for other elements
- Create a hook using the following format:
- Hook name example:
fluentform/rendering_field_data_{element_name}
- Hook name example:
- Use the provided function to modify the desired attributes for that element.
- Example: add_filter( ‘fluentform/rendering_field_data_{element_name}’, ‘your_custom_function’, 10, 2 );
- Inside your custom function, modify the attributes as needed using the format:
$field['attributes']['ATTRIBUTE_NAME'] = ATTRIBUTE_VALUE;
- You can repeat these steps for multiple elements and attributes as required.
Remember to check the Fluent Form documentation for specific field element names and their available attributes.
Similar filters
Below is an example of similar filters you can use for other elements
JSON
/* * Common Filter hook names * Text/Mask: fluentform/validate_input_item_input_text * Email: fluentform/validate_input_item_input_email * Textarea: fluentform/validate_input_item_textarea * Numeric: fluentform/validate_input_item_input_number * Range Slider: fluentform/validate_input_item_rangeslider * Address: fluentform/validate_input_item_address * Country Select: fluentform/validate_input_item_select_country * Select: fluentform/validate_input_item_select * Radio: fluentform/validate_input_item_input_radio * Checkbox: fluentform/validate_input_item_input_checkbox * Website URL: fluentform/validate_input_item_input_input_url * Date: fluentform/validate_input_item_input_input_date * Image Upload: fluentform/validate_input_item_input_image * File Upload: fluentform/validate_input_item_input_file * Phone Field: fluentform/validate_input_item_phone * Color Picker: fluentform/validate_input_item_color_picker * Net Promoter Score: fluentform/validate_input_item_net_promoter_score * Password: fluentform/validate_input_item_input_password * Ratings: fluentform/validate_input_item_ratings */Copy