Форма заявки с сайта: разбираемся в видах и настройках элемента

Область для ввода сообщения

Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом ‘textarea’. Добавьте следующую разметку в форму:


<div class="contact-form__input-wrapper">
 <textarea name="text" class="contact-form__input contact-form__text" placeholder="Введите ваше сообщение"></textarea>
 <div class="contact-form__error contact-form__error_text"></div>
</div>

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

Теперь необходимо передать данные в файл валидации ‘valid.php’ и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

	// Текстовое поле
	const TEXTISREQUIRED = true;
	const MSGSTEXTERROR = "Поле обязательно для заполнения";

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

if (isset($_POST) ) {
        if(empty($_POST) && TEXTISREQUIRED) {
            $msgs = MSGSTEXTERROR;
        } else {
            if (!empty($_POST)) {
                $text = "<b>Сообщение: </b> " . trim(strip_tags($_POST)) . "<br>";
            }
        }
    }

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’

<textarea name="text" class="contact-form__input contact-form__text" placeholder="Введите ваше сообщение"></textarea>

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
let inpEmailError = $(this).find('.contact-form__error_email');
let inpTelError = $(this).find('.contact-form__error_tel');
let inpTextError = $(this).find('.contact-form__error_text');

А затем, ниже, напишем проверку:

if (respond.text) {
 inpTextError.text(respond.text);
} else {
 inpTelError.text('');
}

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

$mail->Body = "$name $tel $email $text";

Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.

Дополнительные плюшки на js и jQuery

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

Посмотрите на js-код. Это блокиратор кнопки, который при не дает посетителю нажать ее, прежде чем необходимые вам поля будут заполнены.

Как работает эта строка?

Все завязано на количестве символов в указанном поле, т.е. ее длине .

  • — указывает на то, что поле не должно быть пустым. Читается как — «если в поле число символов не равно нулю, то…»
  • — объединяет условия (и)
  • — кол-во символов должно быть больше или равно 6. Почему шесть? Я указал это число потому, что минимальный почтовый адрес состоит из 6 символов. Проверим? @bk.ru — 6 символов.
  • — больше или равно десяти символам. Почему 10, а не 11 ? При заполнении этого поля, посетитель может указать свой телефон как с +7, так и через 8. Поэтому лучше указывать 10.

На этом все. Подключайте форму, тестируйте и пользуйтесь.

Шаг 1.

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

XHTML

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Простейшая и крутейшая форма</title> </head> <body> <div id=»container»> <form class=»mainform» > <p class=»name»> <input type=»text» name=»name» value=»Имя автора» /> <label for=»name»>Имя</label> </p>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″ />

<title>Простейшая и крутейшая форма</title>

</head> <body>

<div id=»container»>

<form class=»mainform» >

<p class=»name»>

<input type=»text»name=»name»value=»Имя автора» />

<label for=»name»>Имя</label>

</p>

<p class=»email»>

<input type=»text»name=»email»value=»name@example.com» />

<label for=»email» >E-Mail</label>

</p>

<p class=»msg»>

<textarea name=»msg»>Текст сообщения</textarea>

</p>

<p class=»send» >

<input type=»submit»value=»Отправить»  />

</p>

</form> </div> </body> </html>

Думаю, что с разметкой пока ни у кого никаких вопросов не возникнет. У нас есть два поля для ввода имени автора и адреса его электронной почты, каждое поле подписано меткой <label>, одно большое текстовое поле для ввода сообщения и кнопка для отправки всего этого добра куда подальше . Пока это все добро выглядит приблизительно так:

Как видите, каждое текстовое поле имеет подсказку – текст, расположенный в поле.

Виды форм по назначению

1. Форма подписки

Подписка на постоянную рассылку довольно ценное действие для маркетолога, но подписываться куда-либо любят немногие. Исправить положение можно выдавая пользователям вместе с подпиской премиальные материалы, скидки, премиум–доступы и прочее.

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

Форма подписки на рассылку

2. Форма колбека 

Заказ обратного звонка. Небольшая кнопка на сайте, от пользователя требуется заполнить только одно поле — номер телефона. Реже просят указать имя, чтобы оператор знал, как к вам обращаться. 

Одна из самых базовых вещей в интернет-маркетинге, служит для сбора клиентской базы, быстрой связи оператора с клиентом. 

Простая форма обратного звонка

3. Форма заявки 

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

Форма заявки на услугу. От предыдущего колбека отличается возможностью сразу выбрать дату

5. Анкета 

Опросник, созданный с определенной целью: анкетирование кандидатов, анализ целевой аудитории, выявление качества предоставляемой услуги и прочие вещи, подразумевающие кучу вопросов и данных от пользователя. 

Довольно объёмная форма-анкета

6. Форма записи и бронирования 

