Интересные возможности Contact Form7 (Часть 2)

Здравствуйте, дорогие друзья и коллеги!

Продолжаем разбирать интересные возможности 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] – порядковый номер сохраненного сообщения.

Должно получиться так:

Шорткоды для Contact Form 7

В результате на почту придёт сообщение такого вида.

Письмо с информацией о пользователе

Как сделать маску ввода для номера телефона

Часто возникает необходимость добавить в форму обратной связи поле телефон и для этого телефона сделать маску для ввода. Для этого нам необходимо подгрузить на сайт один небольшой скрипт.

Скачать его можно по ссылке ниже:

Для его подключения делаем следующее:

  1. 1.При помощи FTP-клиента или веб-интерфейса вашего хостинга подключаемся к вашему сайту и открываем папку:
    wp-content/themes/папка_с_активной_темой/js

    и загружаем сюда скачанный файл с названием mask.js.

    Если у вас нет папки js, то вам нужно создать ее самим.
  2. 2.После того, как файл закачан, переходим к его подключению. Подключение мы будем осуществлять в файле header.php. Для этого мы можем воспользоваться встроенным редактором WordPress.
  3. 3.Переходим в раздел «Внешний вид» => «Редактор».
  4. 4.Находим здесь файл «Заголовок» header.php и перед закрытием тега <head> вставляем следующий код:
  5. 5.Теперь нам нужно нажать на кнопку «Обновить файл» в низу страницы.
    подключение скрипта маски
  6. 6.Далее переходим в файл functions.php активной темы, в котором мы будем осуществлять инициализацию данного скрипта. В самом конце перед символами ?> (если они у вас есть) прописываем следующий фрагмент кода:

    В данном фрагменте кода у нас для поля с классом tel присваивается маска.

  7. 7.Здесь же вы можете изменить эту маску на свою. К примеру, +7 изменить на какое-то свое значение, изменить количество цифр или разделитель.
  8. 8.Так же нажимаем на кнопку «Обновить файл»
    Инициализация скрипта
  9. 9.Теперь все что нам осталось, при редактировании формы обратной связи добавить поле «Ваш телефон» и для этого поля обязательно присвоить класс tel, который мы указывали в нашем скрипте.
    Настраиваем поле для ввода телефона
  10. 10.Нажимаем вставить тег, сохраняем нашу форму.

После обновления страницы мы увидим, что, при клике по полю ваш телефон, в поле появляется маска, по которой осуществляется заполнение номера.

Маска для ввода телефона в форме обратной связи

Как сделать отправку сразу нескольких файлов в Contact Form 7

  1. 1.Переходим на страницу редактирования формы и добавляем сюда поле «Файл».
  2. 2.Нажимаем на кнопку вставить тег и сохраняем форму.
    Настройка отправки файлов в Contact Form 7
  3. 3.Далее, переходим на вкладку «Письмо», копируем шорткод нашего поля и вставляем его в поле «Прикрепленные файлы» в самом низу.
  4. 4.Далее, опять проделываем тоже самое, добавляем еще одно поле.
    Здесь очень важно после добавления каждого поля выполнять сохранение формы, иначе у вас могут генерироваться поля с одинаковыми ID. В этом случае отправка файлов работать не будет.
  5. 5.Опять переходим на вкладку письмо, копируем шорткод только что созданного поля, снова вставляем его в поле «Прикрепленные файлы» с новой строки, сохраняем и так далее.
    Добавляем несколько полей отправки файлов
  6. 6.Сохраняем форму и тестируем отправку файлов.
Форма для сайта с отправкой нескольких файлов

Видеоинструкция



На этом интересные возможности Contact Form 7, конечно же, не заканчиваются, но в этой статье я постаралась рассмотреть самые интересные и востребованные из них.

Если у вас есть еще какие-то интересные вопросы или интересные задачи, с которыми вы сталкивались в работе с этим плагином, напишите их в комментариях.

На этом у меня сегодня все. Я желаю вам успехов. Спасибо за посещения моего сайта и до встречи в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

14 комментариев

  1. спасибо, что описали все возможности.

  2. Вот это как раз то что мне было нужно — ип адрес. Теперь злыдни засядут в черный список.
    Спасибо, Юлия //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

      • скажите как выводит контакты на шапку я увас не нашел такой урок

  3. Добрый день, Юлия! А что делать если ajax loader работает некорректно? Код при нажатии на кнопку крутится loader

  4. Здравствуйте! Для маски телефона в видео Вы рассказываете одно, а в тексте совсем другое написано! Как правильно?

    • Здравствуйте, Юрий! А в чём именно отличие? «Как правильно?» — что именно?

  5. сделайте урок как выводит контакты на шапку

  6. Добрый день. Не получается маску настроить, делаю так как в тексте написано, но все ровно пустое значение и маска не работает. У меня форма в сплывающем окне, а код прописываем в footer, может по  этой причине такие проблемы.  Помогите решить эту проблему, пожалуйста)//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    • Здравствуйте, Виталий! Код и должен прописываться в footer. Убедитесь что Вы добавили класс tel для поля с номером телефона, а так же правильно подключили файл скрипта в файле header.php. Прям нажмите CTRL+U в браузере, найдите через поиск по странице ссылку на подключение этого файла и попробуйте по ней перейти и посмотреть откроется он или нет.

  7. на видео «functions.php» в тексте «footer.php», так куда скрипт то вставлять?

    • Исправила в статье на functions.php. Спасибо за Ваш комментарий!

  8. Блин чувак. Статейка не новая. А пригодилась. Респект. Выручил.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif