Как создать форму обратной связи в WordPress. Создаем форму обратной связи на PHP Форма обратной связи работает со всеми адресами

Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.

Почему форма на html и php?

Для CRM, таких как Wordpress, Joomla и других можно найти различные плагины, что бы установить форму обратной связи для сайта. Однако, что мне не нравится в таких плагинах, так это их низкая производительность и замедление сайта. Так как эти плагины все равно выдают в результате тот же код html, то предлагаю использовать простую но полностью функциональную форму, которую можно так же изменить под обратный звонок с сайта.

Форма связи на html просто вставляется в админке Joomla, OpenCart, а если ваш сайт самописный или вы используете любой фреймворк то использовать представленный код не составит труда и главное, сайт будет загружаться так же быстро как и до вставки кода.

Структура, как организована обратная связь для сайта

Что бы все заработало, приведу структуру, что нужно что бы форма связи или звонка работала?

Код html вставленный на страницу + css стили.

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

В коде html содержится содержится информация, какие поля для ввода нужно показывать и подписи к ним. Стили css отвечает за визуальное оформление самой формы и отображение данных. При нажатии на кнопку отправить вызывается php файл, который и отправляет письмо на указанную почту. Подробнее исходный код формы рассмотрим дальше.

Код формы обратной связи на html

Вначале приведем полный код формы обратной связи для сайта на HTML.

Имя * Номер телефона (с кодом) * Сообщение

Сама форма находится между html тегами . Самому тегу формы присвоен css класс class="form-zvonok" который используется для задания отображения формы через css стили.

Атрибуты формы autocomplete="off" - автозаполнение формы отключено. Атрибут формы action="http://site.com/email.php" , в нём указан адрес файла, который вызывается и которому передаются данные формы после нажатия кнопки «отправить».

Атрибут method="post" , в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод Get отправляет данные формы через адресную строку. Учитывая необходимость SEO оптимизации сайта, в случае формы обратной связи для сайта лучше отправлять данные методом Post, так как в случае метода Get у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими незначительными параметрами.

Внутри этого дива, находятся дивы содержащие теги и , и в самом конце - кнопка отправить, при нажатии на нее происходит отправка данных формы.

Отсылка письма php скриптом

Приведем простой скрипт для отправки письма

Чтобы отправить письмо на необходимый email, замените значение переменной $to [email protected] на необходимый адрес. Переменная $subject - тема сообщения, показывается почтовыми программами при просмотре списков писем. $message - само тело письма, это и есть само сообщение. $headers - шапка письма, в ней указывается тип письма, например html, также кодировка письма, от кого доставлено письмо и на какой emal отправлять ответ.

Оформление формы обратного звонка для сайта css

Приведем код css оформления для формы обратной связи сайта.

Obratnuj-zvonok{ width: 100%; max-width: 350px; } .form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; } .form-zvonok div{ padding: 15px 0; } .bot-send-mail{ box-sizing: border-box; width: 100%; } .form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; } .form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; } .form-zvonok label span{ color: red; } .form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; } .form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; }

Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px, если шире, то форма html выглядит растянутой:

Obratnuj-zvonok{ width: 100%; max-width: 350px; }

Что бы упорядочить поля и кнопку отправить, обертываем их в div , отображение ставим в flex и направление отображения столбцом column . Для красоты добавляем отступы сверху и снизу на 20px:

Form-zvonok{ width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; }

Подпись и поле ввода обернуты в div:

Имя *

Для этого дива присвоим отступы:

Form-zvonok div{ padding: 15px 0; }

Кнопке отправить делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box , что бы она не выходила за пределы родительского блока:

Bot-send-mail{ box-sizing: border-box; width: 100%; }

Аналогично для подписей и полей ввода:

Form-zvonok label,.form-zvonok input{ display: block; width: 100%; box-sizing: border-box; }

Настраиваем красивый внешний вид подписей и полей ввода:

Form-zvonok label{ margin-bottom: 5px; font-weight: bold; } .form-zvonok input{ padding: 10px 15px; margin-top: 10px; }

Звездочку делаем красной:

Form-zvonok label span{ color: red; }

Оформляем кнопку отправить:

