WordPress使用Elementor时如何将表单输入值传递到另一页面

实现方案 #

方案1：URL参数传递+落地页JS替换（兼容免费版Elementor） #

• 配置Elementor表单提交动作
  打开对应Elementor表单的控件设置面板，在「动作后提交」选项中新增「重定向」动作，重定向地址填写落地页地址并追加手机号参数，格式为https://你的落地页地址?user_phone=[field id="手机号字段ID"]。你可以在表单手机号字段的「高级」标签下找到对应字段ID，替换上述占位内容即可。
• 给WhatsApp按钮设置自定义ID
  打开落地页的Elementor编辑器，选中WhatsApp联系图标按钮，在「高级」标签的「CSS ID」栏填入自定义标识，例如wa_contact_btn。
• 落地页添加JS替换逻辑
  点击落地页Elementor编辑器左下角的站点设置图标，切换到「高级」标签找到「自定义代码」区域，粘贴以下代码后保存：

  window.addEventListener('load', () => {
    const urlParams = new URLSearchParams(window.location.search)
    const userPhone = urlParams.get('user_phone')
    const waBtn = document.getElementById('wa_contact_btn')
    if (userPhone && waBtn) {
      // 清洗手机号格式，剔除非数字字符，保证链接有效性
      const formatPhone = userPhone.replace(/\D/g, '')
      waBtn.setAttribute('href', `https://wa.me/${formatPhone}`)
    }
  })
  

方案2：Elementor Pro动态标签方案（无需手动写代码） #

如果使用的是Elementor Pro版本，可以用动态标签功能简化操作：

• 按照方案1第一步的配置，将用户填写的手机号作为URL参数传递到落地页
• 编辑落地页WhatsApp按钮的链接时，点击链接输入框旁的动态标签图标，选择「请求参数」类型，参数名填写user_phone，将链接拼接为https://wa.me/[动态标签输出内容]即可直接生效。

注意：如果站点安装了安全类插件，需要确认URL参数传递没有被拦截，若出现参数丢失可先临时关闭安全插件逐一排查。另外建议引导用户填写手机号时附带国家码，避免wa.me链接无法正常发起会话。

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