Contact form 7 делаем простою форму

Пример простой адаптивной формы на самом популярном wordpress плагине Contact form 7.

Для начала отключим обертывание полей тегом <p>. Для этого добавляем следующий код в файл темы function.php

add_filter('wpcf7_autop_or_not', '__return_false');

Шаблон формы и стилизация

Далее идем админсукю часть плагина и добавляем нужные нам поля. Стоит обратить внимание, что cf7 генерирует дополнительные теги для оборачивания в них input’ов, но не делает этого для кнопкиотправки формы, поэтому обернем кнопку тегом сами. Плюс к этому в нашем контейнере с кнопкой окажется и ajax.loader, который показывается во время отправки формы.

В качестве чекбокса я использовал тег [acceptance][/ acceptance ] при использовании которого кнопка «отправить»будет не активной, пока пока пользователь не поставит галочку и не согласится с правилами обработки персональных данных.

Обратите внимание, что пользователь должен дать согласие на обработку персональных данных. Поэтому в форме обязательно должна быть ссылка на страницу с политикой конфиденциальности, чтобы не нарушать закон «О персональных данных» № 152-ФЗ и не получить солидный штраф

Добавляем класс .simple-cf7 на основе которого будем стилизовать нашу форму.

[contact-form-7 id="5" html_class="simple-cf7" title="Контактная форма 1"]

В итоге мы получаем первоначальный набор шорткодов формы на основе которого сделаем сделаем внешний вид в файле стилей.

После чего можем приступить к написанию стилей для нашей формы.
В итоге наша форма приобретает следующий вид:

cf7 форма

Обрабатываем события

Форма почти готова, но осталось настроить и стилизовать вывод сообщений об ошибках и не заполненных полях. Допустим, если попытаться пустую форму, то cf7 выведет уведомления, как по мне это выглядит не красиво, потому что ломает-изменяет пропорции формы добавляя эти уведомления.

cf7 валидация полей ошибка

Поэтому воспользуемся стандартными опциями формы и изменим немного шаблон обернув обязательные поля (отмечены звездочкой внутри шорткода *) в тег <span class=»use-floating-validation-tip»></span>, чтобы нотификации не ломали верстку форму.

Теперь сообщения о незаполненных полях выглядят куда более приятно и не ломают внешний вид формы. Так же можно добавить стилизацию обводки добавив следующий код в CSS файл:

.simple-cf7 .wpcf7-not-valid {
      border: 1px solid #ff4a4a;
}

Уведомляем об отправке

Заключительная часть в создании нашей формы это уведомить пользователя об успешной отправке. Есть моного различных вариантов. В этом примере я сделаю простой overlay с сообщеним. Для этого нужно добавить следующую строчку в шаблон формы

<div class="simple-cf7__overlay">Сообщение успешно отправлено!</div>

Здесь используем так же опции формы, а в частности классом .sent, который добавляется в тег формы после отправки,благодаря чему можем вывести сообщение об отправке не прибегая к помощи javascript.

Простая форма contacty form 7 gif

Весь код формы

Шорткоды с html:

<h4 class="simple-cf7__title">Контактная форма</h4>
[text text-393 placeholder "Имя"]
<span class="use-floating-validation-tip">[email* email-237 placeholder "Email"]</span>
<span class="use-floating-validation-tip">[textarea* textarea-184 3x3 placeholder "Сообщение"]</span>
<div class="simple-cf7__cond">
[acceptance acceptance-574]Нажимая на кнопку «Отправить», я соглашаюсь c условиями <a href="https://kinganton.ru/privacy">политики конфиденциальности</a>[/acceptance]
</div>
<div class="simple-cf7__submit-wrap">[submit "Отправить"]</div>
<div class="simple-cf7__overlay">Сообщение успешно отправлено!</div>

Стили:

/* Контейнер */
.simple-cf7 {
  max-width: 390px;
  width: 100%;
  background-color: #fbfbfb;
  border: 2px solid #f5f5f5;
  padding: 22px 30px 30px;
  margin: 0 auto;
  position: relative;
  font-family: sans-serif;
}
/* Заголовок */
.simple-cf7__title {
  text-align: center;
  font-size: 24px;
  color: #656565;
  line-height: 1.25;
  margin: 0 0 25px;
  text-transform: uppercase
}
/* Обертки полей */
.simple-cf7 > span {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px
}
/* Стилизация полей */
.simple-cf7 input {
  border: 1px solid #e0e0e0;
  height: 42px;
  padding-left: 18px;
  width: 100%;
  border-radius: 0
}
/* Стилизация текстового поля */
.simple-cf7 textarea {
  border: 1px solid #e0e0e0;
  resize: none;
  min-height: 110px;
  padding: 13px 18px 18px;
  width: 100%;
  margin-bottom: -7px
}
/* Стилизация "отправить" */
.simple-cf7 input[type=submit] {
  background-color: #737373;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  display: block;
  height: 48px
}
.simple-cf7 input[type=submit]:disabled {
  background-color: #e0e0e0
}

