如何使用 Wordpress 中另一个表单的数据预填充表单中的某些字段？答案

【问题标题】：How do I prefill some fields in a form with data from another form in Wordpress?如何使用 Wordpress 中另一个表单的数据预填充表单中的某些字段？
【发布时间】：2021-12-19 04:13:08
【问题描述】：

我有一个 Wordpress 网站，在其自己的页面上有一个查询表单，它运行良好，但现在营销人员希望我们在主页上放置另一个表单，其中只有姓名和电子邮件地址字段。当用户点击“继续”（提交按钮）时，站点需要加载查询表单页面，并使用主页表单中的数据预先填写名称和电子邮件字段。

我似乎无法在此处或其他网上找到与 Wordpress 专门相关的相关示例。

有人知道怎么做吗？

【问题讨论】：

标签： php wordpress forms

【解决方案1】：

这个答案需要一些 HTML 和 JavaScript 知识。如果您的 WordPress 主题允许您向页面添加自定义 HTML 和 JS，那么这对您有用。

首先，创建您的主页表单并将action属性设置为您的查询表单页面的路径。我假设它是/inquiry。

  <!-- On the home page -->
  <form action="/inquiry">
    <input type="name" name="email">
    <input type="email" name="email">
    <button>submit</button>
  </form>

当用户填写此表单并点击提交时，它将加载您的查询页面并将主页表单数据作为 URL 参数 (/inquiry?name=John&email=test%40domain.com) 放置在 URL 中

因为我们想要的数据在 URL 中，我们可以使用 JavaScript 来提取它并填充查询表单。确保将 JavaScript 放在页面上的表单之后。

  <!-- on the inquiry page -->
  <!-- form -->
  <form id="inquiry">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="text" name="phone">
    <button>submit</button>
  </form>

  <!-- custom javascript -->
  <script>
    // Get the query parameters
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries())

    // Set the query parameters to the relevant form inputs
    if (params.name) {
      // ⭐️ Adjust this selector to select your name field
      document.querySelector('#inquiry [name="name"]').value = params.name 
    }
    if (params.email) {
      // ⭐️ Adjust this selector to select your email field
      document.querySelector('#inquiry [name="email"]').value = params.email 
    }
  </script>

【讨论】：