FormDesigner - идеальное решение для создания контактной формы. Создание форм в админке

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

Сегодня мы разберем с вами как можно создать за несколько минут легкую , красивую и функциональную форму обратной связи с помощью моего любимого плагина 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

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

Из этой статьи вы узнаете, как создать форму обратной связи, которая отправляет данные с помощью 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 и скопируйте в него следующий код.