如何实现首页表单捕获邮箱并跳转后自动填充目标表单？

嘿，这个需求其实很好实现，核心思路就是把用户输入的邮箱通过URL参数传递到目标页面，再在目标页面读取参数填充到对应字段。下面是具体的步骤和代码示例：

第一步：处理首页的表单提交逻辑 #

首先，你需要阻止首页表单的默认提交行为，手动获取用户输入的邮箱，然后构造带邮箱参数的跳转链接。这里用原生JavaScript来实现，兼容性好且不需要依赖第三方库：

// 监听首页表单的提交事件（替换成你实际的表单ID）
document.getElementById('hero-demo-form').addEventListener('submit', function(e) {
  // 阻止浏览器默认的表单提交行为
  e.preventDefault();
  
  // 获取邮箱输入框的值（替换成你实际的邮箱输入框ID）
  const userEmail = document.getElementById('demo-email').value.trim();
  
  // 可选：添加邮箱格式验证，提升用户体验
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(userEmail)) {
    alert('请输入有效的商务邮箱地址哦');
    return;
  }
  
  // 构造跳转URL，用encodeURIComponent处理特殊字符，避免参数传递出错
  const targetPageUrl = `https://get.scalr.com/demo-request/?email=${encodeURIComponent(userEmail)}`;
  
  // 跳转到目标页面
  window.location.href = targetPageUrl;
});

第二步：在目标页面自动填充邮箱 #

接下来，在演示请求页面（跳转后的页面）添加一段JavaScript，用来读取URL中的邮箱参数，并填充到对应的“Business Email”字段：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 从URL查询参数中提取邮箱值
  const urlParams = new URLSearchParams(window.location.search);
  const receivedEmail = urlParams.get('email');
  
  // 如果获取到邮箱值，填充到对应的输入框（替换成你实际的目标输入框ID）
  if (receivedEmail) {
    document.getElementById('business-email-field').value = decodeURIComponent(receivedEmail);
  }
});

注意事项 #

• 替换元素ID：上面代码中的表单ID、邮箱输入框ID都是示例，记得替换成你网站实际使用的ID。
• 参数编码：一定要用encodeURIComponent和decodeURIComponent处理邮箱值，避免邮箱里的特殊字符（比如@、.等）导致参数传递异常。
• 备选方案（纯HTML）：如果首页表单和目标页面的邮箱字段name属性一致（比如都叫email），你也可以直接设置首页表单的action为目标页面URL，method为GET，这样浏览器会自动把邮箱参数带到目标页面。不过这种方式依赖浏览器的自动填充行为，稳定性不如JS方案可靠。

内容的提问来源于stack exchange，提问作者Cristian Țurcanu