Wordpress Contact Form 7 基于引荐动态自动选择下拉字段 url

Question

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

目前，下面的代码粘贴在 /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 页面时，“查询方式:" 下拉字段将保持默认为“一般查询”选项。

我错过了什么？或者我做错了什么？

提前感谢您的帮助！

Answer 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>

Answer 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 而不是 $
您可以像这样将您的脚本添加到您的 contact form 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>

Wordpress Contact Form 7 基于引荐动态自动选择下拉字段 url

Wordpress Contact Form 7 dynamically autoselect dropdown field based on referral url

javascript

wordpress

jquery

contact-form-7