Wordpress Contact Form 7 Dynamic Mail To Email Content 基于用户输入？

Question

我使用的联系表单有一个“州/省”下拉菜单，它使用管道命令设置动态收件人。因此，例如 NJ 会将电子邮件的收件人设置为“NJEmail@example.com”，而 CA 会将其设置为“CAEmail@example.com”。

但我现在需要的是根据收件人是 NJEmail@example.com 还是 CAEmail@example.com 来动态更改电子邮件的内容。

具体来说，需要添加更多的联系信息，例如CAEmail的电话号码和全名（这封邮件正在发送给用户）。我正在使用带有动态文本扩展插件的 Contact Form 7。我认为这是可能的，但由于我是 Wordpress 的新手，我不确定这是否是我需要直接与 PHP 混淆的东西，或者我是否可以使用动态文本区域（或动态隐藏的文本区域）。

从程序员的角度来看，我会简单地使用 IF 语句。如果提交的是纽约，则写“纽约的联系信息”并发送电子邮件。而且我只会暴力破解可能性（并非每个州都有唯一的接收者。只有少数可能性......大约 10 个）。但我不确定如何在 Wordpress 中使用 Contact Form 7 完成此操作。谁能指出我正确的方向？

非常感谢所有帮助！

Answer 1

我建议您按照此处的指南进行操作：http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=8

该指南张贴在这里，以防链接消失。

1.将 JQuery 脚本添加到您的主题中 从官方来源here 下载并保存jQuery 脚本，并将其保存到您的主题的/js/1.7.1/ 文件夹中。如果您的主题中没有文件夹，您可能需要创建文件夹（例如：./wordpress/wp-content/themes/your-theme-name/js/1.7.1/）

2。使用 Contact Form 7 创建一个简单的表单 这是表单的代码：

<div id="contactForm">
<h2>Send us an email...</h2>
  <ul>
    <li>
      <label for="senderName">Your Name</label>[text* senderName /40 id:senderName class:contactForm "Please type your name"]
    </li>
    <li>
      <label for="awesome">Are you awesome?</label>[select awesome id:awesome include_blank class:contactForm "Hell yes!" "Sometimes" "Nope"]
    </li>
    <li>
      <div class="hide" id="hide1">
      <label for="not-awesome">Tell us why not</label>[text not-awesome /50 id:not-awesome class:contactForm "Tell us why you aren't awesome"]
       </div>
    </li>
    <li>
      <label for="senderEmail">Your Email Address</label>[email* senderEmail /50 id:senderEmail class:contactForm "Please type your email address"]
    </li>
    <li>
      <label for="message" style="padding-top: .5em;">Your Message</label>[textarea* message 80x10 id:message class:contactForm "Please type your message"]
    </li>
  </ul>
  <div id="formButtons">[submit id:sendMessage class:contactForm "Send Email"]
  </div>
</div>

来源：http://pastebin.com/jQeQqRhj

按照我的示例，您需要创建与我相同的简单表单。表单的名称无关紧要，但它需要具有相同的字段和属性。

3.创建一个 jQuery 脚本来隐藏字段 使用以下代码创建一个名为 hidefieldsScript.js 的脚本：

/*! jQuery script to hide certain form fields */

$(document).ready(function() {

    //Hide the field initially
    $("#hide1").hide();

    //Show the text field only when the third option is chosen - this doesn't
    $('#awesome').change(function() {
        if ($("#awesome").val() == "Nope") {
            $("#hide1").show();
        }
        else {
            $("#hide1").hide();
        }
    });
});

来源：http://pastebin.com/eUdEcHhC

创建它并将其直接保存到您的主题的js 文件夹中（例如：./wordpress/wp-content/themes/your-theme-name/js/。

4.为表单添加一些基本样式

将以下代码添加到您主题的 style.css 文件的末尾：

/* =Custom Contact Form with jQuery
----------------------------------------------- */

/* Add curved borders to various elements */
#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
}

/* Style for the contact form and status messages */
#contactForm, .statusMessage {
  color: #666;
  background-color: #ebedf2;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
  background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
  border: 1px solid #aaa;
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  opacity: .95;
}

/* The form dimensions */
#contactForm {
  width: 40em;
  height: 41em;
  padding: 0 1.5em 1.5em 1.5em;
  margin: 0 auto;
}

/* Position the form in the middle of the window (if JavaScript is enabled) */
#contactForm.positioned {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: auto;
}


