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

контактная форма

От автора: Мы часто сталкиваемся с контактными формами, будь то обычный сайт или, скажем, WordPress. Формы могут быть совершенно разными, всё зависит от Вас и от пожеланий клиента). В этом посте я наглядно покажу всю «анатомию» создания контактной формы для сайта средствами HTML и PHP.

Скачать исходный код себе на компьютер!

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

Первым делом мы должны определить место, где будет наша форма. Помещать всё её содержимое мы будем между тегами:

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

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

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

Атрибут action указывает, в какой файл пойдут данные при нажатии кнопки «Отправить». Значит, второе, что мы создадим mail.php.

Метод передачи выбираем POST — то есть данные передадутся внутри тела запроса, а не через адресную строку.

Итак, получаем:

Последняя задача, которую нам необходимо понять, это как браузер поймёт, какие данные куда определять? Чтобы имя пошло к имени, фамилия — к фамилии? Для этого каждому input’у нужно задать атрибут name

Начнём

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

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

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

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

Дальше функцией $_POST захватываем значение атрибута nameemail и преобразуем в переменную $email:

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

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

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

Выпадающий список

Для создания выпадающего меню, нам потребуется вставить код в HTML, и подкрепить его PHP.

HTML:

И весь код:

Атрибут size указывает, сколько вариантов ответа будет показываться за раз. Чаще всего это 1.

А вот и модифицированный код PHP, с учётом нашего выпадающего бокса:

Мы видим, что добавилась $dropdown.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Можете скачать файлы формы, или посмотреть демо

Если есть вопросы, то пишите в комментариях ниже статьи, и я обязательно отвечу!

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

Автор: Найко Михаил

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

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

"Киберсант-вебмастер" — самый полный курс по сайтостроению в рунете!

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (44)

  1. Nikolai

    Благодарю. Этот урок мне очень помог.

    • Сергей

      Ну молодцы ребята, просто и доступно во всех ваших размеченных блоках. Я просто прочитал, и сразу кое-что уловил. Не скрою, раньше я 2 года преподавал информатику, но в школе такие темы не изучаются. А так хочется постичь совершенства самостоятельного изучения с помощью таких хороших и легких раскладок.
      Здоровья Вам всем и удачи в работе с пользователями.
      Пусть ваши труды будут зачтены хорошими заработками!

  2. Александр

    Спасибо! Как раз во время! Только хотел начинать писать форму обратной связи, а тут РАЗ! и урок пришел на нужную тему! Спасибо огромное!

  3. labintech

    Парень, вообщем, живет и работает в Москве.

  4. naikom

    всегда приятно читать хорошие отзывы)

  5. Ольга

    Материал очень ценный,но я пока не готова его принимать,т.к. многое для меня еще не понятно.Я в интернете недавно,нельзя ли отмотать пленку чуть-чуть назад.Заранее благодарна.

  6. Александр

    Большое спасибо! Помогли разобраться с формами.

  7. Павел

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

  8. Vladimir

    Вы молодцы! Ваш урок вышел во время!

  9. Николай

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

  10. Никита

    Спасибо большое, очень полезно, как раз нужно было делать форму для странички отписки от рассылки в смартреспондере=)

  11. Валерий

    Чувствую, что интересно, но, увы, непонятно, а потому и не получилось. На html я и раньше делал формы, а вот с php совсем сё запуталось.
    А нет ли у вас «за пазухой» пошаговой инструкции, чтобы на блоге отображалось количество просмотревших тот или иной пост? Было бы очень кстати.
    Заранее благодарен.

  12. Юрий

    Благодарю Вас за интересный и информационный материал.Лично мне еще учиться и учиться .

  13. Юрий

    ВАШ НАМЕК ПОНЯЛ ! Будьте бдительны.

  14. Николай

    Спасибо большое, очень полезно!

  15. Петр

    Спасибо ребята, толково и лаконично.

  16. Вова

    Спасибо. Хотелось бы чтобы в таком же духе кто-нибудь поразжёвывал PHP с самых азов и до профи.

  17. TRSteep

    т.е. php отправляет письмо встроенными средствами?
    А что нибудь нужно настраивать на денвере например для этого или он поддерживает эти функции?
    т.е. можно ли тестить подобные функции в офлайне?

  18. Шамиль

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

  19. naikom

    TRSteep: можно, почему нет?

  20. Ильдар

    Хорошим делом занимаетесь, что помогаете начинающим, причём бесплатно!

  21. Дарья

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

  22. Ракипов Сергей

    День добрый, я бы хотел сказать Вам спасибо за Ваш труд.
    И у меня к вам просьба, мне очень нравиться Ваша обратная связь. Можете ли вы прислать мне
    код php файла, а то я его по этому адресу http://webformyself.com/wp-comments-post.php почему то не могу увидеть
    Заранее признателен.

  23. Алексей

    Спасибо, хорошая статья.
    а можно ли рассмотреть пример скрипта проверки валидности введенного пользователем е-мэйла?

  24. Дима

    Большое спасибо, очень хорошая статья.

  25. Евгений

    Михаил, большое спасибо за статью. Кратко и очень доступно для среднего пользователя.

  26. Михаил

    Очень хорошо и просто всё описано, сделал форму по вашему примеру.

    Не показали только, как прекрепить файл к письму. В форму вывел такую функцию, а вот как её в обработчик прописать не знаю. Буду очень признателен, если разъясните этот момент.

    Получилось так, что в теле письма указывается имя прикреплённого файла, а самого файла в письме нет.

  27. Дмитрий

    Спасибо большое за урок!
    У меня сама форма появляется, но при нажатии кнопки «Отправить» появляется текст php файла. Возможно вы знаете почему это происходит?

  28. Михаил

    круто. спасибо
    а как сделать чтоб страницу не обновляло после отправки письма?

  29. Михаил

    оперативно. благодарю.
    пошел изучать. спасибо

  30. Олег

    Помогите советом в чем проблема. Вставил код формы в код страницы сайта. Дописал стили. В скрипт вписал свой e-mail. Сервер поддерживает php скрипты. При отправке из формы появляется страница с адресом: мой сайт/send.php и текстом на странице «error»

    • Андрей Кудлай

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

  31. Олег

    А как может быть ошибка в коде, если я использовал предложенные здесь коды формы, стиля и скрипта, которые скачал по ссылке, указанной вверху этой страницы? :) ) В этих скачанных кодах может быть ошибка?

  32. Олег

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

  33. Никита

    Здравствуйте, я ваш подписчик, создаю сайт на локальном сервере… Не пойму, запустил денвер , нажимаю «Отправить» форму и мне выдает вот это: «<?php $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="От: $name \n $email \n Сообщение: $message";
    $recipient = "teplotsentr.bor@mail.ru";
    $subject = "Форма обратной связи";
    $mailheader = "Отправитель: $email \r\n";
    $info = mail($recipient, $subject, $formcontent, $mailheader, "Content-type:text/plain; Content-type:text/plain; charset = UTF-8\r\n") or die("Error!");
    echo "Спасибо!" . " -" . " Назад«;
    ?> »
    Что делать? Т.е. просто после нажатия на кнопку отправления, выдается просто текст файла «formdata.php».

    • Андрей Кудлай

      Здравствуйте.
      Задайте вопрос на нашем форуме. К вопросу приложите, пожалуйста, скриншот окна браузера, на котором будет видно проблему и видно адресную строку браузера. Думаю, это должно помочь решить проблему и подсказать что-то конкретное.

Добавить комментарий