.simple-cf7__submit-wrap {
  position: relative
}

.simple-cf7__submit-wrap span.ajax-loader {
  position: absolute;
  top: 17px;
  left: 5px;
  background-image: url(../img/ajax-loader.png);
  -webkit-animation: 1s linear infinite spinAjax;
  animation: 1s linear infinite spinAjax
}
@-webkit-keyframes spinAjax {
  from {
    -webkit-transform: rotate(0)
  }
  to {
    -webkit-transform: rotate(360deg)
  }
}
@keyframes spinAjax {
  from {
    -webkit-transform: rotate(0)
  }
  to {
    -webkit-transform: rotate(360deg)
  }
}
/* Политика конфиденциальности и стилизация чекбокса */
.simple-cf7__cond {
  font-size: 12px;
  display: inline-block;
  margin-bottom: 23px
}
.simple-cf7__cond a {
  text-decoration: underline;
  color: #000
}
.simple-cf7__cond input {
  width: 15px;
  height: 15px
}
.simple-cf7__cond .wpcf7-list-item-label {
  line-height: 1.2
}
.simple-cf7__cond input[type=checkbox]:checked,
.simple-cf7__cond input[type=checkbox]:not(:checked) {
  position: absolute;
  left: -9999px
}
.simple-cf7__cond input[type=checkbox]:checked + .wpcf7-list-item-label,
.simple-cf7__cond input[type=checkbox]:not(:checked) + .wpcf7-list-item-label {
  display: inline-block;
  position: relative;
  padding-left: 28px;
  cursor: pointer
}
.simple-cf7__cond input[type=checkbox]:checked + .wpcf7-list-item-label:before,
.simple-cf7__cond input[type=checkbox]:not(:checked) + .wpcf7-list-item-label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  background-color: #fff
}
.simple-cf7__cond input[type=checkbox]:checked + .wpcf7-list-item-label,
.simple-cf7__cond input[type=checkbox]:not(:checked) + .wpcf7-list-item-label {
  border-radius: 2px
}
.simple-cf7__cond input[type=checkbox]:checked + .wpcf7-list-item-label:after,
.simple-cf7__cond input[type=checkbox]:not(:checked) + .wpcf7-list-item-label:after {
  position: absolute;
  left: 3px;
  top: 6px;
  width: 13px;
  height: 7px;
  border-radius: 1px;
  border-left: 4px solid #4a4a4a;
  border-bottom: 4px solid #4a4a4a;
  transform: rotate(-45deg)
}
.simple-cf7__cond input[type=checkbox]:not(:checked) + .wpcf7-list-item-label:after {
  opacity: 0
}
.simple-cf7__cond input[type=checkbox]:checked + .wpcf7-list-item-label:after {
  opacity: 1
}
.simple-cf7__cond input[type=checkbox]:focus + .wpcf7-list-item-label:before {
  outline: -webkit-focus-ring-color auto 1px
}
.simple-cf7__cond label {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  line-height: 1
}
/* Стилизация событий */
.simple-cf7 .use-floating-validation-tip span.wpcf7-not-valid-tip {
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  position: absolute
}
.simple-cf7 .wpcf7-response-output {
  display: none!important
}
.simple-cf7__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  display: none
}
@-webkit-keyframes simple-cf7-sent {
  from {
    opacity: 1
  }
  to {
    opacity: 0;
    z-index: -9999
  }
}
@keyframes simple-cf7-sent {
  from {
    opacity: 1
  }
  to {
    opacity: 0;
    z-index: -9999
  }
}
.simple-cf7.sent .simple-cf7__overlay {
  display: flex;
  -webkit-animation: .5s linear 1.5s forwards simple-cf7-sent;
  animation: .5s linear 1.5s forwards simple-cf7-sent
}

Заключение

В этой статье я привел пример, как сделать простую адаптивную форму обратной связи используя самый популярный плагин форм для wordpress — Contact form 7. Основываясь на примере из данной статьи вы можете создать форму под свои нужны, дополняя или изменяя отдельные части, например добавив или убрав нужные вам поля.

В следующей статье я расширю функционал формы, добавив в неё новые элементы.