Сделать простую форму обратной связи. Создаем форму обратной связи на PHP. Простая установка форм обратной связи в HTML

• Шаг 5 . По выше приведённому примеру добавьте остальные нужные Вам поля, каждый раз начиная с тега

  . Для установки поля с текстовым сообщением используйте тэг . Параметры «cols » и «rows » отвечают за ширину и высоту текстового поля. Можете задать параметры, какие Вам больше нравятся. У Вас должно получиться примерно так, как показано на скриншоте ниже.

• Шаг 6 . Чтобы защитить себя от ботов, которых сегодня в интернете довольно много, создайте ещё одну строку с помощью тэга . За счёт параметра «style=»display:none» » данное поле не будет видно простым смертным, однако ботами будет заполняться автоматически. Таким образом, Вы всегда сможете отличить живого человека от программы.

• Шаг 7 . Завершающим этапом разметки станет создание кнопки отправки. Для этого используется тэг . Создайте новый блок

  и внутри него впишите код кнопки со следующими параметрами:

  Отправить сообщение . Получиться должен похожий результат, как показано на скриншоте.

Работа с каскадными таблицами стилей (CSS)

• Как Вы уже успели заметить в процессе разметки, у нас получилось что-то очень кривое, невзрачное и отвратительное. Для того, чтобы придать форме обратной связи более или менее опрятный вид, одного языка HTML будет недостаточно. Для этой цели придётся прибегнуть к использованию стилей CSS .
• В том случае, если Вы воспользовались советом подтянуть свои базовые навыки на ресурсе htmlbook.ru , то задать определённые параметры оформления для всех частей формы с помощью CSS Вам не составит никакого труда. Если же у Вас нет желания или времени со всем этим возиться, то мы предоставим Вам уже готовый код и расскажем, как его подключить.

Подключить стили CSS к HTML можно двумя способами:

• Скопируйте код из нашего файла каскадных таблиц в самый низ файла style.css , который присутствует на хостинге сайта
• Переместите наш файл стилей к себе на хостинг и подключите его

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

Подключение файла PHP и его настройка

Как уже было сказано ранее, скрипт PHP отвечает за исполнение формы обратной связи. Однако для того, чтобы более или менее понять принцип работы языка PHP , необходимо прочитать большой объём литературы и провести приличное количество часов за практикой. Поэтому, как и в случае с CSS , мы предоставим Вам уже готовый файл с php-скриптом, который останется только прикрепить к документу с формой.

В отличие от файла style.css , файл с php-скриптом прикрепляется в свойствах самой формы. Начнём по порядку:

• Шаг 1 . Откройте ранее написанный код и найдите строку с открытым тегом формы. Добавьте к нему свойства «action=»contact-form.php» » и «method=»post» ». Смотрите пример на скриншоте.

• Шаг 2 . Скачайте наш php-файл и поместите его на хостинг в ту же папку, где находится html-документ с формой. Таким образом, php и html файлы будут взаимодействовать между собой.

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

• Шаг 4 . Далее необходимо добавить ещё две переменных с адресом вашей электронной почты и темой письма, которая будет отображаться на вашем ящике. В строке с переменной «$address » укажите E-mail, а в строке «$sub » тему письма как показано на скриншоте.

• Шаг 5 . В строке с переменной «$mes » настраивается формат письма, которое Вы получите на почту. Вы можете переписать его без изменений или отредактировать по собственному вкусу.

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

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

Подборка красивых дизайнерских форм обратной связи на HTML и CSS для разных целей

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

• Немного поискав, мы нашли для Вас подборку из 35 красивых всплывающих дизайнерских форм обратной связи, которые написаны на HTML и CSS . Данные формы подходят для таких движков, как WordPress и Joomla , имеют простую и лёгкую настройку из панели управления, а также прекрасно подходят для сайтов без движка.

ВИДЕО: Всплывающая форма обратной связи для сайта WordPress

От автора: приветствую вас, друзья. Данная статья будет продолжением , в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.

Исходные файлы текущей статьи вы можете скачать по .

В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.

Начнем с синтаксиса функции mail . Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:

to — email получателя (также можно указать несколько адресов, перечислив их через запятую);

subject — тема письма;

message — текст письма.

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

Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким:

Ваше сообщение отправлено

Ошибка!

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

Как видим, код работает, в ответ мы получаем сообщение о том, что письмо отправлено. Поскольку мы работаем на локальном сервере, здесь письма реально не отправляются функцией mail(), они сохраняются в виде текстового файла в специальной папке. В Open Server это папка \userdata\temp\email\. Откроем эту папку и убедимся, что письмо там есть, примерно так оно будет выглядеть:

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

$(function(){ $("#recall").submit(function(e){ e.preventDefault(); var data = $(this).serialize(); $.ajax({ url: "mail.php", type: "POST", data: data, beforeSend: function(){ $("#submit").next().text("Отправляю..."); }, success: function(res){ $("#recall").find("input").val(""); $("#submit").next().html(res); }, error: function(){ alert("Ошибка!"); } }); }); });

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

Поэтому если на вашем ресурсе контактного раздела нет — стоит его установить. Разберемся, как это сделать.

Решения для организации обратной связи

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

Можно воспользоваться следующими универсальными решениями:

• прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей
• Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php, которые зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов
• Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.

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

Простая установка форм обратной связи в HTML

Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий их выбор представлен, например, на этом сайте . Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.

Но для начала следует не забыть внести поправки в стандартный файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.

Папку с исправленными файлами нужно скопировать в корневой каталог сайта, но перед этим ограничив ее индексацию в файле Robots.txt (Disallow: /sendmail-zakaz ).

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

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

После того, как все необходимые параметры внесены, следует ввести проверочную капчу и нажать на кнопку «Генерировать», а после — «Получить код».

Полученный код нужно просто скопировать на выбранную страницу сайта.

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

Для функционирования формы нужен файл-обработчик. Назовем его mail.php и сохраним в такой код:

Форма обратной связи в Joomla

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

Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».

Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».

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

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

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

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

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

В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».

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

Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:

Обратная связь для WordPress

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

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

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

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

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

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

Формы обратной связи для Joomla и WordPress

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

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

Так вы можете скачать отдельный модуль обратной связи для Джумлы под названием Rapid Contact , который может дать вам новые возможности и функционал (см. демо). Про настройку и возможности этого модуля сможете прочитать . К тому же, стандартный компонент в Joomla для реализации обратной связи не обладает достаточной гибкостью и не позволяет использовать защиту от спама (капчу), а также не позволяет создавать несколько разных контактных форм на сайте.

Эти проблемы решаются с помощью альтернативного компонента для этого движка под названием aiContactSafev , который позволяет создавать на сайте любое количество форм обратной связи (можно привязать их к разным E-mail адресам) и имеет возможность добавлять поле для загрузки файлов, равно как и любые другие типы полей.

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

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

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

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

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

Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7 . Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA .

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

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

Так, это мы говорили про реализацию обратной связи в Joomla и WordPress с помощью соответствующих расширений.

Но существует еще несколько способов :

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

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

Конструкторы и генераторы форм обратной связи

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



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



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



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



Обратная связь для Html сайтов (без Php)

Есть онлайн сервисы, предоставляющие бесплатно свои собственные Php обработчики, которые будут расположены на их серверах. К такому типу относится :



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



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

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

Есть еще один очень похожий по функционалу генератор форм обратной связи . Созданные с помощью него конструкции тоже можно будет размещать на хостингах без поддержки Php (достаточно указать адрес страницы и E-mail, на который будут отправляться сообщения). Рассказывать про него много я не буду, ибо он по своей сути очень похож на описанный чуть выше конструктор.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Google Forms - как создать интернет-опрос на сайте в Гугл Формах Онлайн HTML редакторы - визуальные, IDE и редакторы для установки на сайт
SendPulse - Push уведомления для сайта и бесплатный вариант их подключения от СендПульс
Ускорение и защита вашего сайта в облачном сервисе Айри.рф
Иконки, значки, фоны, картинки и логотипы для сайта (онлайн-сервисы IconFinder, Freepik, PSDGraphics и другие) Вебинар - это дань моде или полезный инструмент коммуникации
CoMagic - аналитика продаж или как привлекать посетителей на свой сайт и при этом не вылететь в трубу
Викс - бесплатный онлайн конструктор сайтов Google Alerts - что это такое и как его использовать, примеры создания полезных оповещений

Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.

UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу (Екатерину Карачеву)

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

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

Внешний вид нашей формы выглядит следующим образом

В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на как это работает)))

Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.

Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю)) Теперь о само насущном, принцип работы:

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

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

Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.

"; } // Проверка телефона function ValidateTel($valueTel) { $regexTel = "/^{7,12}$/"; if($valueTel == "") { return false; } else { $string = preg_replace($regexTel, "", $valueTel); } return empty($string) ? true: false; } if(!$tel) { $error .= "Пожалуйста введите телефон.
"; } if($tel && !ValidateTel($tel)) { $error .= "Введите корректный телефон.
"; } if(!$error) // Проверка сообщения (length) if(!$message || strlen($message) < 1) { $error .= "Введите ваше сообщение.
";// В этой строчке ставиться минимальное ограничение на написание букв. } if(!?utf-8?b?". base64_encode($name) ."?="; $message ="\n\nИмя: ".$name."\n\nНомер телефона: " .$tel."\n\nСообщение: ".$message."\n\n"; $mail = mail("[email protected]", $subject, $message, "From: ".$name_tema." <".$tel."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion()); if($mail) { echo "OK"; } } else { echo "

Работоспособность формы

Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей (письма не приходят на mail.ru). Будьте внимательны на этот счет.

Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+» .

Заполненная форма с тестовыми данными

Письмо на почтовом ящике

Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта сайт» меняется в обработчике contact.php

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

Подготовлено при поддержке,