Используется для предварительной записи для получения услуги: прием у кого-либо, посещение салона красоты. Такие ФОС часто интегрируются с системами бронирования или CRM. Гарантируют то, что несколько пользователей не сможет записаться на одно и то же время. 

ФОС для бронирования всегда содержит даты, иногда сразу ведёт к оплате

7. Сложные формы 

Нетрадиционные ФОЗ: калькулятор, форма-квиз, форма, меняющаяся во время заполнения (изменение цвета, например при тестировании, что означает количество правильных ответов или приближение к финалу). 

Через ФОС можно сделать даже такие необычные вещи как конструктор пиццы

Готовые плагины

Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин Contact Form 7 в нескольких проектах.


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

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

21

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

(5 голосов, в среднем: 5 из 5)

не скупись ставь лайк Подписка на обновления:

Флажки и Радио-кнопки

Рассмотрим HTML-код флажков.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

1 2 3

<p>Способ связи</p>

Email<input type=»checkbox»value=»mail»name=»connect[]»/><br />

Телефон<input type=»checkbox»value=»Телефон»name=»connect[]»/><br />

Обратите внимание на квадратные скобки в параметре name — они обеспечивают возможность выбора нескольких значений. Иногда используются просто разные имена

Что касается кнопок — переключателей (radio), то мы можем добавить такой пример:

XHTML

<p>Необходим ли телефонный звонок?:</p> <input type=»radio» name=»call» value=»Да»>Да<br/> <input type=»radio» name=»call» value=»Нет»>Нет<br/>

1 2 3

<p>Необходим ли телефонный звонок?:</p>

<input type=»radio»name=»call»value=»Да»>Да<br/>

<input type=»radio»name=»call»value=»Нет»>Нет<br/>

Здесь имя одинаковое, но разные значение value.

И опять, полный HTML:

<p>Сайт</p> <input type=»text» name=»website»><!—Текстовое поле—>

Важность

НизкаяНормальнаяВысокаяМаксимальная

<p>Тип</p> <select name=»type» size=»1″><!—Выпадающий список—> <option value=»Обновление сайта»>Обновление сайта</option> <option value=»Изменение информации»>Изменение информации</option> <option value=»Информация добавлена»>Информация добавлена</option> <option value=»Новые продукты»>Новые продукты</option> </select> <br /> <p>Сообщение</p><textarea name=»message» rows=»6″ cols=»25″></textarea><br /> <input type=»submit» value=»Отправить»/><input type=»reset» value=»Очистить»/> <!—Кнопки отправки/отмены—> </form>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Имя

Email

Телефон

Необходим ли телефонный звонок?

Да

Нет

Способ связи

Email

Телефон

Сайт

Важность

НизкаяНормальнаяВысокаяМаксимальная

Тип

Обновление сайтаИзменение информацииИнформация добавленаНовые продукты

Сообщение

Дополняем наш обработчик переменными, которые потребуются для отправки письма:

1 2 3 4

$recipient=»emailaddress@here.com»;

$subject=»Форма обратной связи. Пользователь — $name»;

$mailheader=»Отправитель: $email <div style=’style:border:1px solid red’>1</div> \r\n»;

$info=mail($recipient,$subject,$formcontent,$mailheader,»Content-type:text/plain; Content-type:text/plain; charset = UTF-8\r\n»)ordie(«Ошибка»);

Любую из этих переменных можно дополнить различной полезной информацией. Я добавил имя пользователя в $subject, которая отвечает за тему письма.

Вы, например, можете в $mailheader добавить адрес Вашей организации, телефоны и т.п.

И напоследок — поработаем с почтой.

Вообще, по-идее, у нас при отправке данных, выводится надпись — просто . Но мы пойдём дальше и создадим ссылку, по которой пользователь сможет вернуться назад. Будьте внимательны, синтаксис PHP заставит нас немного изменить написание HTML. Например, вместо двойных ковычек мы будем использовтаь одинарные ‘. После фразы Спасибо! добавим ссылку на form.html, и чуть поменяем стили ссылок.

Для начала в mail.php изменим команду echo, которая отвечает за вывод текста:

PHP

echo «Спасибо!» . » -» . «<a href=’index.html’ style=’text-decoration:none;color:#ff0099;’> Вернуться на главную</a>»;

1 echo»Спасибо!».» -«.»<a href=’index.html’ style=’text-decoration:none;color:#ff0099;’> Вернуться на главную</a>»;

Но это мой вариант, фраза и стили могут быть любыми.


И финальный PHP:

Самые внимательные заметили, что для обработки флажков применяем цикл foreach.

Разумеется, то, что у нас получилось — это простейший вариант, здесь нет ни одной проверки и способов защиты от спама.

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

Надеюсь, урок по созданию контактной формы для сайта, вам понравился.

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Обработка данных формы заказа обратного звонка на сервере при помощи PHP

