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

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

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс “Практика HTML5 и CSS3”

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс “Сайт на WordPress”

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.



Размер: 22,8 Мб. + 31,3 Мб.

Длительность: 36 мин. 55 сек.


Скачать 1 часть


Скачать 2 часть


Скачать исходники

Форма обратной связи – практически неизменный атрибут любого сайта, будь то сайт-визитка или мощный портал.

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

Самое главное – то, что человек может сразу написать Вам письмо. Ему не нужно кликать на указанный E-mail адрес, писать в почтовой программе. Он просто может сделать все, что нужно, не покидая страницу, на которой он находится.

Именно поэтому наличие формы обратной связи на сайте часто помогает получить куда больший отклик от своей аудитории, нежели указание телефонов, e-mail адресов и ICQ номеров.

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


Здесь не будет хитрых jQuery и AJAX – это форма будет сделана, так сказать, из “подручных средств”.

Если же Вам нужно что-то посложнее, то лучше использовать готовые решения, например, Форму обратной связи на PHP и jQuery с использованием Ajax, и не изобретать велосипед.

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

Для ознакомления с содержанием уроков Вы можете просмотреть видео ниже. Скачать видеоуроки в высоком качестве можно по ссылкам выше.

Внимание!

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






P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая PHP, JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?

Просто поделитесь с друзьями и коллегами!

Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк – это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх

Форма обратной связи HTML и PHP для сайта

Содержание

Форма обратной связи создаётся минимум двумя языками – HTML и PHP. При желании можно добавить CSS. HTML задаёт границы, ячейки, кнопки, указывает расположение блоков и прочую информацию. Обрабатываться форма будет языком PHP. CSS нужен, чтобы кнопки, ячейки были красивыми и необычными.

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

Тег form

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

Обязательно указывается, где будут обрабатываться данные формы с помощью атрибута «action». В нём прописывается адрес и название того PHP-документа, который будет обрабатывать форму. Внутри формы желательно присутствие кнопки с типом «Submit», которая отвечает за отправку данных формы на сервер.

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

  • Первый вариант – «post», в этом случае данные пересылаются без отправки их в браузерную строку url.
  • Второй – «get», с его помощью данные отсылаются и в документ, и в браузерную строку.


<form action="mailer.php" method="get">
<!--поля формы (о них ниже)-->
<input type="submit" value="Отправить">
 </form>

Тег input

Этим символом задаётся поле ввода, сам по себе он создаёт небольшое поле 10 на 50 пикселей. Обязательным атрибутом является «type», который указывает на тип поля ввода и на то, что будет в нём прописываться.

Наиболее распространённые значения следующие:

  • «data» – дата;
  • «text» – простой текст;
  • «url» – адрес страницы в интернете;
  • «password» – поле с паролем;
  • «masseng» – сообщение;
  • «email» – адрес электронной почты;
  • «radio» – переключатель с выбором из нескольких элементов, из которых можно включить только один;
  • «checkbox» – выбор из группы элементов, где можно отметить несколько вариантов с помощью флажков;
  • «button» – создаёт кнопку, которая используется языком JavaScript, то есть без перезагрузки страницы
  • «submit» – создаёт кнопку, которая используется языком php, то есть с перезагрузкой страницы

Атрибутом «value» заполняется поле ввода временными подсказками, который могут давать пользователю подсказки, как нужно заполнить поле. Если поле ввода является кнопкой, то в «value» пишется название, которое будет отображаться в виде текста на самой кнопке.

Атрибут «placeholder» похож на предыдущий, только в этом случае подсказка в поле исчезает, стоит только навести мышку. Элемент «required» интересен тем, что делает поле обязательным для заполнения, он указывается так: 


<input type="text" required/>

Атрибут «name» является обязательным, им задаётся имя поля ввода, к которому позже можно будет ссылаться. Атрибутом «size» указывается ширина поля, в качестве единиц измерения используются буквы шрифта, поэтому при изменении его стиля ширина поля тоже будет меняться. По умолчанию стоит значение 20.


<input type="text" size="40" required>

Тег textarea

В отличие от «input» тег «textarea» является парным. Также важным отличием является возможность задавать различные характеристики поля. Как и в предыдущих случаях, здесь тоже есть атрибут «name» – единственный из обязательных. Отличием является то, что в теге «textarea» не используется атрибут «type», так как этот тег применяется только для отправки текстовых сообщений.

Атрибутом «rows» указывается высота поля, а «cols» задаёт его ширину. Оба атрибута используют специфические единицы измерения – буквы шрифта. Поэтому каждая единица больше пикселя в 10 раз (в зависимости от стиля и размера шрифта). Атрибутом «placeholder» создаётся подсказка в поле, которая исчезает при наведении мышки.


<textarea name="comment" cols="40" rows="3"></textarea>

Тег label

Перед полем ввода или за ним обычно пишутся просьбы типа: «Укажите своё имя». Эти надписи лучше делать в специальном теге «label». Он устанавливает связь между надписью и полем ввода, также делает возможным установку горячих клавиш на клавиатуре.

Самым распространённым атрибутом является «for», в нём указывается имя, на которое можно будет ссылаться, в том числе в документах php и css. Например, в теге «input» можно будет с помощью атрибута «id» сослаться на имя тега «label». В результате при наведении мышки на поле строчка рядом с ним будет реагировать.


<input type="text"><label for="name">Введите свое имя</label>

Тег select

Он создаёт форму выбора из нескольких пунктов. При этом тег отвечает только за создание самой формы, за количество и названия пунктов отвечает тег «option». Важнейшим атрибутом является «multiple», который указывает на то, что список элементов нужно отображать как реестр множественного выбора. Также в форме выбора используется атрибут «name» для обозначения имени.

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


