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

Контактные формы являются необходимым атрибутом большинства сайтов. С их помощью осуществляется непосредственное общение с посетителем, особенно если на сайте не представлено иных способов связи.

Каталог WordPress насчитывает десятки плагинов контактных форм. Но наиболее популярным среди них (более миллиона установок) является Contact Form 7 , на примере которого мы и будем рассматривать создание контактной формы на сайте.

Если Вы используете темы или , то Вам нет необходимости устанавливать какие-либо плагины, — все уже реализовано! Для этого достаточно вставить на страницу контактной формы шорткод .

После установки и активации плагина в админ-панели появляется целый раздел:

Создадим простую форму, которая будет доступна на странице Связаться с нами . Для начала переходим Contact Form 7 > Добавить новую , где необходимо ввести название формы. Ниже располагается блок шаблона формы, т.е. набор полей, которые будет видеть и заполнять пользователь на сайте.

Итак, введя название, например, «Связаться с нами » и нажав кнопку Сохранить , Вы таким образом создадите готовую к показу контактную форму. Чтобы ее увидеть, нужно перейти Contact Form 7 > Контактные формы .

Обратите внимание на значение поля Шорткод . Код, взятый в квадратные скобки, будет использован для показа формы на сайте.

Чтобы посетители сайта смогли воспользоваться формой контактов, ее где-то нужно вывести. Для этого создадим отдельную страницу с названием, например, «Связаться с нами «. Итак, переходим Страницы > Добавить новую . В заголовке пишем «Связаться с нами «, а в поле снизу вставляем вышеуказанный шорткод. В итоге должно получится:

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи , или как еще говорят в народе «контактной формы» .

Сегодня мы разберем с вами как можно создать за несколько минут легкую , красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7 .

Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным 🙂

В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин скачали БОЛЕЕ 25 МИЛЛИОНОВ РАЗ!!!

И так, давайте приступим. Для создания формы обратной связи нужно сделать следующее :

1. Установите и активируйте плагин Contact Form 7 . Как устанавливать плагины вы можете .

2. После активации перейдите в Contact Form 7 -> Формы .

3. В открывшемся окне копируем строчку с кодом вставки.

4. Скопированный код вставляем на ту страницу, на которую мы хотим добавить форму обратной связи. После того как вставили код, не забудьте сохраните изменения нажав кнопку «Обновить» .

Вот такой результат добавления контактной формы по получим:

Готово! Вы установили рабочую форму обратной связи на свой сайт!

Как видите, всего за несколько минут можно с легкостью установить на сайт форму обратной связи. На этом можно и поставить точку, но тем, кого не устраивает стандартная форма и кто хочет создать полностью новую контактную форму с другими полями и возможностями — рекомендую читать урок до конца.

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

Для этого нам нужно чтобы в форме были такие поля для заполнения:

• Имя (Обязательное поле для заполнения)
• Фамилия
• Телефон (Обязательное поле для заполнения)
• Поле с выбором удобного времени для звонка

После того как мы определились с полями, переходим к созданию формы:

1. Переходим в Contact Form 7 -> Добавить новую.

2. В открывшемся окне нажимаем кнопку «Добавить новую» . Если необходимо, выберите язык в выпадающем списке ниже. По умолчанию язык будет русским .

3. После нажатия кнопки вы перейдете на страницу, на которой находится редактор формы .

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

Ниже мы видим настройки письма, которое приходит на вашу почту после того, как кто-то отправил заказ с формы на сайте. В этих настройках, к примеру, можно изменить или добавить e-mail на который будут приходить запросы с формы на вашем сайте. В шаблоне письма настраивается информация, которая будет отображаться внутри письма.

4. После того, как мы поверхностно ознакомились с структурой редактора, переходим к созданию нашей новой формы. Для этого нам нужно УДАЛИТЬ из шаблона формы все строчки кроме кнопки «Отправить», а в шаблоне письма удалить все полностью. После удаления у вас должно получится так:

5. Теперь нам нужно создать новые поля: Имя (обязательное), Фамилия , Телефон (обязательное), Удобное время звонка .

