Gravity Form表单ID39的首字段（ID1）自动聚焦实现方案（Hello Elementor主题适用）

针对你使用Hello Elementor主题，想要让ID为39的Gravity Form中ID为1的第一个字段自动获得焦点的需求，这里有几种可靠的实现方案：

一、核心JavaScript代码 #

自动聚焦是前端行为，我们可以用原生JS或jQuery来实现（WordPress默认加载了jQuery，两种方式都可行）：

原生JavaScript版本 #

document.addEventListener('DOMContentLoaded', function() {
  // 定位到表单ID39的字段ID1对应的输入元素
  const targetInput = document.getElementById('input_39_1');
  
  // 确保元素存在再执行聚焦，避免报错
  if (targetInput) {
    targetInput.focus();
  }
});

jQuery版本（更简洁，适合WordPress环境） #

jQuery(document).ready(function($) {
  const $targetInput = $('#input_39_1');
  
  if ($targetInput.length) {
    $targetInput.focus();
  }
});

注：Gravity Forms的字段ID命名规则是input_{表单ID}_{字段ID}，所以这里的input_39_1对应表单ID39、字段ID1的输入框，这个选择器是准确的。

二、代码放置位置（三种可选方案） #

方案1：Elementor自定义HTML模块（仅适用于表单所在的Elementor页面） #

如果你的表单是通过Elementor添加到页面中的：

• 打开对应页面的Elementor编辑器
• 在表单模块的上方或下方添加一个「自定义HTML」模块
• 将代码包裹在<script>标签中粘贴进去，比如：

  <script>
    jQuery(document).ready(function($) {
      const $targetInput = $('#input_39_1');
      if ($targetInput.length) {
        $targetInput.focus();
      }
    });
  </script>
  

• 更新页面即可生效

方案2：Hello Elementor主题自定义JS区域 #

这是全局加载的方式（如果多个页面有这个表单，推荐用这个）：

• 进入WordPress后台 → 外观 → 自定义
• 找到「自定义代码」→「额外JavaScript」选项（Hello Elementor原生支持）
• 直接粘贴JS代码（不需要<script>标签）
• 点击「发布」保存更改

方案3：通过子主题functions.php添加（更高效，仅在指定页面加载） #

如果你想只在包含该表单的页面加载脚本，避免全局加载：

• 进入WordPress后台 → 外观 → 主题文件编辑器 → 选择子主题的functions.php（注意：不要直接修改父主题，避免主题更新丢失代码）
• 粘贴以下PHP代码（替换123为你的表单所在页面的ID）：

  add_action('wp_footer', 'gf_auto_focus_target_field');
  function gf_auto_focus_target_field() {
    // 仅在指定页面加载脚本，替换123为你的页面ID
    if (is_page(123)) {
      ?>
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          const targetInput = document.getElementById('input_39_1');
          if (targetInput) {
            targetInput.focus();
          }
        });
      </script>
      <?php
    }
  }
  

• 点击「更新文件」保存

三、注意事项 #

• 确保目标字段是可聚焦元素（比如文本输入框、文本域，隐藏字段或下拉框需要特殊处理，但普通输入框没问题）
• 测试前请清除Elementor缓存和浏览器缓存，避免旧代码干扰
• 如果表单是通过短代码添加的，以上方案同样适用

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