/* The header at the top of the form */
#contactForm h2 {
  font-size: 2em;
  font-style: italic;
  letter-spacing: .05em;
  margin: 0 0 1em -.75em;
  padding: 1em;
  width: 19.5em;  
  color: #aeb6aa;
  background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
  border-bottom: 1px solid #aaa;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;  
  border-radius: 10px 10px 0 0;
}

/* Give form elements consistent margin, padding and line height */
#contactForm ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#contactForm ul li {
  margin: .9em 0 0 0;
  padding: 0;
}

#contactForm input, #contactForm label {
  line-height: 1em;
}

/* The field labels */
#contactForm label {
  display: block;
  float: left;
  clear: left;
  text-align: right;
  width: 28%;
  padding: .4em 0 .0 0;
  margin: .15em .5em 0 0;
  font-weight: bold;
}

/* The fields */
#contactForm input, textarea , select {
  display: block;
  margin: 0;
  padding: .4em;
  width: 67%;
  font-family: "Georgia", serif;
  font-size: 1em;
  border: 1px solid #aaa;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;    
  border-radius: 5px;
  -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
  background: #fff;
}

#contactForm textarea {
  height: 13em;
  line-height: 1.5em;
  resize: none;
}


/* Place a border around focused fields, and hide the inner shadow */
#contactForm *:focus {
  border: 1px solid #66f;
  outline: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

/* The Send and Cancel buttons */
#contactForm input[type="submit"], #contactForm input[type="button"] {
  float: right;
  margin: 2em 1em 0 1em;
  width: 10em;
  padding: .5em;
  border: 1px solid #666;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  border-radius: 10px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  color: #fff;
  background: #0a0;
  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  opacity: .7;
  -webkit-appearance: none;
  -moz-transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

#contactForm input[type="submit"]:hover,
#contactForm input[type="submit"]:active,
#contactForm input[type="button"]:hover,
#contactForm input[type="button"]:active {
  cursor: pointer;
  opacity: 1;
}

#contactForm input[type="submit"]:active, input[type="button"]:active {
  color: #333;
  background: #eee;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}

#contactForm input[type="button"] {
  background: #f33;
}


/* Some IE7 hacks and workarounds */

<!--[if lt IE 8]>
/* IE7 needs the fields to be floated as well as the labels */
#contactForm input, textarea {
  float: right;
}

#formButtons {
  clear: both;
}

/*
  IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
  The negative margins are half the element's width/height.
*/
#contactForm.positioned, .statusMessage {
  left: 50%;
  top: 50%;
}

#contactForm.positioned {
  margin-left: -20em;
  margin-top: -16.5em;
}
<![endif]-->

来源：http://pastebin.com/7fMA4nDn

我建议这样做，以便您可以正确查看示例。我制作的 CSS 都是特定于 id 元素“contactForm”的，所以它不会污染您的主题设计。

5.将脚本添加到 header.php 在您的主题的header.php 文件中的<head> 类中添加以下行。

<!-- Add jquery script to support Conditional Forms-->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/1.7.1/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript.js"></script>

6.测试表单！ 将 Contact Form 7 中的表单代码粘贴到页面或帖子中，然后查看该页面。您应该会看到一个表单，但其中一个字段将被隐藏。

要查看隐藏字段，只需对问题“你很棒吗？”回答“否”。将出现额外的一行，要求您解释原因！

如何修改示例？ 要使这项工作满足您自己的特定需求，您需要修改第 2 步和第 3 步，以便表单和 jQuery 一起工作以隐藏您希望它们隐藏的字段。您还需要修改第 4 步以获得您喜欢的 CSS 样式。

我建议做我所做的并阅读有关 jQuery 函数的含义的信息。有很多教程可以解释 jQuery 函数，所以去谷歌搜索吧。

稍加阅读，您就可以调整我编写的脚本以处理对checkboxes、radiobutton 等的响应。

Answer 2

您还可以为联系表 7 使用附加组件（条件字段）。 正如您已经提到的“动态隐藏文本区域”。 因此，只有在最终用户选择它的情况下才会出现特定组。 例如： 下拉菜单出现几个选项：NJ、NY、TX...等 根据用户的选择，会出现 NJ“组”。

我不确定我是否明白你的意思。

插件示例：https://wordpress.org/plugins/cf7-conditional-fields/