如何用JavaScript在前端获取Gravity Forms自定义字段dev_api_key的值

要在前端获取自定义的dev_api_key字段值，需要先通过PHP将该值传递到前端环境，再通过JavaScript钩子读取，具体操作如下：

1. 将自定义字段值注入到前端全局变量 #

添加以下PHP代码，利用gform_pre_render钩子把表单的dev_api_key值输出为页面的全局JavaScript变量：

add_action( 'gform_pre_render', function( $form ) {
    // 检查表单是否包含dev_api_key设置
    if ( isset( $form['dev_api_key'] ) && ! empty( $form['dev_api_key'] ) ) {
        ?>
        <script type="text/javascript">
            // 定义全局变量存储API Key
            window.gformDevApiKey = '<?php echo esc_js( $form['dev_api_key'] ); ?>';
        </script>
        <?php
    }
    return $form;
} );

这里用esc_js()确保输出内容符合JavaScript语法规范，避免XSS风险。

2. 在前端JavaScript钩子中读取值 #

通过gform_post_render钩子或其他前端事件获取全局变量的值，示例代码如下：

jQuery(document).on('gform_post_render', function(event, formId, currentPage){
    // 读取全局变量中的API Key
    var apiKey = window.gformDevApiKey;
    if (apiKey) {
        // 这里可执行自定义操作，比如打印到控制台测试
        console.log('Dev API Key:', apiKey);
    }
});

你也可以直接在表单渲染后的任意JS逻辑中访问window.gformDevApiKey，不局限于gform_post_render钩子。

补充说明 #

• 如果表单是AJAX加载的，gform_post_render会在每次表单渲染（包括分页、提交后重新渲染）时触发，确保值能被正确获取。
• 确保PHP代码的钩子优先级设置合理，避免被其他代码覆盖。

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