Wordpress联系表格7动态邮件根据用户输入发送电子邮件内容？-Java 学习之路

我正在使用的联系表单有一个“州/省”下拉菜单，该菜单使用管道命令设置动态收件人 . 因此，例如，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中实现这一点 . 任何人都能指出我正确的方向吗？

非常感谢所有帮助！

2 回答

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

如果链接消失，指南将发布在此处 .

1. Add the JQuery script to your theme 从官方来源here下载并保存jQuery脚本，并将其保存到主题的 /js/1.7.1/ 文件夹中 . 您可能需要创建文件夹（如果它们尚未存在于您的主题中）（例如： ./wordpress/wp-content/themes/your-theme-name/js/1.7.1/ ）

2. Create a simple form using 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. Create a jQuery script to hide fields 使用以下代码创建名为 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. Add some basic styling for the form

将以下代码添加到主题的 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. Add the scripts to your 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. Test out the form! 将联系表格7中的表单代码粘贴到页面或帖子中，然后查看页面 . 您应该看到一个表单，但其中一个字段将被隐藏 .

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

How do you modify the example? 为了满足您自己的特定需求，您需要修改步骤2和3，以便表单和jQuery一起工作以隐藏您希望它们的字段 . 您还需要修改第4步以获得您喜欢的CSS样式 .

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

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

回复于 2024-04-29T08:55:54+08:00

2

您还可以使用联系表单7的附加组件（条件字段） . 正如您已经为"Dynamic Hidden Text Areas"所提到的那样 . 因此，只有在最终用户选择它时才应出现特定组 . E.g.: 下拉菜单出现了几个选项：NJ，NY，TX ......等根据用户的选择，NJ "group"会出现 .

我不确定我是否有你的意思 .

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

回复于 2024-04-29T08:55:54+08:00

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

2 回答

相关问题