Dynamic Character Limits in Gravity Forms with Targeted Loading

Managing character limits in form fields is a common need, especially for maintaining data consistency and user experience.

With this dynamic solution for Gravity Forms, you can easily apply real-time character validation across multiple forms and fields, all while ensuring scripts are only loaded on pages where the specific form appears. This approach not only enhances functionality but also improves performance by avoiding unnecessary script loading.

Whether you’re limiting input lengths or providing live feedback to users, this scalable method ensures your forms remain efficient and user-friendly. Perfect for handling diverse forms and field configurations in a lightweight and maintainable way!

Add this code to your mu-plugin:

<?php
/**
 * Limit Gravity Form Field Length and display alert message
 */


// parameters
$char_limit = 100;
$form_id_limit = 5;
$field_id_limit = 29;
$field_char_txt = "caractères";
$field_message = "Ce champ ne peut pas dépasser";
add_filter('gform_field_validation_".$form_id_limit."_".$field_id_limit."', 'limit_gravity_field_length', 10, 4);
function limit_gravity_field_length($result, $value, $form, $field) {
	global $char_limit, $form_id_limit, $field_id_limit, $field_message, $field_char_txt;
	if (strlen($value) > $char_limit) {
		$result['is_valid'] = false;
		$result['message'] = $field_message." ".$char_limit." ".$field_char_txt;
	}
	return $result;
}
add_action('gform_enqueue_scripts', function ($form, $is_ajax) {
	global $char_limit, $form_id_limit, $field_id_limit, $field_char_txt;
	if ($form['id'] == $form_id_limit) {
		wp_enqueue_script(
			'gf-live-character-count',
			plugin_dir_url(__FILE__) . 'gf-live-character-count.js',
			['jquery'],
			'1.0',
			true
		);
		wp_localize_script('gf-live-character-count', 'gfCharLimit', [
			'formId'    		=> $form_id_limit,
			'fieldId'   		=> $field_id_limit,
			'charLimit' 		=> $char_limit,
			'fieldMessage'	=> $field_char_txt,
		]);
	}
}, 10, 2);
?>

And is the same directory than your plugin, create a file ‘gf-live-character-count.js’ and add this:

jQuery(document).ready(function ($) {
    const formId = gfCharLimit.formId;
    const fieldId = gfCharLimit.fieldId;
    const charLimit = gfCharLimit.charLimit;
    const fieldMessage = gfCharLimit.fieldMessage;

    const fieldSelector = `#input_${formId}_${fieldId}`;
    const counterSelector = `#char_count_${formId}_${fieldId}`;

    function addCharacterCounter() {
        if (!$(counterSelector).length) {
            $(fieldSelector).after(`<div id="${counterSelector.slice(1)}" style="font-size: 12px; color: #555;">0 / ${charLimit} ${fieldMessage}</div>`);
        }
    }

    function updateCharacterCounter() {
        const length = $(fieldSelector).val().length;
        $(counterSelector).text(`${length} / ${charLimit} ${fieldMessage}`);

        if (length > charLimit) {
            $(fieldSelector).val($(fieldSelector).val().substring(0, charLimit));
            $(counterSelector).text(`${charLimit} / ${charLimit} ${fieldMessage}`);
        }
    }

    function attachInputEvent() {
        $(fieldSelector).off('input.characterCounter');
        $(fieldSelector).on('input.characterCounter', function () {
            updateCharacterCounter();
        });
    }

    function initializeCounter() {
        addCharacterCounter();
        updateCharacterCounter();
        attachInputEvent();
    }

    initializeCounter();

    $(document).on('gform_post_render', function (event, form_id) {
        if (form_id == formId) {
            initializeCounter();
        }
    });
});