Настраиваемая форма обратной связи: как создать онлайн? Как сделать красивую всплывающая форму обратной связи HTML и PHP с телефоном и отправкой заказа на электронную почту?

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

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

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

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

Рисунок 1. Что такое форма обратной связи и почему она так необходима?

Что такое форма обратной связи и почему она так необходима?

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

Форма обратной связи представляет собой отдельную страницу или блок (отдел), состоящий из нескольких полей ввода текста и кнопки «Отправить». Как правило, стандартная форма имеет следующие поля:

• ФИО
• E-mail (адрес электронной почты)
• Номер мобильного телефона
• Адреса вашего сайта
• Поле для ввода текстового сообщения

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

Рисунок 2. Что такое форма обратной связи и почему она так необходима?

• Кроме того, к форме обратной связи некоторые владельцы добавляют карты Google или Яндекс, формы входа на сайт с помощью социальных сетей «ВКонтакте», «Facebook», «Google+» и так далее. Но мы поговорим о создании простейшей формы обратной связи, для которой Вам потребуется исключительно знание основ языка разметки HTML и ничего более.

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

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

Для воссоздания рабочей формы обратной связи Вам потребуется три важных элемента, один из которых отвечает за разметку и структуру формы (HTML), второй за её внешнее оформление (CSS), а третий за обработку и передачу данных (PHP). Начнём по порядку:

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

• Шаг 1. Для того, чтобы обозначить форму в HTML используется тэг <form> </form>. Внутри него будут задаваться размеры, стили и другие жизненно важные свойства формы. При записи самого тэга ему необходимо задать для обозначения класс, который в дальнейшем поможет установить для формы CSS стили.

Рисунок 1. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

• Шаг 2. Далее для создания первого поля нашей формы внутри тэга <form> необходимо написать блочный тэг <p>, которой отвечает за создание новой строки.

Рисунок 2. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

• Шаг 3. Внутри тэга <p> с новой строки вписываем следующий тэг: <label for=»name»>Имя</label>. Он отвечает за наименования будущего поля формы.

Рисунок 3. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

• Шаг 4. С новой строки всё в том же тэге <p> прописываем тэг создания поля со следующими значениями: <input type=»text» name=»name» placeholder=»Введите ваше имя» required \>. Параметр «type=»text«» задаёт тип текстового поля, а параметр «placeholder=»Введите ваше имя«» задаёт начальный текст в этом самом текстовом поле. Параметр «required» даёт понять посетителю сайта, что данное поле обязательно для заполнения. В результате у Вас должна получиться форма с одним полем, как показано на скриншоте ниже.

Рисунок 4. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

• Шаг 5. По выше приведённому примеру добавьте остальные нужные Вам поля, каждый раз начиная с тега <p>. Для установки поля с текстовым сообщением используйте тэг <textarea name=»message» cols=»50″ rows=»6″ required></textarea>. Параметры «cols» и «rows» отвечают за ширину и высоту текстового поля. Можете задать параметры, какие Вам больше нравятся. У Вас должно получиться примерно так, как показано на скриншоте ниже.

Рисунок 5. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 6. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

• Шаг 7. Завершающим этапом разметки станет создание кнопки отправки. Для этого используется тэг <button>. Создайте новый блок <p> и внутри него впишите код кнопки со следующими параметрами: <button class=»submit» type=»submit»>Отправить сообщение</button>. Получиться должен похожий результат, как показано на скриншоте.

Рисунок 7. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

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

Рисунок 8. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

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

Файл style.css подключается внутри тэга <head></head> с помощью скрипта <link rel=»stylesheet» media=»screen» href=»style.css»>. В том случае, если файл со стилями лежит не в той же самой папке, что и основной файл html, то к нему необходимо указать путь. В нашем файле со стилями каждый элемент имеет обозначение. При желании Вы сможете поменять параметры под себя, руководствуясь только базовыми навыками программирования.

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

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

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

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

Рисунок 9. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 10. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 11. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 12. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 13 Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 14. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Скачать файлы CSS и PHP для формы обратной связи

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

Рисунок 15. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

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

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

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

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

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