Здравствуйте, дорогие друзья и коллеги!
Продолжаем разбирать интересные возможности Contact Form7. Для тех, кто пропустил первую часть статьи вот ссылка:
Интересные возможности Contact Form7
Навигация по статье:
Отправка дополнительно информации
Согласитесь, было бы здорово ели бы мы могли помимо самого сообщения с сайта получать информацию с какой именно страницы оно было отправлено, в какое время и в какой день?! Разработчики плагина Contact Form7 предусмотрели такую возможность и реализуется она очень просто!
Для этого в созданной форме на вкладке «Письмо» нужно добавить специальный шорткод или несколько шорткодов.
Вот их перечень:
[_post_title] – заголовок страницы, с которой отправлялось сообщение
[_post_name] – отобразит имя страницы с формой
[_url] – определяет адрес страницы, с которой было отправлено сообщение
[_post_url] – ссылка страницы с формой
[_post_id] – показывает идентификатор поста с формой
[_post_author_email] — показывает email автора поста или страницы с формой
[_post_author] – определяет автора поста или страницы с формой
[_remote_ip] – позволяет определить IP-адрес посетителя
[_user_agent] – определяет браузер и параметры системы
[_date] — показывает дату отправки сообщения
[_time] – определяет время отправки
[_serial_number] – порядковый номер сохраненного сообщения.
Должно получиться так:
В результате на почту придёт сообщение такого вида.
Как сделать маску ввода для номера телефона
Часто возникает необходимость добавить в форму обратной связи поле телефон и для этого телефона сделать маску для ввода. Для этого нам необходимо подгрузить на сайт один небольшой скрипт.
Скачать его можно по ссылке ниже:
Для его подключения делаем следующее:
- 1.При помощи FTP-клиента или веб-интерфейса вашего хостинга подключаемся к вашему сайту и открываем папку:
wp-content/themes/папка_с_активной_темой/js
и загружаем сюда скачанный файл с названием mask.js.
Если у вас нет папки js, то вам нужно создать ее самим. - 2.После того, как файл закачан, переходим к его подключению. Подключение мы будем осуществлять в файле header.php. Для этого мы можем воспользоваться встроенным редактором WordPress.
- 3.Переходим в раздел «Внешний вид» => «Редактор».
- 4.Находим здесь файл «Заголовок» header.php и перед закрытием тега <head> вставляем следующий код:
1<script src="<?php echo get_template_directory_uri(); ?>/js/mask.js" type="text/javascript"></script> - 5.Теперь нам нужно нажать на кнопку «Обновить файл» в низу страницы.
- 6.Далее переходим в файл functions.php активной темы, в котором мы будем осуществлять инициализацию данного скрипта. В самом конце перед символами ?> (если они у вас есть) прописываем следующий фрагмент кода:
1234567891011/**Маска телефона**/add_action('wp_footer', 'activate_masked_input');function activate_masked_input(){?><script type="text/javascript">jQuery( function($){$(".tel").mask("+7 (999) 999-99-99");});</script><?php}В данном фрагменте кода у нас для поля с классом tel присваивается маска.
- 7.Здесь же вы можете изменить эту маску на свою. К примеру, +7 изменить на какое-то свое значение, изменить количество цифр или разделитель.
- 8.Так же нажимаем на кнопку «Обновить файл»
- 9.Теперь все что нам осталось, при редактировании формы обратной связи добавить поле «Ваш телефон» и для этого поля обязательно присвоить класс tel, который мы указывали в нашем скрипте.
- 10.Нажимаем вставить тег, сохраняем нашу форму.
После обновления страницы мы увидим, что, при клике по полю ваш телефон, в поле появляется маска, по которой осуществляется заполнение номера.
Как сделать отправку сразу нескольких файлов в Contact Form 7
- 1.Переходим на страницу редактирования формы и добавляем сюда поле «Файл».
- 2.Нажимаем на кнопку вставить тег и сохраняем форму.
- 3.Далее, переходим на вкладку «Письмо», копируем шорткод нашего поля и вставляем его в поле «Прикрепленные файлы» в самом низу.
- 4.Далее, опять проделываем тоже самое, добавляем еще одно поле.
Здесь очень важно после добавления каждого поля выполнять сохранение формы, иначе у вас могут генерироваться поля с одинаковыми ID. В этом случае отправка файлов работать не будет.
- 5.Опять переходим на вкладку письмо, копируем шорткод только что созданного поля, снова вставляем его в поле «Прикрепленные файлы» с новой строки, сохраняем и так далее.
- 6.Сохраняем форму и тестируем отправку файлов.
Видеоинструкция
На этом интересные возможности Contact Form 7, конечно же, не заканчиваются, но в этой статье я постаралась рассмотреть самые интересные и востребованные из них.
Если у вас есть еще какие-то интересные вопросы или интересные задачи, с которыми вы сталкивались в работе с этим плагином, напишите их в комментариях.
На этом у меня сегодня все. Я желаю вам успехов. Спасибо за посещения моего сайта и до встречи в следующих статьях!
С уважением Юлия Гусарь
спасибо, что описали все возможности.
Вот это как раз то что мне было нужно — ип адрес. Теперь злыдни засядут в черный список.
Спасибо, Юлия
:) И Вам спасибо!
скажите как выводит контакты на шапку я увас не нашел такой урок
Добрый день, Юлия! А что делать если ajax loader работает некорректно? Код при нажатии на кнопку крутится loader
Здравствуйте! Для маски телефона в видео Вы рассказываете одно, а в тексте совсем другое написано! Как правильно?
Здравствуйте, Юрий! А в чём именно отличие? «Как правильно?» — что именно?
сделайте урок как выводит контакты на шапку
Хорошо!
Добрый день. Не получается маску настроить, делаю так как в тексте написано, но все ровно пустое значение и маска не работает. У меня форма в сплывающем окне, а код прописываем в footer, может по этой причине такие проблемы. Помогите решить эту проблему, пожалуйста)
Здравствуйте, Виталий! Код и должен прописываться в footer. Убедитесь что Вы добавили класс tel для поля с номером телефона, а так же правильно подключили файл скрипта в файле header.php. Прям нажмите CTRL+U в браузере, найдите через поиск по странице ссылку на подключение этого файла и попробуйте по ней перейти и посмотреть откроется он или нет.
на видео «functions.php» в тексте «footer.php», так куда скрипт то вставлять?
Исправила в статье на functions.php. Спасибо за Ваш комментарий!
Блин чувак. Статейка не новая. А пригодилась. Респект. Выручил.