Wordpress Contact Form 7 根据推荐 URL 动态自动选择下拉字段答案

【问题标题】：Wordpress Contact Form 7 dynamically autoselect dropdown field based on referral urlWordpress Contact Form 7 根据推荐 URL 动态自动选择下拉字段
【发布时间】：2023-03-25 14:51:02
【问题描述】：

我一直在研究这两个答案：

Wordpress Contact Form 7 dynamically select dropdown field based on url

Auto-select fields in Contact form 7 based on referral link

目前，以下代码粘贴在 /contact 页面的 CSS 块中：

(function($){
$(document).ready(function() {

  //determine the previous page,
  let page = document.referrer, opt='';


  switch(true){
    case page.indexOf(’douglas-h-flint’)>0:
      opt=‘douglashflint’;
      break;
    case page.indexOf(‘john-f-connolly’)>0:
      opt=‘johnfconnolly’;
      break;
    case page.indexOf(‘david-l-walker-jr’)>0:
      opt=‘davidlwalkerjr’;
      break;
  }

  $('select[name=“select-recipient”]’).find('option[value="'+opt+'"]').prop('selected', 'selected');
})
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select-recipient”>
 <option value="">General Inquiry</option>
 <option value=“douglashflint”>Douglas H. Flint</option>
 <option value=“johnfconnolly”>John F. Connolly</option>
 <option value=“davidlwalkerjr”>David L. Walker, Jr.</option>
</select>

我的网站是：https://c7n.f22.myftpupload.com/

我的目标是当有人从这些人的个人页面之一直接导航到 /contact 页面时 - (/attorneys/douglas-h-flint) 或 (/attorneys/john-f- connolly) 或 (/attorneys/david-l-walker-jr) — 联系表单中的“查询：”下拉字段将自动选择他们各自的姓名，并且当有人从任何其他页面导航到 /contact 页面时网站，“查询方式：”下拉字段将保持默认为“一般查询”选项。

我错过了什么？还是我做错了什么？

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery wordpress contact-form-7

【解决方案1】：

观看您拥有的有趣的时尚名言（‘、’、“ 和 ”）。那些会破坏JS。也将它们从 HTML 标记和 CSS 中删除。

除此之外，.prop() 方法的第二个参数的预期值是一个布尔值（true 或 false），因此应该是：

$('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true);

最后，读起来还挺吓人的下面的代码是粘贴在CSS块里的……把这段代码放在页面的<head>标签里面：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

  //determine the previous page,
  let page = document.referrer, opt = '';

  switch(true){
    case page.indexOf('douglas-h-flint') > -1:
      opt = 'douglashflint';
      break;
    case page.indexOf('john-f-connolly') > -1:
      opt = 'johnfconnolly';
      break;
    case page.indexOf('david-l-walker-jr') > -1:
      opt = 'davidlwalkerjr';
      break;
  }

  $('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true);
})
</script>

【讨论】：

【解决方案2】：

虽然另一个答案是一个很好的答案，但它并不完全可用 WordPress。由于这是联系表格 7 和 WordPress，因此存在一些问题。

不要以这种方式重新添加 jQuery <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> jQuery 库已经包含在 WordPress 中。
jQuery 是在no conflict 模式下加载的，所以你必须先用jQuery 而不是$ 进行初始化
您可以像一样将脚本添加到联系表格 7 中，尽管这不是绝对最好的方法。它可以在不向另一个文件添加一堆 javascript 的情况下工作。还有一些简单的方法可以使用 wp_add_inline_script 有条件地正确地将您的脚本排入队列。

因此，如果您将以下内容添加到您的联系表单中...它将起作用。

<script type="text/javascript">
jQuery(function($) {
  //determine the previous page,
  let page = document.referrer, opt = '';
  switch(true){
    case page.indexOf('douglas-h-flint') > -1:
      opt = 'douglashflint';
      break;
    case page.indexOf('john-f-connolly') > -1:
      opt = 'johnfconnolly';
      break;
    case page.indexOf('david-l-walker-jr') > -1:
      opt = 'davidlwalkerjr';
      break;
  }
  $('select[name="select-recipient"]').find('option[value="'+opt+'"]').prop('selected', true);
});
</script>

【讨论】：

谢谢@Howard E！这帮助我填补了空白，以完成剩下的工作。您的解决方案运行良好，除了我将 opt = "douglashflint" 值换成了我在 CF7 的下拉列表中实际列出它们的方式。感谢专业知识。