<input type="text"><label for="name">Введите свое имя</label>

Тег option

Является частью формы выбора, парный, используется внутри тега «select» (как тег «li» в списках). Внутрь него вставляется фраза, которая отображается на странице в качестве пункта выбора.

В нём используется несколько атрибутов:

  • «disabled» – элемент запрещает выбрать пункт, чтобы тот оставался в списке в виде заголовка;
  • «selected» – блок с таким элементом становится пунктом по умолчанию, на случай если пользователь не будет делать выбора;
  • «value» – обязательный атрибут, в нём указывает значение, которое будет отправляться на сервер.


<form action="mailer.php" method="get">
   <select size="3" multiple>
     <option disabled>Выберите свой город</option>
     <option value="Москва">Москва</option>
     <option selected value="СПб">СПб</option>
     <option value="Сыктывкар">Сыктывкар</option>
   </select>
   <input type="submit" value="Отправить">
</form>

Тег button

Он формирует различные типы кнопок. Отличием его от «input» являются расширенные возможности, ведь к нему применяются различные стили CSS. С их помощью можно создавать кнопки различного цвета, размера, формы. Также можно делать кнопку в виде картинки.

Распространённые атрибуты такие:

  • «name» – создаёт уникальное имя кнопки, которое можно использовать в дальнейшем;
  • «type» – указывает тип кнопки, для отправки данных на сервер необходимо прописать значение «submit»;
  • «value» – значение, которое будет отправляться на сервер для обработки.


<form action="mailer.php" method="get">
<!--поля формы-->
<button src="{путь к картинке для кнопки}">Отправить</button>
</form>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Создание контактной формы с использованием HTML и PHP

Контактная форма является очень важной частью любого веб-сайта. Посетителям сайта необходимо общаться с владельцем сайта для разных целей. Используя контактную форму, посетители отправляют сообщения администратору или владельцу сайта с контактной информацией. Администратор или владелец сайта может отвечать посетителям после прочтения и рассмотрения важности их сообщения. Вы можете создать контактную форму для любого сайта различными способами. В этом руководстве показано, как создать простую контактную форму и адаптивную контактную форму с помощью HTML, CSS, Bootstrap и PHP.

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

В этой части руководства показан способ разработки простой контактной формы с использованием HTML, CSS и PHP.

Код HTML и CSS:

Создайте файл PHP с именем simple_contact_form.php со следующим сценарием для отображения контактной формы с использованием только HTML и CSS. Сценарий PHP будет добавлен позже для проверки формы и отображения отправленных данных формы.



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

   

    КОНТАКТНАЯ ФОРМА
   

=” form action

 

 =”#”>
       
           
           
           

           
       


Теперь запустите файл simple_contact_form. php с сервера. После выполнения скрипта появится следующий вывод.

Чтение, проверка и печать данных формы с помощью PHP

Теперь добавьте следующий сценарий PHP в начало файла simple_contact_form.php для проверки данных формы, чтения данных формы и печати данных в браузере. Когда пользователь нажмет кнопку «Отправить», данные формы будут проверены на предмет проверки с помощью PHP-скрипта. Если отправленные данные будут проверены, то данные будут распечатаны в браузере.

Код PHP:

Добавьте следующий код PHP в начало файл simple_contact_form.php .

    $name = “”;
    $nameerr = “”;

    $email = “”;
    $emailerr = “”;

    $message = “”;
    $messageerr = “”;

    $error = false;

    /* Проверить обязательные поля */
    if(isset($_POST[‘submit’]))
    {
        $name = $_POST[‘name’];
        $email = $_POST[’email’];
        $message = $_POST[‘сообщение’];

        if($name == “”)
        {
            $nameerr = “Поле не может быть пустым. “;
            $error = true;
        }
        else if(strlen($name) < 3)
        {
            $nameerr = “Имя должно содержать более двух символов.”;
            $error = true;
        }
        else
        {
            $nameerr = “”;
        }
   
        if($email == “”)
        {
            $emailerr = “Поле не может быть пустым.”;
$ ошибка = истина;
        }
        else if (!filter_var($email, FILTER_VALIDATE_EMAIL))
        {
            $emailerr = “Неверный адрес электронной почты.”;
            $error = true;
        }
        else
        {
            $emailerr = “”;
        }

        if($message == “”)
        {
            $messageerr = “Поле не может быть пустым.”;
            $error = true;
        }
        else if(strlen($message) < 10)
        {
            $messageerr = “Сообщение должно содержать более 9 символов. “;
            $error = true;
        }
        else
        {
            $messageerr = “”;
        }

        if($error == false)
        {
            $name = $name;
            $to = ‘[email protected]’;
            $from = $email;
            $subject = ‘Запрос’;
            $body = ‘Здравствуйте,

‘.$message.’

Спасибо,
‘.$name;
   
            echo “Кому: “.$to.”
От кого: “.$from.”
Тема: “.$subject.”

“.$ тело;
        }
    }
    if(!isset($_POST[‘submit’]) || $error == true)
    {

?>

Добавьте следующий код PHP в конец файла simple_contact001.php .

    }
?>

Если форма отправляется, оставляя все поля пустыми, появится следующий вывод.

Если форма отправлена ​​путем ввода менее 9 символов в поля сообщения, появится следующий вывод.

Если форма отправлена ​​со всеми действительными данными, появится следующий вывод.

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

Адаптивная контактная форма

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

HTML-код:

Создайте файл PHP с именем responsive_contact_form.php со следующим скриптом для отображения адаптивной контактной формы с использованием HTML и Bootstrap. Сценарий PHP будет добавлен позже для проверки формы и отображения отправленных данных формы.



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

0″>