Начинаем с создания поля для ввода имени , которое должно быть обязательное для заполнения. Для этого нажимаем кнопку «Сгенерировать тег» и выбираем Текстовое поле .

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

6. После того, как мы добавили поле для ввода имени, нажимаем «Сгенерировать тег» -> Текстовое поле и по аналогии создаем поле Фамилия и Телефон , копируя и вставляя код в шаблон формы и шаблон письма. Отличие только в том, что для поля Фамилия ставить галочку для обязательного заполнения не нужно.

После добавления полей Имя, Фамилия и Телефон редактор формы будет выглядеть так:

7. Теперь создаем поле Удобное время звонка. Для этого нажимаем «Сгенерировать тег» и выбираем «Выпадающее меню» .

В поле Выбор пишем в строчку по одному варианту, в нашем случае это время с 8-00 до 18-00 с промежутками в два часа. После заполнения копируем соответствующие строчки кода в шаблон формы и шаблон письма.

В итоге у вас должно получиться вот так:

9. Скопируйте код формы и вставьте его на страницу, на которой вам нужна форма . Если вы все сделали правильно, у вас должна получится такая форма заказа обратного звонка:

После того как пользователь сделает заказ обратного звонка с вашего сайта, на вашу почту придет письмо с таким наполнением:

ГОТОВО! Вот мы с создали с вами форму заказа обратного звонка с нуля .

Согласен, что для некоторых все может показаться очень сложным и страшным, но такое ощущение будет только до первого создания контактной формы с нуля 😉

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

Надеюсь этот урок был вам полезен, и вы разобрались с плагином Contact Form 7.

Если у вас будут возникать по ходу создания формы вопросы или что-то будет не получаться — пишите и задавайте вопросы в комментариях .

И помните, что форма обратной связи на сайте — обязательный атрибут на странице контактов .

Здравствуйте, друзья! В этом уроке мы поговорим о создании формы обратной связи, или как еще говорят в народе "контактной формы". Сегодня мы разберем с вами как можно создать за несколько минут легкую, красивую и функциональную форму обратной связи с помощью моего любимого плагина Contact Form 7. Я постараюсь максимально подробно объяснить все этапы установки контактной формы, и в связи с этим урок получится достаточно длинным:) Создание контактной формы в WordPress В самом начале хочу заметить, что плагин Contact Form 7 русифицирован, и никаких проблем с ним у вас не будет. Как доказательство моих слов может выступать тот факт, что данный плагин…

100

Итог: Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Contact form 7 WordPress – самый популярный плагин для реализации контактной формы. Модуль позволяет организовать обратную связь с посетителями сайта. Для работы с плагином не нужно знать html, поскольку форма добавляется посредством копирования шорт-кода на любую страницу сайта. Модуль позволяет добавлять в форму неограниченное количество полей, присутствует интеграция со сторонними и стандартными плагинами. Форму можно кастомизировать, делая правки в CSS-код шаблона.

После установки плагина в боковом меню появится раздел «Contact Form 7». На странице «контактные формы» присутствует список всех сохраненных настроек. Если навести на форму курсор, появятся ссылки «изменить» и «дублировать». Чтобы удалить запись, поставьте напротив нее галочку, выберите соответствующее действие и нажмите кнопку «применить». Чтобы создать форму, перейдите по ссылке «добавить новую».

Для тех, кто не знает, как создать форму обратной связи для сайта, предусмотрен шаблон с базовыми полями:

• Электронная почта;
• Тема;
• Сообщение;
• Кнопка «отправить».

Вы можете дополнить этот набор или создать форму обратной связи с нуля, удалив стандартный текст.

Чтобы добавить поле, переместите курсор на новую строку и выберите тип поля в списке. После этого откроется всплывающее окно с настройками:

• Тип поля – если хотите сделать поле обязательным, поставьте галочку;
• Имя – оставьте как есть;
• Значение по умолчанию – заполняет текстовые поля готовым текстом;
• Атрибут id – нужно задать произвольную цифру, если в форме присутствует более одного поля одного типа;
• Атрибут class – укажите название CSS-класса, который отвечает за кастомизацию текстового поля. Если оставить пустым, будет использовано стандартное значение;
• Параметры – значения для радио кнопки;
• Вопросы и ответы – значения для поля «опросы».

В зависимости от типа выбранного поля, некоторые параметры могут отсутствовать. Вы можете добавить неограниченное количество элементов, но последним должна быть кнопка «отправить».

На странице «письмо» вы настраиваете шаблон, тему и получателя писем, которые будут отправлены с формы обратной связи. Форму можно оставить как есть, поскольку все поля заполнены стандартно.

Когда вы добавите все нужные поля, скопируйте шорткод. Он находится под названием формы. Этот код необходимо вставить на любую страницу или запись в блоге.

Чтобы это сделать, наведите курсор на раздел «страницы» и выберите в выпадающем меню ссылку «добавить новую». Если у вас уже есть созданная страница, на которой вы хотели бы разместить форму, кликните по ссылке «все страницы», найдите нужную запись и нажмите «изменить». Вам нужно вставить скопированный шорткод в текстовую форму, выбрать адрес, заголовок и нажать кнопку «опубликовать». После этого на странице появится форма.

Кроме контактной формы, можно добавить любой текст или изображение – как в обычную статью. Чтобы посмотреть, как будет выглядеть ваша форма, нажмите «просмотреть изменения» или кликните по постоянной ссылке, если вы уже сделали публикацию. Ссылку на страницу с контактной формой можно опубликовать в шапке, подвале или сайдбаре сайта через визуальный редактор.

Созданная контактная форма для WordPress может быть размещена не только на странице или в записи. Если шаблон поддерживает создание виджетов, вы можете добавить форму в сайдбар или подвал сайта.

Перейдите в раздел «внешний вид > виджеты». В левой части страницы вы увидите список с доступными виджетами. В самом низу найдите виджет «текст» с описанием «произвольный текст». Нажмите на него и выберите локацию, где вы хотите разместить форму. В зависимости от вашего шаблона, это может быть sidebar (боковая колонка), footer (подвал), header (шапка) и т. д. Выберите нужное место и нажмите «добавить виджет».

В правой части страницы появится пустая форма, куда необходимо вставить шорткод и ввести заголовок. Нажмите «сохранить», после чего виджет будет добавлен.

Из-за популярности Contact form 7 разработчики некоторых сторонних плагинов встраивают в свои продукты возможность интеграции с контактной формой. Один из таких модулей присутствует в чистой сборке WordPress – спам-фильтр Akismet.

Чтобы подключить Akismet к контактной форме, необходимо прописать параметр «akismet:author» в строку следующих полей: your_email, your-name и your-url. Или же просто замените стандартные поля следующими строками:

Не забывайте о теге и сопроводительном тексте, который отображается над полем. У вас должно получиться так же, как на скриншоте. Если в своей форме вы используете только одно или два поля (например, не просите ввести URL), используйте соответствующее количество параметров. Более детальная информация на официальном сайте

Из этой статьи вы узнаете, как создать форму обратной связи, которая отправляет данные с помощью AJAX. Мы будем использовать jQuery и простой почтовый PHP-скрипт для отправки данных формы на email.

Наша первая задача — настроить HTML-форму. Задайте для элемента идентификатор ajax-contact , для атрибута method установите значение post , а для атрибута action — значение mailer.php .

Name: Email: Message: Send

Мы создали форму с полями для ввода имени пользователя, адреса электронной почты и сообщения. Обратите внимание, что каждое поле формы содержит атрибут required . В браузерах, поддерживающих валидацию форм HTML5, его использование не разрешает отправку данных, если поля не заполнены.
Затем нужно создать , который будет использоваться для отображения сообщений об ошибках или об успешной отправке данных.Разместите этот элемент выше тега и присвойте идентификатор form-messages .

Теперь нужно загрузить примеры кода и скопировать файл style.css в каталог проекта. Также необходимо добавить элемент , который указывает браузеру загрузить файл CSS.

