Wordpress Контактная форма 7 Динамическая почта для электронной почты Содержимое на основе ввода пользователя?

Question

В контактной форме, которую я использую, есть раскрывающееся меню "Штат / провинция", в котором для указания динамического получателя используется команда канала. Так, например, NJ установит для получателя письма значение "[e-mail]", а для CA - "[e-mail]".

Но сейчас мне нужно, чтобы содержимое письма динамически изменялось в зависимости от того, является ли получатель [e-mail] или [e-mail].

В частности, необходимо добавить дополнительную контактную информацию, такую ​​как номер телефона CAEmail и его полное имя (это электронное письмо отправляется пользователю). Я использую контактную форму 7 с надстройкой динамического расширения текста. Я думаю, что это возможно, но так как я новичок в Wordpress, я не уверен, что мне нужно напрямую связываться с PHP, или я могу решить эту проблему, используя некоторую сложную работу с динамическими текстовыми областями (или динамическими Скрытые текстовые области).

С точки зрения программиста, я бы просто использовал операторы IF. Если отправка отправлена ​​в Нью-Йорк, напишите "Контактная информация Нью-Йорка" и отправьте электронное письмо. И я бы просто перебил возможности (не у каждого государства есть уникальный получатель. Есть только несколько возможностей... около 10). Но я не уверен, как это сделать в Wordpress, используя контактную форму 7. Может ли кто-нибудь указать мне правильное направление?

Вся помощь очень ценится!

Answer 1

Я бы порекомендовал следовать этому руководству здесь: http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=8

Руководство размещено здесь на случай, если эта ссылка исчезнет.

1. Добавьте скрипт JQuery в свою тему. Загрузите и сохраните скрипт jQuery из официального источника здесь и сохраните его в /js/1.7.1/ папка для вашей темы. Вам может понадобиться создать папки, если они еще не созданы для вашей темы (пример: ./wordpress/wp-content/themes/your-theme-name/js/1.7.1/)

2. Создайте простую форму, используя контактную форму 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. Добавьте следующие строки в ваш <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 на страницу или сообщение, затем просмотрите страницу. Вы должны увидеть форму, но одно из полей будет скрыто.

Чтобы увидеть скрытое поле, просто ответьте "Нет" на вопрос "Вы классные?". Появится дополнительная строка с просьбой объяснить, почему!

Как вы изменили пример? Чтобы это работало для ваших собственных конкретных нужд, вам нужно изменить шаги 2 и 3, чтобы форма и jQuery работали вместе, чтобы скрыть поля, которые вы хотите, чтобы они были. Вам также нужно будет изменить шаг 4, чтобы получить стиль CSS, который вы предпочитаете.

Я предлагаю сделать то, что я сделал, и прочитать о том, что означают функции jQuery. Есть множество учебников, объясняющих функции jQuery, так что получите Googling.

Немного прочитав, вы можете настроить сценарий, к которому я написал, для обработки ответов на флажки, переключатели и т. Д.

Answer 2

Вы также можете использовать надстройку (условные поля) для контактной формы 7. Как вы уже упоминали для "Динамических скрытых текстовых областей". Таким образом, конкретная группа должна появляться только в том случае, если конечный пользователь выберет ее.Например: в выпадающем меню появляется несколько опций: NJ, NY, TX... и т. Д. В зависимости от выбора пользователя, появится NJ "группа".

Я не уверен, что понял, что ты имел в виду.

Пример плагина: https://wordpress.org/plugins/cf7-conditional-fields/