Customising Fluent Forms Fields in WordPress

This tutorial will show you how to dynamically customise Fluent Forms fields in WordPress. You’ll learn how to modify specific form field attributes, including labels and placeholders, and how to incorporate user data and current time into your forms.

What This Code Does

With this code, you can:

1. Target specific forms by their ID
2. Customizs the label of the email field
3. Customise the placeholder of the message field
4. Include dynamic data such as user information and current time
5. Make the text translatable for multilingual sites

The Code

Here’s the code that makes this customization possible:

        <?php

/**
 * Modifies Fluent Forms form fields before rendering.
 *
 * This function customizes the email field label and message field placeholder
 * for specific forms, incorporating user data and current time.
 *
 * @since 15/09/2024
 * @author Taylor Drayson
 *
 * @param array $item The form field item to be modified.
 * @param object $form The form object.
 * @return array The modified form field item.
 */
function tct_before_render_item( $item, $form ) {
    $current_user = wp_get_current_user();
    
    if ( ! $current_user ) {
        return $item;
    }
    
    $target_forms = array( 20, 21 );
    
    if ( ! in_array( $form->id, $target_forms, true ) ) {
        return $item;
    }

    $name = $item['attributes']['name'];

    switch ( $name ) {
        case 'email':
            $item['settings']['label'] = sprintf(
                __( 'Please enter your email %s', 'your-text-domain' ),
                $current_user->user_firstname
            );
            break;
        case 'message':
            $item['attributes']['placeholder'] = sprintf(
                __( 'Type your message here (current time: %s)', 'your-text-domain' ),
                current_time( 'H:i' )
            );
            break;
    }

    return $item;
}
add_filter( 'fluentform/before_render_item', 'tct_before_render_item', 10, 2 );
      
Copy

How It Works

1. The function checks if there’s a logged-in user.
2. It then checks if the current form is one we want to modify (in this case, forms with ID 20 or 21).
3. For the email field, it changes the label to include the user’s first name.
4. For the message field, it sets the placeholder to include the current time.
5. The add_filter() line at the end tells WordPress to run this function every time Fluent Forms is about to display a form field.

How to Use This Code

1. Copy the entire code snippet.
2. Paste it into your theme’s functions.php file or a custom plugin.
3. Replace 'your-text-domain' with your actual text domain for translations.
4. Replace the form IDs in the $target_forms array with the IDs of the forms you want to modify.

Customising the Code

Here are some ways you can modify this code for your needs:

1. Change which forms are affected by modifying the $target_forms array.
2. Modify different fields by adding new cases to the switch statement.
3. Change what data is displayed by modifying the text inside the sprintf() functions.

For example, to modify the date field, you could add:

        case 'date':
    $item['settings']['label'] = sprintf(
        __( 'Choose your date (Today is %s)', 'your-text-domain' ),
        current_time( 'd-m-Y' )
    );
    break;
      
Copy

Exploring Available Data

If you want to see what other data is available to modify, you can use this code:

        echo '<pre>';
var_dump( $item );
echo '</pre>';
      
Copy

Add this inside the function to see the full structure of the $item array. Remember to remove this before making your site live!

By customising your Fluent Forms fields with this method, you can create more dynamic, user-friendly forms that adapt to your specific needs.