Нужно создать два элемента , которые ссылаются на библиотеку jQuery и файл app.js. Добавьте их перед закрывающим тегом .

Важно сначала загрузить файл jquery-2.1.0.min.js , так как для скрипта app.js требуется jQuery.
Это весь HTML-код, который понадобится. Теперь рассмотрим JavaScript.

Создайте в каталоге проекта новый файл с именем app.js . Он будет включать в себя код, необходимый для отправки данных формы с помощью AJAX.
Скопируйте следующий код в файл app.js .

Мы создали две переменные form и formMessages , которые ссылаются на соответствующие элементы HTML.
Затем нужно создать прослушиватель, который перехватывает событие submit в форме.Это можно сделать, используя метод jQuery submit .

// Устанавливаем прослушиватель для контактной формы. $(form).submit(function(event) { // Блокируем отправку данных формы в браузере. event.preventDefault(); // TODO });

Передаем методу submit функцию, которая будет выполнена, когда пользователь отправит данные формы. Мы также указали браузеру не отправлять форму, как обычно, вызвав для события метод preventDefault.
Теперь нужно сериализовать данные формы. Они будут преобразованы в строку ключ / значение для отправки ​​с помощью AJAX- запроса. Используйте jQuery- метод serialize для сериализации данных формы, а затем сохраните результат в переменной formData .

// Сериализуем данные формы. var formData = $(form).serialize();

Теперь напишем код, который отвечает за отправку данных формы на сервер и обработку ответа. Скопируйте следующий код в файл app.js .

// Отправка данных формы с помощью AJAX. $.ajax({ type: "POST", url: $(form).attr("action"), data: formData })

Для создания нового AJAX-запроса используется jQuery-метод ajax . Мы передали объект методу ajax , который включает в себя ряд свойств, используемых для настройки запроса. Свойство type указывает метод HTTP, который будет использоваться для отправки запроса. В нашем случае – это метод POST .
Свойство url — это местоположение скрипта, который будет обрабатывать данные формы. Мы задаем значение для этого свойства, извлекая атрибут action из формы. Значение свойства data задается с помощью переменной formData , которую мы создали ранее.
Затем нужно обработать успешный ответ, полученный с сервера. Скопируйте следующий код непосредственно после закрывающей скобки вызова ajax . Обратите внимание, что я умышленно оставил точки с запятой.

Done(function(response) { // Удостовериваемся в том, что div formMessages содержит класс "success". $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Задаем текст сообщения. $(formMessages).text(response); // Очищаем форму. $("#name").val(""); $("#email").val(""); $("#message").val(""); })

Метод done будет вызываться, если запрос завершится успешно. Сначала проверяем, что элемент formMessage s содержит класс success . Затем устанавливаем текстовое содержимое элемента, используя данные, возвращаемые почтовым скриптом. После чего очищаем значения каждого поля формы.
В последнем фрагменте JavaScript- кода нам нужно написать, что должно произойти, если произошла ошибка. Скопируйте следующий код в файл app.js .

Fail(function(data) { // Удостовериваемся, что div formMessages содержит класс "error". $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Устанавливаем текст сообщения. if (data.responseText !== "") { $(formMessages).text(data.responseText); } else { $(formMessages).text("Oops! An error occured and your message could not besent."); } });

Метод fail вызывается, если почтовый скрипт возвращает ошибку. Сначала проверим, что элемент formMessages содержит класс error . Затем проверяем, возвращает ли AJAX- запрос responseText . Если это так, используем текст для установки содержимого элемента formMessages. В противном случае используется стандартное сообщение об ошибке.
Это весь код HTML и JavaScript, необходимый для создания контактной формы на AJAX. В следующем разделе мы создадим скрипт, который отвечает за обработку данных формы и отправку электронной почты.

Этот простой скрипт отвечает за проверку правильности данных формы и отправку электронной почты. Если возникнет ошибка, почтовый скрипт ответит соответствующим кодом состояния, чтобы выполнить JavaScript.
Создайте новый файл с именем mailer.php и скопируйте в него следующий код.