Заголовок

Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

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

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

Чтобы сделать у себя на сайте такое, нам понадобится:

• сервер, который умеет работать с PHP-скриптами,
• страница, где разместим форму,
• скрипт на PHP — он будет отвечать за отправку сообщения.

Сервер для PHP

Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.

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

Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:

Готовим страницу с формой

Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea :

/*Задаём общие параметры для всей страницы: шрифт и отступы*/ body < /*text-align: center;*/ margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px; >/* Настраиваем внешний вид полей ввода*/ input < display: inline-block; margin: 10px auto; border: 2px solid #eee; padding: 10px 20px; font-family: Verdana, Arial, sans-serif; font-size: 16px; >textarea

Чтобы сделать форму на странице, мы будем использовать такие теги:

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

— здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post. Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

1. Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
2. В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
3. Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.

Логика работы PHP-программы будет такая:

• получаем значения переменных из тех данных, которые получил обработчик;
• готовим сообщение, где укажем все поля в форме;
• отправляем это сообщение и смотрим на результат выполнения функции отправки;
• если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
• через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода» 🙂

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

     // Если письмо не ушло — выводим сообщение об ошибке else ?>

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

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

Что дальше

Дальше как обычно — улучшаем.

1. Например, сейчас, если не заполнить поле с темой или адресом, то будет ошибка и письмо не уйдёт. При этом пользователь не будет знать, что же именно он сделал не так. Можно организовать проверку на заполнение полей и выводить нужные сообщения, если что-то не заполнено.
2. Всегда можно улучшить безопасность и защитить скрипт от многократных запросов — чтобы никто не абьюзил сервис и не делал из нас спамеров.
3. А ещё при отправке мы переходим на страницу обработчика, а потом вообще на другой сайт. Чтобы сделать как у всех, чтобы форма отправлялась без перезагрузки страницы, можно использовать Ajax. Когда-нибудь доберёмся и до него. Подписывайтесь, чтобы не пропустить.

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

Источник

PHP: Форма обратной связи на PHP с базой данных MySQL и проверкой jQuery

Простая форма обратной связи для отправки данных в базу данных при помощи PHP и MySQL с проверкой jQuery. В этом руководстве вы узнаете, как создать контактную форму в PHP и как отправить данные формы в базу данных MySQL с помощью проверки jQuery.

Это руководство поможет вам шаг за шагом создавать и отправлять контактные формы в базе данных PHP + MySQL с проверкой jQuery. И вы можете использовать эту форму для своих проектов. Вы также можете использовать эту контактную форму в своем веб-приложении.

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

Форма обратной связи на PHP с проверкой и базой данных

Просто выполните несколько шагов ниже и легко создайте и отправьте контактную форму в PHP MySQL с проверкой jquery.

Шаг 1 — Создать таблицу в базе данных

Прежде всего, перейдите в свой PHPMyAdmin и создайте таблицу с именем contacts_list со следующими полями: name, email, mobile.

CREATE TABLE `contacts_list` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `name` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `phone` varchar(50) NOT NULL, `subject` varchar(255) NOT NULL, `Message` text NOT NULL, `sent_date` datetime NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Шаг 2 — Создайте файл подключения к базе данных

На этом этапе вы создадите файл с именем db.php и добавьте в него приведенный ниже код.

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

Шаг 3 — Создайте контактную форму на PHP

На этом этапе вам нужно создать контактную форму и добавить следующий код в файл contact-form.php:

      .container < max-width: 500px; margin: 50px auto; text-align: left; font-family: sans-serif; >form < border: 1px solid #1A33FF; background: #ecf5fc; padding: 40px 50px 45px; >.form-control:focus < border-color: #000; box-shadow: none; >label < font-weight: 600; >.error < color: red; font-weight: 400; display: block; padding: 6px 0; font-size: 14px; >.form-control.error  
\r\n"; // Send email if (mail($toMail, $subject, $message, $header)) < // Store contactor data in database $sql = $connection->query("INSERT INTO contacts_list(name, email, phone, subject, message, sent_date) VALUES ('', '', '', '', '', now())"); if (!$sql) < die("MySQL query failed."); >else < $response = array( "status" =>"alert-success", "message" => "We have received your query and stored your information. We will contact you shortly." ); > > else < $response = array( "status" =>"alert-danger", "message" => "Message coudn't be sent, try again" ); > > ?>   
 ?>   
Name 
Email 
Phone 
Subject 
Message 
 
     

В этом руководстве вы узнали, как создать контактную форму с проверкой jQuery и сохранить данные в базе данных MySQL.

Источник

Обратная связь PHP скрипт – учимся понимать своих животных

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

С людьми легче!

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

Для ввода имени пользователя.

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

Онлайн курс «PHP-разработчик»

Изучите курс и создайте полноценный проект — облачное хранилище файлов

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

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

Форма для «взаимопонимания»

Начнем с главного элемента нашего проекта – формы. Вот коде ее разметки:

Так форма выглядит в браузере:

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

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

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

Сохраните верстку таблицы на стороне сервера в отдельном файле. Теперь займемся написанием скрипта-обработчика формы обратной связи на HTML и PHP. Создайте еще один файл и назовите его handler.php. Не забудьте прописать его в атрибуте формы action. Код обработчика:

Источник