Добавление формы в CF7

how-to-add-form-cf7.md

Добавление формы в CF7

Содержание

1. HTML шаблон
2. Опции письма
3. CSS для файла style.css
4. Настройка Капчи

HTML шаблон

Для закладки "Шаблон формы" в CF7

<div class="b-cf7-form b-cf7-form_contact_us">
  <div class="b-cf7-form__row"> 
    <div class="b-cf7-form__title">Пожалуйста, для точного определения необходимого вам консультанта, заполните все формы.</div>
  </div>
  <div class="b-cf7-form__row"> 
    <label class="b-cf7-form__label b-cf7-form__label_required">Кем вы являетесь?</label>
    <div class="b-cf7-form__field b-cf7-form__field_radio">[radio who-you-are use_label_element  "Агент" "Собственник"]</div>
  </div>
  <div class="b-cf7-form__row">
    <label class="b-cf7-form__label b-cf7-form__label_required">Выберете все интересующие вопросы</label>
    <div class="b-cf7-form__field b-cf7-form__field_radio">[checkbox* issues use_label_element "Порядок проведения сделки" "Документация" "Налогоблажение" "Безопасность" "Сопровождение" "Иное"]</div>
  </div>
  <div class="b-cf7-form__row">
    <label>Кратко опишите свой вопрос, если его нет в списке выше.</label>
    <div class="b-cf7-form__field b-cf7-form__field_textarea">[textarea issues-description]</div>
  </div>
  <div class="b-cf7-form__row">
    <label class="b-cf7-form__label b-cf7-form__label_required">Город</label>
    <div class="b-cf7-form__field b-cf7-form__field_text">[text* ucity]</div>
  </div>
  <div class="b-cf7-form__row">
    <label class="b-cf7-form__label b-cf7-form__label_required">Ваше имя</label>
    <div class="b-cf7-form__field b-cf7-form__field_text">[text* uname]</div>
  </div>
  <div class="b-cf7-form__row">
    <label class="b-cf7-form__label b-cf7-form__label_required">Контактный номер</label>
    <div class="b-cf7-form__field b-cf7-form__field_text">[tel* uphone]</div>
  </div>
  <div class="b-cf7-form__row">
    <label class="b-cf7-form__label b-cf7-form__label_required">E-mail (мы напишем вам, если не сможем дозвониться)</label>
    <div class="b-cf7-form__field b-cf7-form__field_text">[email* email]</div>
  </div>
  <div class="b-cf7-form__row">
    <label>Укажите период времени, когда вам удобно принять звонок</label>
    <div class="b-cf7-form__field b-cf7-form__field_flex b-cf7-form__field_text">с [number day-start min:0 max:23 "9"]  до  [number day-end min:0 max:23 "17"]</div>
  </div>
  <div class="b-cf7-form__row">
    <div class="b-cf7-form__field"></div>
  </div>
  <div class="b-cf7-form__row">
    <div class="b-cf7-form__field">[acceptance acceptance-779 id:acceptance-1] <label for="acceptance-1">Соглашаюсь с обработкой персональных данных</label></div>
  </div>
  <div class="b-cf7-form__row">
    <div class="b-cf7-form__field">[recaptcha]</div>
  </div>
  <div class="b-cf7-form__row">
    <div class="b-cf7-form__field">[submit "Отправить"]</div>
  </div>
</div>

Опции письма

Для закладки "Письмо" в CF7

Поле "От кого": html [uname] <wordpress@domnoproblem-help.ru> (домен нужно заменить на текущий).

Поле "Тело письма":

От: [uname] <[email]>
Город: [ucity]
Телефон: [uphone]
Удобное время для звонка с [day-start] до [day-end]
Кем являетесь: [who-you-are]

Интересующие вопросы:
[issues]

Краткое описание вопроса:
[issues-description]

-- 
Это сообщение отправлено с сайта Добровольная Общественная Организация «Добрый человек» (http://www.domnoproblem-help.ru)

Поставить галочку "Использовать HTML-формат письма".

CSS для файла style.css

Вставлять вот сюда Картинка на Яндекс.Диске

/* ==========================================================================
   Контактная форма записи на консультацию
   ========================================================================== */

.b-cf7-form .wpcf7-list-item label {
    padding-left: 0;
}

.b-cf7-form__title {
    font-size: 15px;
    color: #ff6c36;
    font-weight: bold;
    text-decoration: underline;
}

[id*="wpcf7-"] .wpcf7-response-output {
    display: block;
    float: none;
    border-radius: 3px;
    text-transform: none;
    font-size: 16px;
    background-color: transparent;
    color: #000;
}

[id*="wpcf7-"] .wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 1px solid #398f14;
}

[id*="wpcf7-"] .wpcf7-response-output,
.b-cf7-form__row {
    max-width: 808px;
}

.b-cf7-form__row:not(:first-child) {
    margin-top: 20px;
}

.b-cf7-form__label {
    margin-bottom: 5px;
}

.b-cf7-form__label_required:after {
    content: '*';
    display: inline-block;
    color: red;
    margin-left: 5px;
}

.b-cf7-form__field_flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
}

.b-cf7-form__field_flex .wpcf7-form-control-wrap {
    margin: 0 15px;
}

.b-cf7-form__field_text .wpcf7-form-control,
.b-cf7-form__field_textarea .wpcf7-form-control {
    font-size: 16px;
    border-radius: 2px !important;
    margin-bottom: 0;
}

.b-cf7-form__field_textarea .wpcf7-form-control {
    height: 100px;
}

.b-cf7-form__field_radio .wpcf7-form-control {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
}

.b-cf7-form .wpcf7-radio.wpcf7-not-valid,
.b-cf7-form .wpcf7-checkbox.wpcf7-not-valid {
    border: none !important;
}

.b-cf7-form .wpcf7-not-valid + span.wpcf7-not-valid-tip {
    display: block !important;
    margin-top: 5px;
}

[id*="wpcf7-"] div.wpcf7-validation-errors {
    background-color: transparent;
    border: 1px solid #f7e700;
    border-radius: 3px;
    font-size: 16px;
    text-transform: none;
}

.b-cf7-form .wpcf7-submit {
    background-color: #43A047;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    margin-bottom: 0;
    transition: box-shadow 300ms, color 300ms, background-color 300ms;
}

.b-cf7-form .wpcf7-submit:disabled {
    background-color: #ccc;
}

.b-cf7-form .wpcf7-submit:focus {
    border: none !important;
}

.b-cf7-form .wpcf7-submit:hover {
    box-shadow: 0 0 2px #43A047;
    color: #43A047;
    background-color: transparent;
}

Настройка Капчи

Настройка ключей капчи тут Картинка на Яндекс.Диске