Gravity Forms：如何为姓名字段的名和姓添加不同CSS类？

完全可以实现给Name字段下的First Name和Last Name分别添加不同的CSS类，主要有两种可靠方式：

方法一：使用后端Filter Hook（推荐） #

利用Gravity Forms内置的gform_field_input filter hook，直接修改字段的HTML输出，给子输入框插入自定义类。

示例代码（添加到主题的functions.php或自定义插件中）：

add_filter( 'gform_field_input', 'add_custom_classes_to_name_subfields', 10, 5 );
function add_custom_classes_to_name_subfields( $input, $field, $value, $lead_id, $form_id ) {
    // 仅针对类型为"name"的字段
    if ( $field->type !== 'name' ) {
        return $input;
    }

    // 给First Name输入框添加自定义类
    $input = str_replace( 'class="', 'class="first-name-custom ', $input );
    
    // 给Last Name输入框添加自定义类
    // 注意：子字段的ID后缀（比如_6）可能因Name字段的布局设置不同而变化，需查看页面源码确认
    $last_name_id = 'input_' . $form_id . '_' . $field->id . '_6';
    $input = str_replace( 'id="' . $last_name_id . '"', 'id="' . $last_name_id . '" class="last-name-custom ', $input );

    return $input;
}

提示：可以通过浏览器开发者工具查看页面源码，确认First Name和Last Name输入框的具体ID，调整代码中的后缀编号。

方法二：前端JavaScript实现 #

如果不想修改PHP代码，也可以通过JS动态给子字段添加类，适合快速测试或非开发场景：

示例代码（添加到主题自定义JS或Gravity Forms的自定义脚本区域）：

jQuery(document).ready(function($) {
    // 给First Name输入框加类
    $('.gfield_name_first input').addClass('first-name-custom');
    // 给Last Name输入框加类
    $('.gfield_name_last input').addClass('last-name-custom');
});

注意：这种方式可能会因为页面加载顺序导致短暂的样式闪烁，后端hook方法更稳定。

内容的提问来源于stack exchange，提问作者Tahi Reu