Question

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

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

具体来说，需要添加的是更多联系信息，例如CAEmail的电话号码和全名（此电子邮件将发送给用户）。我正在使用Contact Form 7和动态文本扩展插件。我认为这是可能的，但由于我是Wordpress的新手，我不确定这是否需要直接与PHP混淆或者如果我可以使用动态文本区域（或动态文本区域）进行一些花哨的步法来解决这个问题隐藏文本区域。）

从程序员的角度来看，我只会使用IF语句。如果提交的是NY，则写下“NY的联系信息”并发送电子邮件。而且我会强迫这些可能性（不是每个州都有一个独特的接受者。只有少数几种可能性......大约10个）。但是我不确定如何使用Contact Form 7在Wordpress中实现这一点。任何人都可以指出我正确的方向吗？

非常感谢所有帮助！

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元素＆＃34; contactForm＆＃34;所以它不会污染你的主题设计。

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

<!-- 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。测试表格！将联系表单7中的表单代码粘贴到页面或帖子中，然后查看页面。您应该看到一个表单，但其中一个字段将被隐藏。

要查看隐藏字段，只需回答＆＃34; Nope＆＃34;问题＆＃34;你真棒吗？＆＃34;。将出现一条额外的行，要求您解释原因！

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

我建议做我做的事情并阅读jQuery函数意味着什么。有很多教程可以解释jQuery函数，所以请使用Googling。

通过一点阅读，您可以调整我写的脚本来处理对checkboxes，radiobutton等的回复。

Answer 2

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

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

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

Wordpress联系表格7动态邮件根据用户输入发送电子邮件内容？

2 个答案: