Что такое форма обратной связи. Создаем форму обратной связи на html

Форма обратной связи уже давно является наиболее приемлемым способом общения между владельцем ресурса и пользователем.

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

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

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

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

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

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

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

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

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

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

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

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

Основные виды форм для сайта

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

1. Форма заказа обратного звонка

   Рекомендуем всем коммерческим сайтам использовать данную форму. Идеальное место размещения - шапка сайта, рядом с номером телефона. Причем не стоит показывать поля ввода сразу, лучше их скрыть под кнопкой «Заказать звонок» и выводить после клика. Не обязательно делать кнопку яркой, в виде ссылки она будет так же хорошо заметна:

   В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:

   

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

   

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

2. Форма консультации

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

   Первый вариант размещения (пример с сайта Танго и Кэш):

   Второй вариант размещения (пример с сайта Okna-dpa):

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

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

   Форма обратной связи на странице контактов YouDesign:

3. Форма заказа услуг

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

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

   • «Вид услуги» или «Тариф» - данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
   • «Имя»
   • «Телефон» - сделайте поле обязательным для заполнения
   • «Email» - чтобы продублировать информацию о заказе клиенту
   • «Комментарий» - возможно, у клиента есть уточнения

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

4. Форма заказа товаров

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

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

   Пример размещения полей в форме для новых пользователей на Ozon:

   Для старых клиентов. Те, кто заказывают повторно, уже указали всю контактную информацию, поэтому в форме помимо списка товаров должны быть только пункты выбора доставки и оплаты. И если вы используете промокоды, то добавьте поле для их ввода, но не более. Не нужно заново просить контакты клиента.

   Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):

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

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

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

5. Форма регистрации

   Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант - в верхнем правом углу в виде ссылки (пример от Аква-Вива):

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

   Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:

   

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

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

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

6. Форма авторизации

   

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

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

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

   Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):

   Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:

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

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

1. Формы во всплывающих (модальных) окнах. Следует выводить их только после клика пользователем по нужной ссылке или кнопке. Никаких «всплывашек» при открытии Главной страницы или при попытке клиентов покинуть сайт. Онлайн-консультант тоже не должен «выскакивать», предлагая начать чат. Такие вещи раздражают и отталкивают пользователей. Антипример от Delicat-Servis (сейчас ребята убрали эту проблему, и форма раскрывается только после клика):
2. Использование анимации. Выделим в отдельный пункт, так как это распространенная проблема. Форма не должна мигать, прыгать по экрану или выплывать на середину экрана для привлечения внимания. Такая анимация мешает пользователю изучать основное содержимое страницы и при долгом просмотре раздражает. Делайте кнопки на формы контрастными, и тогда клиент их точно не пропустит.
3. Название формы. Всегда подписывайте формы, чтобы пользователь видел, что заполняет. Правильно, когда в заголовке прописывается название тарифа или услуги, но если заголовок получается слишком длинным, то добавьте данную информацию в виде текста ниже, как это сделали Fullhousedesign:

   

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

   

   Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):

   

5. Обязательные поля. Всегда помечайте * поля, обязательные для заполнения. Выше при описании форм мы указали, какие выбрать. Исключение составляют формы с один полем - и так ясно, что оно обязательное. Пример выделения обязательных полей от компании Izto:
6. Ошибки в формах. Пользователи часто ошибаются и не замечают этого, поэтому рекомендуем добавить проверки ввода для контактной информации и обязательных полей. Сообщения об ошибках лучше выводить в виде текста рядом с соответствующим полем. Они не должны исчезать или перекрывать поля ввода. Можно выделять поле красной рамкой, но сообщение тоже должно присутствовать. Пример понятных сообщений об ошибках от Aristo:
7. Подтверждение отправки данных. После того, как клиент заполнил все поля и нажал кнопку отправки, нужно вывести заметное сообщение с подтверждением, чтобы он не пытался заполнить форму повторно. Можно использовать модальные окна или, если форма и так во всплывающем окне, разместить под кнопкой отправки соответствующий текст. Также в сообщении стоит указать, когда конкретно специалисты свяжутся с клиентом или что ему делать дальше. Простого «Спасибо, данные отправлены» недостаточно. Пример подробного подтверждения отправки от компании Кабельные системы:

   

8. Использование «капчи». Не рекомендуем использовать в формах проверку на робота, так как она заставляет пользователей совершать лишние действия и может даже стать причиной ухода с сайта. Используйте незаметные для пользователей методы защиты, например, отслеживайте на сервере время заполнения формы (если оно слишком маленькое, то значит форму заполняет робот), добавляйте скрытые поля (которые сможет заполнить только робот), используйте анти-спам сервисы для проверки и т.д. На самый крайний случай можно воспользоваться проверкой ввода от Google:

   

9. Сохранение данных. Возможно клиент случайно закрыл форму, случилась ошибка или перезагрузка, и чтобы не пришлось вводить данные заново - сохраняйте их до отправки. Особенно этот совет касается длинных форм.
10. Кнопка сброса данных. Ни в коем случае не размещайте ее рядом с кнопкой отправки, чтобы пользователь случайно не кликнул по ней. Разместите ее в другой части формы или вовсе уберите. Пример неудачного расположения кнопок на сайте Avarit:

    

11. Закон о Персональных данных. Чтобы избежать штрафов за сбор персональных данных клиентов, необходимо подготовить нормативные документы и написать об этом на сайте.

Итоги

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

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

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

Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.

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

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

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

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

Принцип работы формы обратной связи на html

Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).

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

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

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

Для работы контактной формы, созданной на html, требуется 3 элемента.

Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

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

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

Демо версия формы

Настройку каждого из этих элементов мы с вами разберем по шагам.

Создание HTML макета

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

Для обозначения форм в html используется тег

Начнем с первой строки.

class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.

action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.

Дальше идут 4 блока

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

Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.

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

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

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

pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст , в противном случае будет ошибка.

Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .

Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.</p><p><b>Защита от спама </b> – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.</p><p>И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом <button> </button>, имеющим свой класс для настройки внешнего вида и тип “submit”.</p><p>Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.</p><h2>Оформление CSS стилями</h2><p>Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась <a href="/ispolzovanie-tega-form-action-search-html-formy-primer-sozdaniya-krasivoi-html.html">красивая форма</a> обратной связи, придется поработать над ее стилями (html будет недостаточно).</p><p>Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.</p><p>Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.</p><p>Подключить стили можно двумя способами:</p><ol><li>Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)</li><li>Поместить файл, который я дал, на ваш хостинг и подключить его.</li> </ol><p>Подключаются файлы стилей следующим кодом <link rel=”stylesheet” media=”screen” href=”styles.css” >, размещаемым внутри <head></head>. Если файл со стилями (styles.css) находится не в одной папке с <a href="/sozdat-veb-stranicu-html-kak-sozdat-html-stranicu-poshagovaya-instrukciya.html">html страницей</a>, то пропишите <a href="/adb-ili-fastboot-ne-yavlyaetsya-vnutrennei-ili-vneshnei-komandoi-pokazat.html">полный путь</a> до него.</p><p>В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми <a href="/kak-pererisovat-tekstury-v-minecraft-bazovoe-znanie-etogo-redaktora.html">базовыми знаниями</a>, вы сможете легко его править.</p><h2>Настройка PHP кода (добавлена защита от спама)</h2><p>Как и в случае со стилями, я дам вам <a href="/krasivye-gradienty-css-fona-lineinyi-gradient-gotovyi-kod.html">готовый код</a>, обрабатывающий <a href="/dlya-chego-ispolzuyutsya-formy-html-formy-v-html-sozdanie-paneli-registracii.html">HTML форму</a> обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.</p><blockquote><p>Для сайтов, использующих кодировку windows-1251 и <a href="/chto-za-oshibka-http-error-500-oshibka-internal-server-error-chto-eto-izmenenie-versii.html">версию php</a> 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.</p> </blockquote><p>Помните, в свойствах формы (в <a href="/pochemu-ne-otkryvaetsya-fail-html-chem-otkryt-fail-html-na.html">html файле</a>) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.</p><p><?php /* Задаем переменные */ $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $tel = htmlspecialchars($_POST["tel"]); $website = htmlspecialchars($_POST["website"]); $message = htmlspecialchars($_POST["message"]); $bezspama = htmlspecialchars($_POST["bezspama"]); /* Ваш адрес и тема сообщения */ $address = "pochta@kakoy-to-sajt.com"; $sub = "Сообщение с сайта ХХХ"; /* Формат письма */ $mes = "Сообщение с сайта ХХХ.\n Имя отправителя: $name Электронный адрес отправителя: $email Телефон отправителя: $tel Сайт отправителя: $website Текст сообщения: $message"; if (empty($bezspama)) /* Оценка поля bezspama - должно быть пустым*/ { /* Отправляем сообщение, используя mail() функцию */ $from = "From: $name <$email> \r\n Reply-To: $email \r\n"; if (mail($address, $sub, $mes, $from)) { header("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} else { header("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} } exit; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ ?></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><?php </p><p>/* Задаем переменные */ </p><p>$name = htmlspecialchars ($_POST [ "name" ] ) ; </p><p>$email = htmlspecialchars ($_POST [ "email" ] ) ; </p><p>$tel = htmlspecialchars ($_POST [ "tel" ] ) ; </p><p>$website = htmlspecialchars ($_POST [ "website" ] ) ; </p><p>$message = htmlspecialchars ($_POST [ "message" ] ) ; </p><p>$bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ; </p><p>/* Ваш адрес и тема сообщения */ </p><p>$sub = <span>"Сообщение с сайта ХХХ" </span>; </p><p>/* Формат письма */ </p><p>$mes = <span>"Сообщение с сайта ХХХ.\n </p><p>Имя отправителя: $name </p><p>Электронный адрес отправителя: $email </p><p>Телефон отправителя: $tel </p><p>Сайт отправителя: $website </p><p>Текст сообщения: </p><p>$message" ; </p><p>if (empty ($bezspama ) ) <span>/* Оценка поля bezspama - должно быть пустым*/ </p><p>/* Отправляем сообщение, используя mail() функцию */ </p><p>$from = <span>"From: $name <$email> \r\n Reply-To: $email \r\n" </span>; </p><p>if (mail ($address , $sub , $mes , $from ) ) { </p><p>header () ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо отправлено, через 5 секунд вы вернетесь на страницу XXX</body>" </span>; } </p><p>else { </p><p>header (<span>"Refresh: 5; URL=https://сайт" </span>) ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо не отправлено, через 5 секунд вы вернетесь на страницу YYY</body>" </span>; } </p><p>exit ; <span>/* Выход без сообщения, если поле bezspama заполнено спам ботами */ </p> </td> </tr></table><p>Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:</p><p>$название = htmlspecialchars($_POST["название"]);</p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p>$ название= htmlspecialchars ($ _POST [ "название" ] ) ; </p> </td> </tr></table><p>Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.</p><p>Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.</p><p>Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.</p><p>В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.</p><p>Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.</p><p>Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.</p> <h2>Вставка формы на страницу сайта</h2><p>Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.</p><p>Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.</p><p><b><span>Скачать файлы контактной формы </span> </b></p><h2>Активный анти спам с вводом данных в поле</h2><p>Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.</p><p>Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.</p><p>Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name = “bezspama” ). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:</p><p><p> <label for="bezspama">2+2*2=:</label> <input name="bezspama" type="text" required /> </p></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p></td></tr></table> <p>Форма обратной связи служит для отправки сообщений посетителями непосредственно со страницы вашего сайта. Можно, конечно, оставить свой E-mail, чтобы люди могли написать вам письмо, но, согласитесь, что иметь на сайте специальную форму обратной связи (ФОС) гораздо солиднее и ваши гости и посетители скорее согласятся связаться с вами по такой форме, нежели просто отправить письмо на оставленный адрес электронной почты. Такой метод общения удобен ещё по одной причине - возможно, не у всех пользователей компьютера и Интернета есть настроенный почтовый клиент и адрес электронной почты.</p> <p>Да и Вам, как владельцу сайта не стоит особенно выставлять на всеобщее обозрение свой адрес электронной почты, потому, что он может попасть в руки спамеров и тогда «выгребай лопатой» ненужную корреспонденцию из почтового ящика.</p> <p>Не думайте, что ваш E-mail, опубликованный всего-то на одной-двух страницах, останется незамеченным спамерами. В арсенале серьёзного спамера есть специальные программы с помощью которых собираются все корректно отображенные адреса с разных сайтов, форумов, страниц объявлений и т.д. А если Вы уж твердо решили оставить свой E-mail адрес в Интернете, то пишите его некорректно, хотя бы так: vasja_pupkinsobakamail.ru. Посетителям вашего сайта будет понятно, а для спамерских программ - это ненужная информация. Но, это уже другая тема для разговора.</p> <p>Таким образом, ФОС поможет Вам связаться с посетителями сайта не открывая своего адреса электронной почты. В этом и есть её главное предназначение. Используя такую форму, Вы можете быть уверены, что письмо, отправленное Вам, обязательно дойдёт, конечно, при условии правильного заполнения полей формы. Потому, что сообщение будет отправлено в пределах того же домена сразу в почтовый ящик админа сайта. То есть у сообщения не будет возможности потеряться.</p> <h2>Как сделать форму обратной связи?</h2> <p>Существует несколько эффективных способов организации ОС на сайте. Это могут быть:</p> <ul><li>универсальные скрипты на PHP и jQuery;</li> <li>плагины и модули для CMS;</li> <li>web-формы не требующие наличия почтового клиента;</li> <li>онлайн-сервисы и конструкторы форм.</li> </ul><p>Например, ФОС на PHP реализуется с помощью скрипта .</p> <p>Для работы такого скрипта на вашем хостинге должна быть включена поддержка PHP и файл страницы вашего сайта, на которой располагается форма обратной связи, должен иметь php формат.</p> <p>А у Вас, к примеру, все файлы в html формате. Как можно эту ситуацию исправить? Как сделать так, чтобы файл.html превратился в файл.php ?</p> <table class="demo"><tr><td> <p>Предположим, что Вы переименовали файл index.html в index.php. Для веб-сервера Apache, который установлен на большинстве хостингов, необходимо создать файл .htaccess в корневой папке сайта, где лежит файл главной страницы сайта, и добавить в него следующий текст:</p><p>DirectoryIndex index.php RewriteEngine on RewriteBase / RewriteRule ^index\.html?$ index.php </p><p>Если файл .htaccess уже есть нужно открыть его с помощью текстового редактора, к примеру, блокнота и вставить вышеотмеченный текст строкой ниже.</p> <p>Для других web-серверов можно использовать решение на основе редиректа. Убедитесь, что по умолчанию загружается файл index.php . После этого создайте файл index.html и добавьте в него следующий код:</p><p> <html> <head> <title>Редирект</title> <META CONTENT="0; URL="/"> </head> <body> </body> </html> </p></td> </tr></table><p>Согласитесь, это не очень сложно. После совершения такой малой операции, вы можете смело переименовывать нужные файлы из html в php . Естественно, при условии, что файл .htaccess находится в той же директории, что и все переименованные вами файлы.</p> <h2>Немного об онлайн-сервисах</h2> <p>Вариантов формы обратной связи великое множество. При желании можно воспользоваться таким авторским вариантом<br><span>//www.wr-script.ru/sendmail/README.html </span><br>Внешний вид формы скрипта выглядит так<br><span>//www.wr-script.ru/sendmail/sendmail.php </p> <p>Хорошие результаты можно получить используя сервис<br><span>//ip-whois.net/forma-obratnoj-svyazi/ </p> <p>Вот один из вариантов внешнего вида обратной связи, генерируемый этим сервисом:</p> <p>Этот сервис несомненно хорош и предоставляет прекрасную возможность без особых усилий организовать обратную связь с посетителями, но, на мой взгляд, лишает возможности работы с кодом напрямую и получения удовольствия от собственноручно выполненной работы. Если Вы решили ограничиться статическим сайтом, то такая форма связи - просто находка для Вас. А в противном случае, когда у Вас сайт с поддержкой услуг PHP, MySQL и, возможно, других функций, предоставляемых вашим Хостингом, то мне кажется, Вы имеете право большого выбора из множества вариантов, который мы рассмотрим далее. Эти варианты смотрите .</p> <p>Спасибо за внимание. Удачи в изучении материала и развитии вашего сайта! Всегда ваш L.M.</p> </td> <br><img src='https://i2.wp.com/nesmelov.ru/wp-content/uploads/2015/12/forma-obratnoj-svyazi-dlya-sajta1-550x412.jpg' width="100%" loading=lazy><p>Добрый день, форма обратной связи должна присутствовать на каждом сайте. Сегодня я покажу пример готовой формы для вставки на любой сайт, в том числе и на движок wordpress. Готовый пример html и php кода можно будет скопировать на свой сайт. Кроме готового примера, существует много плагинов, которые так же пользуются большой популярностью. На многих сайта такая форма уже встроена в тему, но иногда бывает необходимость добавить еще одну на другую страницу или заменить старую.<br><i> </i></p> <p>Перед тем, как начинать писать эту статью, я прошелся по интернету в поисках ответа на этот вопрос. Пересмотрев больше количество сайтов и блогов, я нашел очень мало качественных ответов по вставке формы обратной связи на сайт. Большинство материалов написано по работе с плагинами. В некоторых статьях не совсем понятно, что и как нужно делать, код не работает, письма не приходят...и так далее.</p> <p>Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев. Пример формы находится у меня на . В готовый пример я добавил немного стилей для красоты, чтоб форма совсем уже не смотрелась «убого». При желании можно все изменить на ваше усмотрение.</p> <h2>Готовая форма обратной связи для сайта на html</h2> <p>В данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.</p> <p><form action="/wp-content/themes/xmarkup/form.php" method="post" name="form">Имя<input class="inp" style="width: 30%;" name="name" type="text" /> E-mail:<input class="inp" style="width: 30%;" name="email" type="text" /> Тема сообщения<input class="inp" style="width: 30%;" name="temma" type="text" /> Ваш текст: <textarea class="inp" style="width: 80%;" cols="1" name="massage" rows="5">

В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php (про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css

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

Inp{ padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }

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

Php код формы

С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

(