Приветствую всех веб-разработчиков на своем сайте!
Мы с Вами пошагово настроим форму обратной связи
Если Вам нужно будет больше полей, то по инструкции можно с легкостью их добавить.
Плагин Contact Form 7
Переходим в админку на пункт меню плагины и устанавливаем Contact Form 7
Так, плагин установили и активировали
В меню у нас теперь есть пункт меню Contact Form 7. Переходим в него далее контактные формы
Нажимаем на кнопку добавить новую
Вводим название своей будущей формы
Тут я оставил только нужные мне поля, такие как Имя и телефон. Обратите внимание на тег label я его немного переставил для удобства.
Сохраняем результат
Мы получили shortcode который в последствии вставим в нужное место на сайте
|
1 |
[contact-form-7 id="c66fc19" title="Форма для обратного звонка"] |
Данный код копировать не нужно, у Вас будет свой
Как вставить шорткод в страницу, запись, или шаблон wordpress
Классический редактор wordpress
Выбираем вкладку визуально и в поле вставляем наш шорткод из кон
Вот такая форма вывелась у меня на странице, вид формы может отличаться так как стили в шаблоне указаны по своему, но эту проблему легко исправить добавив своих стилей
Редактор gutenberg
В редакторе gutenberg в поиске по виджетам набираем шорткод и добавляем его на страницу
Вводим свой шорт код и нажимаем сохранить.
Как вставить шорткод в php wordpress
Тут нужно немного понимания что и как работает, иначе можно все сломать и потом долго разбираться как все починить.
Настоятельно рекомендую сделать бекап сайта, тем более это делается за несколько минут, как сделать я описывал в данной статье.
Переходим во вкладку Внешний вид -> Редактор тем и выбираем нужный нам шаблон.
Допустим задача такая — добавить в подвал сайта форму обратной связи, значит нам нужен шаблон footer.php
В шаблоне в нужно месте выводим нужный нам шорткод через функцию do_shortcode()
выглядеть будет так
Все как выводить мы разобрались! Теперь разберемся как настроить отправку почты.
Настройка contact form 7
у каждой контактной формы есть настройки. Для примера я взял форму со своего сайта.
Обратите внимание на теги теги как
|
1 |
[text-293] |
|
1 |
[tel-581] |
Для чего они нужны и где их взять? Нужны они для передачи данных в заполненных полях а получить мы их можем при настройке своей формы
Допустим нам нужна в форме еще текстовая область — жмем на нее
Тут нам плагин предлагает добавить эту область, нажимаем вставить тег, если вам нужно добавить свои классы css для стилизации — впишите их в поле Атрибут class
Для примера я вставил еще текстовую область textarea-726
Переходим во второю вкладку ->Письмо, обратите внимание появился шорткод textarea. вот его нужно будет перетянуть мышкой или прописать ниже в теле письма, это нужно для того чтобы информация из заполненного поля поступала в письмо на почту.
В итоге у вас получится вот так и нажимаем сохранить.
- Поле кому заполняете свой Email
- Поле от кого Пишите к примеру как у меня wordpress@Вашдомен.ру
- Так же можете заполнить Тему как вам нравится и доп. заголовки
Все форма работает! Если у Вас остались вопросы, пишите я Вам обязательно помогу
