Wordpress：在 jQuery 按钮上单击 Contact Form 7 菜单中的预选选项

Question

我有一个 Wordpress 网站，其中有一个包含很多项目的页面。当用户点击他想要的项目时，页面将打开。在此页面中有一个按钮 "Contact"。我想要实现的是，当用户点击联系按钮时，打开带有表单的下一页，并且 select 菜单根据此项目页面上的电子邮件预先 selected。有人可以帮我吗？

这是单个post页面的一些部分，点击进入表单页面的按钮在哪里：

<button class="btn">
 <span>Contact</span>
</button>

此页面有很多信息，其中还提到了此页面此特定项目的电子邮件地址：

<p class="email">Email: <a href="mailto:<?php the_field('contact_email'); ?>">
 <?php the_field('contact_email'); ?>
</a></p>

这是我的 Contact Form 7 代码：

<div class="contact-form">
<div class="form-group">
  [text* your-name class:form-control placeholder "Name"] 
</div>
<div class="form-group">
  [text* your-name class:form-control placeholder "Company"] 
</div>
<div class="form-group">
  [email* your-email class:form-control placeholder "Email"] 
</div>
<div class="form-group">
  [select* menu-105 class:form-control "Office 1|email1@example.com" "Office 2|email2@example.com" "Office 3|email3@example.com" "Office 4|email4@example.com"]
</div>
<div class="form-group">
  [text your-subject class:form-control placeholder "Subject"] 
</div>
<div class="form-group">
  [textarea your-message x3 class:form-control placeholder "Message"] 
</div>
<div class="form-group form-check">
 [acceptance acceptance-955 optional] By ticking this box you agree to this information here in <a href="https://www.google.com" target="_blank">privacy policy</a>.[/acceptance]
</div>
<div class="btn-container-right">
<div class="btn-wrapper">
  [submit "Send" class:btn-sm]
</div>
</div>
</div>

我想要实现的是，当用户点击联系按钮时，会打开带有表单的下一页，并且 select 菜单会根据此项目页面上的电子邮件进行预编辑select .有人可以帮我吗？

Answer 1

好的...所以首先，您要将 URL 参数从按钮传递到联系表单。

所以您更新后的 link 是，（您将 space URL 编码为 %20）

yourdomain.com/contact-form/?email=office%201

然后将此脚本添加到您的主题 .js 文件或任何您可以的地方。

jQuery(document).ready(function($){
    $.urlParam = function (name) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                          .exec(window.location.search);

        return (results !== null) ? results[1] || 0 : false;
    }
    // Since above function returns false if blank, check if email $_GET param is entered
    if ( false !== $.urlParam('email')){
        $('select[name="your-email"]').val(decodeURIComponent($.urlParam('email')))
            .change(); // set select name to the name of your form field in CF7
    }
});

decodeURIComponent 仅当您使用 URL 编码参数时...这是因为您的选择 "Office 1" 中有 space，"Office 2"

将 [name=] 设置为您的 CF7 字段的名称。

Wordpress：在 jQuery 按钮上单击 Contact Form 7 菜单中的预选选项

Wordpress: On jQuery button click preselect option in Contact Form 7 menu

contact-form

contact-form-7