На следующем этапе нужно получить и обработать ответ на сервере. Для этого создаем файл “senda.php”.

Проверяем следующим условием, откуда отправлнны данные и каким способом. Если это не асинхронная отправка Jquery, то прекратить работу скрипта и показать сообщение об ошибке:

Мы отправляли асинхронно данные формы обратного звонка при помощи Jquery. Принимаем эти данные следующим PHP кодом:

Когда мы принимаем данные мы сразу проверяем их и отсеиваем специальные символы и тэги при помощи функции filter_var(). Ведь некоторые злоумышленники могут попытаться взломать сайт, используя вашу форму обратного звонка.

Обращаю ваше внимание на то, что функция filter_var() работает в версии PHP 5 и выше. Далее добавляем два условия

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

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

Отправляем данные на почту:

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

Мы получили полностью работающий скрипт.

Итак, полный код файла с формой index.php:

Полный код файла обработки асинхронного запроса на сервере senda.php:

Таким образом, мы получили форму заказа обратного звонка с сайта без перезагрузки страницы на PHP, HTML и Jquery. Код проверен и прекрасно справляется со своими функциями.

Не забывайте про ссылку по обработке персональных данных пользователя. Если вы не помещаете ее на сайте, то нарушаете закон РФ.

Работаем с полями формы

Добавляем тип поля text, в имени поля прописываем Name, в плейсхолдере –  ФИО, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и сохраняем изменения.

Добавляем тип поля Phone, в имени поля прописываем то же самое, в плейсхолдере – ТЕЛЕФОН, ставим галочку рядом с ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ, выбираем интеграцию с облачной АТС Beeline, на звонок ответит менеджер и прописываем номер телефона менеджера. Настройки интеграции производятся в соответствующем разделе.  

Добавляем тип поля select, в имени прописываем city, в плейсхолдере – Выберите город, отмечаем галочкой ОБЯЗАТЕЛЬНО ДЛЯ ЗАПОЛНЕНИЯ и добавляем нужное количество значений списка. Рядом с value прописываем код значения, напротив text  – название города. Сохраняем изменения.

Добавляем тип поля radiobutton, в имени прописываем sex, в плейсхолдере – Выберите пол. Так как поле необязательное, галочку не ставим. Добавляем 2 значения списка, прописываем value (man и women) и text (Мужчина/Женщина).  Изменения сохраняем.

Добавляем тип поля submit, в имени прописываем send, в плейсхолдере – Отправить заявку. Перед кнопкой встраивается ссылка на соглашение об обработке персональных данных, которое мы создаем в разделе «Соглашения». По умолчанию уже прописано типовое соглашение, которое можно отредактировать.

Контактная форма или чат?

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

Клиент может оставить сообщение и в чате – оно будет переадресовано на электронную почту или смартфон. Еще одна удобная функция – обратный звонок.

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

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

Третья группа веб-ресурсов, которым необходима контактная форма, – это посадочные страницы, так называемые лендинги.

Начнём


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

1 2 3 4 5 6

<form action=»mail.php»method=»POST»>

<p>Имя</p><input type=»text»name=»name»/>

<p>Email</p><input type=»text»name=»email»/>

<p>Сообщение</p><textarea name=»message»rows=»6″cols=»25″></textarea><br />

<input type=»submit»value=»Отправить»/><input type=»reset»value=»Очистить»/>

</form>

Рассмотрим этот код и попробуем его модифицировать.

Для того, чтобы наша форма работала, необходимо добавить php-функции. Используем функцию $_POST для перевода значений из полей input в переменные:

К примеру, у нас есть:

1 <input type=»text»name=»email»/>
1 $email=$_POST’email’;

И для всех сразу:

1 2 3 4 5 6 7 8 9 10

<?php$name=$_POST’name’;

$email=$_POST’email’;

$message=$_POST’message’;

$formcontent=»От: $name \n Сообщение: $message»;

$recipient=»emailaddress@here.com»;

$subject=»Форма обратной связи»;

$mailheader=»Отправитель: $email \r\n»;

mail($recipient,$subject,$formcontent,$mailheader)ordie(«Ошибка!»);

echo»Спасибо!»;

?>

Переменная $recipient задаёт тот адрес, на который отправятся данные. Ну а функция mail отправляет данные на почту.

Теперь перед нами стоит задача продвинуться вперёд, я покажу, как можно добавить выпадающий список, и как добавить радио — кнопки.

Маска ввода номера телефона

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

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

<script src="/mail/js/mail.js"></script>

Теперь необходимо инициализировать скрипт.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script

<script src="/mail/js/mail.js"></script>
<script>
 $(function() {
  $('.contact-form__input_tel').mask('+3(000)000-00-00');
 });
</script>

