Elementor多步表单单选框点击后自动跳转下一步实现咨询

步骤1：给表单元素添加自定义CSS类 #

• 打开Elementor编辑器，选中你的多步表单
• 给**「下一步」按钮**添加CSS类：进入按钮的「高级」选项卡，在「CSS类」输入框中填入 auto-next-btn
• 给所有需要触发自动跳转的单选框添加CSS类：进入单选框的「高级」选项卡，在「CSS类」输入框中填入 auto-jump-radio

步骤2：添加自定义JavaScript代码 #

两种添加方式任选其一即可：

方式一：Elementor页面自定义代码

• 点击Elementor编辑器顶部的「页面设置」齿轮图标
• 切换到「自定义代码」选项卡，点击「添加自定义代码」
• 代码类型选「JavaScript」，位置选「页脚」，粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const radios = document.querySelectorAll('.auto-jump-radio');
  const nextBtn = document.querySelector('.auto-next-btn');
  
  if (radios.length && nextBtn) {
    radios.forEach(radio => {
      radio.addEventListener('change', () => nextBtn.click());
    });
  }
});

• 保存代码并更新页面

方式二：WordPress自定义izer

• 进入WordPress后台「外观」→「自定义」
• 找到「额外JavaScript」（部分主题叫「自定义JS」）选项
• 粘贴上述代码，点击「发布」

测试验证 #

保存所有设置后预览页面：点击任意带auto-jump-radio类的单选框，表单会自动跳转到下一步，无需手动点击「下一步」按钮。

注意事项 #

• 确保CSS类名和代码中的完全一致，大小写也要匹配
• 若表单有多步「下一步」按钮，可给每个按钮加不同类名（比如auto-next-btn-step1），再修改代码分别绑定对应元素
• 若代码不生效，检查页面是否有其他JS冲突，或确认类名已正确应用到目标元素上

内容的提问来源于stack exchange，提问作者Jorge Busana Junior