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

Posted 2023-01-20

我有一个Wordpress网站，该页面上有很多项目。当用户单击他想要的项目时，页面将打开。在此页面上有一个按钮“联系”。我要实现的事情是，当用户单击联系按钮时，将打开带有表单的下一页，并且根据该项目页面上的电子邮件预先选择了选择菜单。有人可以帮我吗？

这里是单个帖子页面的某些部分，单击该按钮可以转到表单页面：

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

这是我的联系表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|[e-mail]" "Office 2|[e-mail]" "Office 3|[e-mail]" "Office 4|[e-mail]"]
</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>

我想要实现的是，当用户点击联系按钮时，打开带有表单的下一页，并且根据该项目页面上的电子邮件预先选择了选择菜单。有人可以帮我吗？

答案

好吧，因此，您首先要通过按钮将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;
    

    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”，“ Office 2”]

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