Form-zvonok .bot-send-mail{ padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: #009b97; cursor: pointer; border: 3px #009b97 solid; border-radius: 5px; }

При наведении на кнопку настраиваем изменение цвета:

Form-zvonok .bot-send-mail:hover{ color: #009b97; background-color: #fff; }

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Форма обратной связи на сайте – это механизм для общения между посетителем ресурса и его администраторами.

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Для чего нужна обратная связь

Ответы на вопросы посетителей.
Анкетирование.
Прием заказов посредством сайта.
Прием заявок на обратные звонки.

Два вида коммуникации с посетителем

Отправка на email. После заполнения предложенных полей форма отправляется на e-mail администратора сайта. Все дальнейшее общение происходит посредством обмена электронными письмами или выходом в офф-лайн (телефон и т.п.).
Отправка в систему управления сайтом. После заполнения администратор сайта видит запрос в списке заполненных данных в CMS, и там же может его обработать. К примеру, таким образом может быть реализована гостевая книга или система «Вопрос-ответ». Покупка товаров в интернет-магазине работает подобным образом.

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

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

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

Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

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

Структура

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

Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

Помимо текстовых полей, страница может содержать элементы выбора.

Пример сервиса обратного звонка

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

Пример усложненной формы обратной связи для заказа

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

Где размещать

Обычно применяют два вида размещения формы:

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

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

Правила хорошего тона

После заполнения полей и отправки сообщения посетитель должен получить на экране ответ типа «Спасибо за ваш вопрос. Мы ответим вам в течение 1 часа». Если посетитель не получает ответ в течение установленного времени, его расположение к вам резко падает. Факт игнорирования очень неприятен и говорит о том, что сайт не ценит своих клиентов. Обратная связь должна работать, а не собирать мертвые грузы из неотвеченных вопросов посетителей.

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

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

Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

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

Форма обратной связи php — структура

Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
index.html — индексный файл нашего одностраничника
index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

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

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Исходный код вызова формы и обработчика

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

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 37 38 39 40 41 42

С вами свяжутся

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Проверка работоспособности формы

Вызываем окно и вводим данные для тестовой проверки нашей формы

Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи

У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

Создание формы обратной связи Создание формы обратной связи на сайте

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

Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)

Рис.1. Простая форма обратной связи

Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.

1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.

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

Ваш e-mail (для ответа):

Ваше сообщение:

Как видим, вся форма создаётся тегом с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге задаются размеры области для ввода текста сообщения: число строк и колонок (rows="3" cols="25").

3. Создадим новую страницу mail.php , аналогичную обычной HTML, только имеющую расширение.php. Полный код страницы показан на рис.2:

Обратная связь

Рис.2. Код страницы обработки формы обратной связи

Красным цветом выделены адреса ссылок, на которые необходимо обратить внимание:

[email protected] - адрес г.Пупкина заменить на адрес вашей почты, куда будут поступать сообщения от посетителей сайта, а также от неутомимых спамеров. Кстати, для защиты от них в форму часто вводят так называемую капчу (англ. CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart - полностью автоматизированный публичный тест Тьюринга для различия компьютеров и людей). Обычно это сильно искаженные цифры и буквы, которые просят ввести перед отправкой сообщения. О капче поговорим в одной из следующих статей.
Если вы хотите отправлять письма на несколько адресов, то просто перечислите их через запятую.
a href=index.html - адрес главной (домашней) страницы сайта.

Созданную страницу mail.php необходимо поместить в тот же каталог сайта (директорию, папку), где расположена и страница с формой обратной связи.

Проверьте работоспособность формы обратной связи. Если всё сделано аккуратно, то после заполнения формы и нажатия Отправить сообщение должен появиться следующий текст: "Спасибо за отправку вашего сообщения. , чтобы вернуться на главную страницу ". После этого вы обнаружите в своём почтовом ящике (или другом, который вы указали при создании формы обратной связи) собственное послание себе любимому.

Замечание: на некоторых хостингах новая (только что установленная на сайте) форма обратной связи начинает работать не сразу, и первые письма не доходят совсем или поступают с задержкой на 1-2 дня. Вероятно, идет "притирка шестеренок", а затем все работает нормально. Кроме того, с некоторых хостингов не доходят письма на определенные адреса, например, у меня были проблемы с ящиком на Рамблере и Mail.ru. Для решения этих проблем обратитесь к вашему хостеру - обычно помогают.

Иногда при использовании описанной формы обратной связи возникают проблемы с кодировкой. Если в пришедшем письме вместо родной кириллицы текст состоит из "кракозяблов" или пустых квадратиков, то приходится вручную подбирать кодировку, что конечно же неудобно. Чтобы этого не происходило, проверьте, что ваша страница с формой обратной связи имеет кодировку charset=utf-8 . Если вы используете программу Adobe Dreamweaver , то для этого надо выбрать раздел меню Изменить - Свойства страницы - Кодировка .

Подробнее проблема с кодировкой файлов сайта рассмотрена в статье Проблемы с кодировкой в форме обратной связи .

В описанном примере для простоты сообщение об отправке письма выводится на пустой странице. Конечно, вы можете разместить его на любой странице своего сайта, чтобы посетитель мог использовать навигацию (меню) для выбора дальнейших действий. Для этого поместите РНР-код (то, что расположено от ) в нужное место страницы с меню и измените её название на mail.php.

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

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

HTML

Итак, начнем, как всегда, с обычной заготовки – html . Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.

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

CSS

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

Form{ max-width: 400px; width: 100%; margin: 0 auto; } input{ box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); padding: 10px 20px; width: 100%; margin: 10px 0; outline: none; } input{ background: red; border: none; box-shadow: 0px 2px 0 1px #C50909; border-radius: 5px; color: white; text-transform: uppercase; font-weight: 600; width: 200px; cursor: pointer; transition: 0.3s; } input:hover{ background: black; box-shadow: 0px 2px 0 1px black; }

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

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

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

А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 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; });

Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit , которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.

If (trim($_POST["mfbPhone"]) == "") { echo "false"; } else { $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail"]); $txtphone = trim($_POST["mfbPhone"]); // от кого $fromMail = "[email protected]"; // Сюда введите Ваш email $emailTo = "[email protected]"; $subject = "Обратная связь"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "From: Пример формы\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

файлы

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

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

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

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