Створення контактної форми для сайту

19

Від автора: Ми часто стикаємося з контактними формами, будь то звичайний сайт або, скажімо, WordPress. Форми можуть бути абсолютно різними, все залежить від Вас і від побажань клієнта). У цьому пості я наочно покажу всю анатомію «створення контактної форми для сайту засобами HTML і PHP.

Завантажити вихідний код собі на комп’ютер!

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

Насамперед ми повинні визначити місце, де буде наша форма. Поміщати всі її вміст ми будемо між тегами:

Атрибут action вказує, в який файл підуть дані при натисканні кнопки «Відправити». Значить, по-друге, ми створимо mail.php.

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

Отже, отримуємо:

Остання задача, яку нам необхідно зрозуміти, як це браузер зрозуміє, які дані куди визначати? Щоб ім’я пішло до імені, прізвище до прізвища? Для цього кожному input’потрібно задати атрибут name

Почнемо

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

Ім’я

Email

Повідомлення

Розглянемо цей код і спробуємо його модифікувати.

Для того, щоб наша форма працювала, необхідно додати php-функції. Використовуємо функцію $_POST для перекладу значень полів вводу змінних:

Приміром, у нас є:

Далі функцією $_POST захоплюємо значення атрибута name — email і перетворимо в змінну $email:

$email = $_POST[’email’];

І для всіх одразу:

Змінна $recipient задає ту адресу, на який вирушать дані. Ну а функція mail відправляє дані на пошту.

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

Випадаючий список

Для створення випадного меню, нам потрібно вставити код в HTML, і підкріпити його PHP.

HTML:

Випадаючий список

Опція 1
Опція 2
Опція 3
Опція 4

І весь код:

Ім’я

Email

Випадаючий список

Опція 1
Опція 2
Опція 3
Опція 4

Повідомлення

Атрибут size визначає, скільки варіантів відповіді буде показуватися за раз. Найчастіше це 1.

А ось і модифікований код PHP, з урахуванням нашого випадаючого боксу:

Ми бачимо, що додалася $dropdown.

Прапорці і Радіо-кнопки

Розглянемо HTML-код прапорців.

Спосіб зв’язку

Email
Телефон

Зверніть увагу на квадратні дужки в полі name — вони забезпечують можливість вибору декількох значень. Іноді використовуються просто різні імена.

Що стосується кнопок — перемикачів (radio), то ми можемо додати такий приклад:

Необхідний телефонний дзвінок?:

Так
Немає

Тут ім’я однакове, але різні значення value.

І знову, повний HTML:

Ім’я

Email

Телефон

Необхідний телефонний дзвінок?

Так
Немає

Спосіб зв’язку

Email
Телефон

Сайт

Важливість

Низька
Нормальна
Висока
Максимальна

Тип

Оновлення сайту
Зміна інформації
Інформація додана
Нові продукти

Повідомлення

Доповнюємо наш обробник змінними, які потрібні для відправки листа:

$recipient = «[email protected]»;
$subject = «Форма зворотного зв’язку. Користувач — $name»;
$mailheader = «Відправник: $email

1

\r\n»;
$info = mail($recipient, $subject, $formcontent, $mailheader, «Content-type:text/plain; Content-type:text/plain; charset = UTF-8\r\n») or die(«Помилка»);

Будь-яку з цих змінних можна доповнити різною корисною інформацією. Я додав ім’я користувача $subject, яка відповідає за тему листа.

Ви, наприклад, можете в $mailheader додати адресу Вашої організації, телефони і т. п.

І наостанок — попрацюємо з поштою.

Взагалі, по-ідеї, у нас при надсиланні даних, виводиться напис — просто Дякую!. Але ми підемо далі і створимо посилання, по якому користувач зможе повернутися назад. Будьте уважні, синтаксис PHP змусить нас трохи змінити написання HTML. Наприклад, замість подвійних ковычек » ми будемо использовтаь одинарні ‘.
Після фрази Спасибі! додамо посилання на form.html і трохи змінимо стилі посилань.

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

echo «Спасибі!» . «-» . «Повернутися на головну»;

Але це мій варіант, фраза та стилі можуть бути будь-якими.

І фінальний PHP:

Найуважніші помітили, що для обробки прапорців застосовуємо цикл foreach.

Зрозуміло, те, що у нас вийшло — це найпростіший варіант, тут немає жодної перевірки та способів захисту від спаму.

До посту буде прикладений ісходник файлів нашої форми, так що ви можете використовувати його для своїх проектів і налаштовувати, як вам завгодно. Сподіваюся, що урок був (або буде) корисний.

Можете завантажити файли форми, або подивитися демо

Якщо є питання, то пишіть в коментарях нижче статті, і я обов’язково відповім!

Сподіваюся, урок по створенню контактної форми для сайту, який вам сподобався.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

«Кіберсант-вебмастер» — самий повний курс по сайтостроению в рунеті!

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.