После этого маска успешно появилась в поле телефона:

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

Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле ‘config’ — установите значение ‘false’ там, где задаем обязательность заполнения.

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

WordPress форма обратной связи с помощью кода без плагина

Разрабатываться wordpress форма обратной связи будет в шаблоне страниц. За вывод отвечает файл page.php в папке темы.

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

<?php get_header(); ?>  

<div class="content">

<h2 class="page-title">Страница: <?php the_title(); ?></h2>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post-main">

<h1><?php the_title(); ?> <span>(<?php the_time('j.m.y'); ?>)</span></h1>


<div class="post">
<?php the_content(); ?>
</div>

</div>

<?php comments_template(); ?>
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>
</div>

<?php get_sidebar(); ?>
</div>

</div>

<?php get_footer(); ?>

В самый верх данного кода помещаем вот такой набор команд.

<!--?php /* Template Name: Форма обратной связи */ ?-->
<?php
if(isset($_POST)) {
    if(trim($_POST) === '') {
        $nameError = 'Введите ваше имя.';
        $hasError = true;
    } else {
        $name = trim($_POST);
    }
    if(trim($_POST) === '')  {
        $emailError = 'Введите e-mail адрес.';
        $hasError = true;
    } else if (!eregi("^+@+\.{2,4}$", trim($_POST))) {
        $emailError = 'Вы ввели неправильный адрес.';
        $hasError = true;
    } else {
        $email = trim($_POST);
    }
    if(trim($_POST) === '') {
        $commentError = 'Введите сообщение.';
        $hasError = true;
    } else {
        if(function_exists('stripslashes')) {
            $comments = stripslashes(trim($_POST));
        } else {
            $comments = trim($_POST);
        }
    }
    if(!isset($hasError)) {
        $emailTo = get_option('tz_email');
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        $subject = 'Сообщение с Блога от пользователя '.$name;
        $body = "Имя: $name \n\nE-mail: $email \n\nСообщение: $comments";
        $headers = 'От: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Ответить: ' . $email;
        $headers = "Content-type: text/plain; charset=\"utf-8\"";
        mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
} ?>

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

<?php the_content(); ?>

Взамен вставляем эти команды.

<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">
Спасибо, ваше сообщение отправлено.
 </div>

<?php } else { ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
Извините, произошла ошибка.
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

<ul class="contactform">

<li>
      <label for="contactName">Имя:</label>
      <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST)) echo $_POST;?>" class="requiredimya requiredField" />
      <?php if($nameError != '') { ?>
         <span class="error"><?=$nameError;?></span>
     <?php } ?>
    </li>


<li>
      <label for="email">E-mail:</label><input type="text" name="email" id="email" value="<?php if(isset($_POST)) echo $_POST;?>" class="requiredemail requiredField email" />
      <?php if($emailError != '') { ?>
         <span class="error"><?=$emailError;?></span>
      <?php } ?>
    </li>


<li>


<h2>Ваше сообщение</h2>

<label for="commentsText"></label>
      <textarea name="comments" id="commentsText" rows="10" cols="90" class="required requiredField"><?php if(isset($_POST)) { if(function_exists('stripslashes')) { echo stripslashes($_POST); } else { echo $_POST; } } ?></textarea>
      <?php if($commentError != '') { ?>
         <span class="error"><?=$commentError;?></span>
      <?php } ?>
    </li>


<li>
      <input type="submit" class="otpravit" value="отправить мне"/>
    </li>

  </ul>

      <input type="hidden" name="submitted" id="submitted" value="true" />
 </form>

<?php } ?>

Теперь сохраняем файл под названием feedback.php и закидываем в папку с активной темой.

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

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

Клиентская часть

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

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

А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим contact.php и custom.js.

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

$(".form").submit(function() {
var str = $(this).serialize();
$.ajax({
   type: "POST",
   url: "contact.php",
   data: str,
   success: function(msg) {
   if(msg == 'ok') {
      alert('Письмо отправлено');
   }
   else {
     alert('Ошибка! Возможно вы неправильно заполнили поля.');
   }
}
});
return false;
});
if (trim($_POST) == '') {
echo 'false';
}
else {
$txtname = trim($_POST);
$txtemail = trim($_POST);
$txtphone = trim($_POST);

// от кого
$fromMail = '';
// Сюда введите Ваш email
$emailTo = '';

$subject = 'Обратная связь';
$subject = "=?utf-8?b?". base64_encode($subject) ."?=";
$headers = "From: Пример формы<$fromMail>\n";
$headers .= 'Content-type: text/plain; charset="utf-8"\r\n';
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
// тело письма
$body = "Получено письмо с сайта ".$site." \n\nИмя: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nСообщение: ".$txtmessage;
mail($emailTo, $subject, $body, $headers );
echo 'ok';
}

Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.

demo

файлы

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения


С этим читают