Як зробити робочу форму зворотного зв'язку. Веб-дизайн та пошукова оптимізація

Однією з найбільш часто зустрічаються практично завдань є реалізація форми зворотний зв'язок. Тобто написання її HTML коду, оформлення її на CSS, створення PHP скрипту, який би обробляв отримані від користувача дані і відправляв їх на нашу пошту, написання JS скрипта, який би перевіряв форму на адекватність даних, що вводяться, захист нашого дітища від спаму, щоб наш поштова скринька не обвалилася від атак ботів.

Всі перелічені вище моменти будуть розглянуті в нашому огляді і детально прокоментовані.

Отже, починаємо створення форми зворотного зв'язку:

HTML

Насамперед ми пишемо HTML код, у ньому задаються поля, які заповнюватиме користувач. Вони ж надалі оформлятимуться. Код форми виглядає так:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Ім'я: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Повідомлення: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Відправити" />

І візуально вона виглядає зараз так:

Згоден, поки що все негарно і нічого не зрозуміло, але ми тільки почали.

Розглянемо наведений вище код докладно:

• < form method= "post" action= "mail.php" > …

  
  Для того, щоб створити форму, необхідно використовувати тег form. Саме він визначає початок та кінець форми для інтерпретатора коду. У нього, як і у будь-якого тега, є цілий набір атрибутів, але обов'язкових для роботи форми всього два, це method (метод відправки запиту на сервер, для форм стандартно використовують post) і action (вказує шлях до файлу-оброблювача форми, саме в цьому файлі буде міститися скрипт на PHP, який після відправлятиме введені користувачем значення нам на пошту, в нашому випадку ми бачимо, що це файл називається mail.php і лежить він у тому ж директорії сайту, що і сторінка, що розглядається нами).

• < input maxlength= "30" type= "text" name= "name" />

  
  Далі у нас йдуть інпути. Це власне самі поля форми, у які користувачі будуть вводити необхідну нам інформацію (type="text" говорить про те, що це буде текст). Атрибут maxlength вказує скільки символів може ввести користувач у поле форми. Найважливіший атрибут – це name – він задає ім'я конкретного поля. Саме за цими іменами надалі PHP скрипт оброблятиме інформацію, що надходить до нього. За бажання можна ще задати атрибут placeholder, який виводить усередині поля текст, що зникає при встановленні курсору всередині неї. Однією із проблем плейсхолдера є те, що він не підтримується деякими старими браузерами.

• < label for = "name" >Ім'я:

  
  Використовується якщо ми відмовилися від плейсхолдерів. Звичайна підпис поля, атрибут for повідомляє якого конкретно полю відноситься даний підпис. Значенням вказується name поля, що цікавить нас.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Так само, як і інпут призначений для введення користувачем інформації, тільки цього разу поле заточене для довгих повідомлень. Rows вказує розмір поля у рядках, cols у символах. Загалом вони задають висоту та ширину нашого поля.

• < input type= "submit" value= "Відправити" />

  
  Про те, що це кнопка для відправки форми, нам повідомляє type="submit", а value задає текст, який буде всередині цієї кнопки.

• < div class = "right" >

  
  використані лише для подальшого візуального оформлення форми.

CSS

Для того щоб наша форма зворотного зв'язку виглядала презентабельно її потрібно оформити. Для отримання наступного результату:

Ми використовували цей код:

form ( background: #f4f5f7; padding: 20px; ) form . left, form . right ( display: inline- block; vertical- align: top; width: 458px; ) form . right ( padding- left: 20px; ) label ( display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; ) input, textarea ( border: 1px solid #82858D; pad font- size: 16px; width: 436px; ) textarea ( height: 98px; margin- bottom: 32px; ) input[ type= "submit" ] ( width: 200px; float: right; border: none; color: #fff;

Докладно розписувати CSS я не бачу сенсу, зверну Вашу увагу лише на ключові моменти:

1. Не варто писати оформлення під кожний тег у формі. Намагайтеся будувати свої селектори так, щоб парою рядків коду оформляти всі необхідні елементи.
2. Не використовуйте для перенесення рядків та створення відступів зайві теги за типом < br>, < p> і тд, з цими завданнями чудово справляється CSS із властивістю display: block і margin із padding. Більше того, чому не варто користуватися < br> у верстці взагалі можете почитати у статті Тег br, а чи так він потрібен? .
3. Не варто користуватися табличною версткою для форм. Це суперечить семантиці цього тегу, а пошукові системи люблять семантичний код. Для того, щоб формувати візуальну структуру документа, нам достатньо тегів div, і заданих ним у CSS властивостей display: inline-block (вибудовує блоки в ряд) і vertical-align: top (не дає їм розбігтися по екрану), задаємо їм необхідну висоту і вуаля, нічого зайвого і все так, як нам потрібно.

Для бажаючих заощаджувати свій час на оформленні сайтів можу порадити користуватися CSS фреймворками під час створення сайтів, особливо самописних. Мій вибір у цьому плані - Twitter Bootstrap. Урок з оформлення форм з його використанням можна переглянути.

PHP

Ну ось і настав час зробити нашу форму працездатною.

Заходимо до нашого кореневого каталогу сайту і створюємо там файл mail.php, до якого ми раніше вказували шлях в атрибуті action тега form.

Зрештою його код виглядатиме так:

\"javascript: history.back()\" >Повернутись назад

$back "

;

\"javascript: history.back()\" >Повернутись назад

exit;

) else ( echo ; exit ; ) ?> Обговорення HTML та CSS частини цього документа можна пропустити. За своєю суттю це звичайна сторінка сайту, яку Ви можете оформити за своїм бажанням та потребою. Розглянемо найважливішу її частину – PHP скрипт обробки форми:$back = " Цим рядком ми створюємо посилання для повернення на попередню сторінку. Оскільки ми заздалегідь не знаємо з якої сторінки користувач потрапить на цю, робиться це за допомогою маленької JS функції. Надалі ми просто звертатимемося до цієї змінної для виведення її у потрібних нам місцях. if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) )) (

//Внутрішня частина оброблювача

Якщо всі поля заповнені, то скрипт почне обробляти дані у своїй внутрішній частині, якщо хоч одне поле не було заповнене, то на екран користувача виведеться повідомлення з вимогою заповнити всі поля форми echo "Для відправки повідомлення заповніть всі поля! $back" та посиланням для повернення на попередню сторінку, яку ми створили найпершим рядком.

Далі вставляємо у внутрішню частину обробника форми:

$name = trim (strip_tags ($_POST ["name"]));

$phone = trim (strip_tags ($_POST ["phone"]));

$mail = trim (strip_tags ($_POST ["mail"]));

$message = trim (strip_tags ($_POST ["message"]));

Таким чином ми очистили дані, що вводяться користувачем, від html тегів і зайвих прогалин. Це дозволяє нам убезпечити себе від отримання шкідливого коду у надісланих нам повідомленнях.

Перевірки можна й ускладнити, але це вже за вашим бажанням. Мінімальний захист на серверній стороні ми вже встановили. Подальше ми зробимо на стороні клієнта, використовуючи JS. Повністю відмовлятися від захисту форми на серверній стороні на користь JS не рекомендую, оскільки хоч і вкрай рідко, але трапляються унікуми з відключеним у браузері JS., Після чищення тегів додаємо відправлення повідомлення: mail (
if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) )) ($name = trim (strip_tags ($_POST ["name"])); $phone = trim (strip_tags ($_POST ["phone"])); ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;
Його номер: ". $phone." "
"пошта_для_отримання_повідомлень@gmail.com""Лист із адреси_вашого_сайту" , " Вам написав: " . $name. ") ;

Його повідомлення: "

1. . $message ,
2. "Content-type:text/html;charset=windows-1251"
3. Саме цей рядок і займається формуванням та надсиланням повідомлення до нас. Заповнюється вона так: < br /> "пошта_для_отримання_повідомлень@gmail.com" – сюди між лапок вставляєте свою пошту < br /> "Лист з адреси_вашого_сайту" – це тема повідомлення, яке надходитиме на пошту. Можна написати сюди будь-що. < br /> "Вам написав: ".$name." < br /> Його номер: ".$phone."
4. Його пошта: ".$mail."

Його повідомлення: ".$message – формуємо сам текст повідомлення. $name – вставляємо інформацію заповнену користувачем через звернення до полів з попереднього кроку, в лапках описуємо що це поле, тегом

робимо перенесення рядка, щоб повідомлення загалом було читальним. < meta http- equiv= "Content-Type" content= Content-type:text/html;charset=windows-1251 - в кінці йде явна вказівка ​​типу даних, що передається в повідомленні та його кодування. /> ВАЖЛИВО!

Багато хто не вказує кодування повідомлення, що надсилається явно, але на деяких поштових клієнтах через це надалі можуть виникнути проблеми (на пошту приходять нечитабельні листи), тому я рекомендую її все-таки вказувати.

Перевірка форми на адекватність даних, що вводяться

Щоб користувачі по неуважності не промахувалися полями і заповнювали все коректно варто поставити перевірку даних, що вводяться.

Це можна зробити як на PHP на стороні сервера, так і на JS на стороні клієнта. Я використовую другий варіант, оскільки так людина відразу може дізнатися, що вона зробила не вірно і виправити помилку не роблячи додаткових переходів по сторінках.

Код скрипта вставляємо в тому ж файлі, де у нас розміщується HTML частина форми. Для нашого випадку він виглядатиме так:

< script>function checkForm(form) ( var name = form. name. ) ; if (! n) ( alert ( "Ім'я введене неправильно, будь ласка, виправте помилку"); return false;) var phone = form. phone. value; var p = phone. match(/^[0-9+][0-9-]*[0-9-]+$/); if (! p) (alert (

"Телефон введено неправильно"

); return false;) var mail = form. mail. value;

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

var m = mail. match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([A-Za-z0-9-] * [A-Za-z0-9] +) * \.

if (! m) (alert (

"E-mail введено неправильно, будь ласка, виправте помилку"

);

Почнемо з того, навіщо взагалі потрібні форми зворотного зв'язку на сайті? Власник сайту повинен мати можливість зв'язатися із відвідувачами свого сайту. Люди прагнуть заощаджувати свій час на пошуку інформації про потрібні товари, уточнення їх якостей та характеристик, цін та в апогеї - вчиненні замовлення. Форми зворотного зв'язку - важливий канал, через який відбувається комунікація між відвідувачем сайту та його власником, продавцем та покупцем. Якщо цей канал зв'язку не працює або виявляється незручним для відвідувача, він може відмовитися від ідеї звернутися до вас, а отже, від ідеї стати вашим реальним клієнтом.

Те, наскільки регулярно та активно використовуються форми зворотного зв'язку на Вашому сайті, розповість про Ваш сайт не гірше за аналітики відвідувань.

Звідси логічно випливає висновок, який вже був озвучений вище – форми зворотного зв'язку мають бути зручними та працювати!

Варто зауважити, що друга частина цього висновку залежить не тільки від правильності програмування. З технічного боку форма може працювати ідеально, але оператор повинен швидко відповідати на звернення, що надходять із сайту. Інакше форми зворотного зв'язку виявляться марними. Якщо оператор передзвонить відвідувачеві через два дні, потреба у замовленні товару чи послуги у людини може просто зникнути.

Форм зворотного зв'язку може бути безліч («Замовити зворотній дзвінок», «Задати питання», «Залишити відгук», «Заповнити форму замовлення», «Звернутися до керівника» і т. д.), і використовуватися вони можуть для різних завдань. Але мета у всіх буде по суті одна – забезпечити зв'язок відвідувача сайту та його адміністратора чи власника, отримати контакти відвідувача для подальшої взаємодії з ним.

Сім підказок на замітку

Згадаймо кілька простих правил, які потрібно враховувати під час розробки та розміщення ФОС на сайті.

Форма повинна розташовуватись так, щоб відвідувачеві було зручно її знайти.

Розташуйте форму на видному місці - щоб відвідувачу вашого сайту не довелося докладати зусиль до того, щоб серед багатьох різних елементів на сторінці знайти форму зворотного зв'язку або нескінченно скролити сторінку вниз.

Традиційно форми можна розмістити у хедері сайту або сторінці контактів.

Можна при необхідності продублювати у футері ключові форми, щоб не змушувати відвідувачів, які переглянули всю сторінку, прогортати її знову нагору:



Якщо є сторінки з продукцією або послугою, на яку діє спеціальна пропозиція та відвідувач може отримати її через онлайн замовлення, розмістіть на цій сторінці форму швидкого дзвінка або оформлення замовлення.

Крім того, це дозволить «зачепити» відвідувача, який вже зацікавлений у продукті чи послузі. Відвідувач переглянув опис, гарантії, ціни, вирішив, що продукт чи послуга йому підходять і ось, ми йому відразу пропонуємо, не йдучи з цієї сторінки, залишити заявку на замовлення цієї послуги.

Форма повинна відображатися та працювати однаково коректно на всіх пристроях та у всіх браузерах.

Або коротко – перевірте кросбраузерність та кросплатформність форм зворотного зв'язку на вашому сайті. Форма може бути помітною та зручною для заповнення з ноутбука або стаціонарного комп'ютера, але на планшеті поле для введення даних може виявитися надто вузьким та незручним для внесення до нього тексту із сенсорного екрану. Чи буде тоді клієнт щоразу намагатися внести свої дані, щоб зв'язатися з вами? Відповідь очевидна.

Форма має бути короткою та зрозумілою.

Що це означає? Форма має складатися з великої кількості полів чи етапів заповнення. Якщо, звісно, ​​у цьому немає жорсткої потреби. Люди прагнуть простоти, вони не хочуть витрачати багато часу на те, щоб розібратися і заповнити десять тисяч полів.

Якщо послуга передбачає отримання докладної інформації, спростіть завдання клієнту (якщо це, звичайно, можливо). Виділіть кілька ключових полів, які потрібно заповнити:



Виглядає зручніше, ніж, наприклад:



Краще передзвонити та усно уточнити все, що вам потрібно, але полегшити відвідувачу заповнення форми. І підвищити цим шанси на те, що він до вас звернутися!

Продовжуючи тему зрозумілості, зверніть увагу на те, щоб форма мала заголовок – «Замовити зворотній дзвінок», «Замовлення виклику замірника», «Замовлення безкоштовної консультації» тощо. Цей же заголовок краще дублювати в електронних сповіщеннях, які будуть надходити з форми на вашу пошту. Тоді не тільки відвідувач вашого сайту не заплутається та не забуде заявку, на що саме він оформлює. Але й ви самі отримаєте чіткі дані, яка саме інформація цікавила відвідувача, який залишив заявку. Це допоможе швидко зорієнтуватися при подальшому спілкуванні з відвідувачем та коректно побудувати діалог.

Форма повинна мати приємний і практичний дизайн.

Усі поля мають бути добре видно. Якщо при створенні дизайну форми використовується багато кольорів, варто звернути увагу на те, щоб їх не було надто багато, щоб вони поєднувалися та не були надмірно яскравими. Людина, яка заповнює форму, не повинна напружувати зір. Те ж саме стосується вибору кольору для текстових повідомлень.

Краще уникати поєднання темного на темному. Якщо, наприклад, на темно-синьому фоні ви зробите темно-червоний або темно-зелений напис «Ваше повідомлення надіслано», його просто не буде видно.

Форма має містити заклик до дії.

Невеликий штрих, що закликає відвідувача зробити чи завершити дію. У нашому випадку надіслати повідомлення із сайту!

Також кнопку краще виділити контрастним кольором. Разом із закликом до дії, це зробить її помітною, та приверне увагу відвідувача.

Форма має легко згортатися.

Отже, форму легко знайти, вона має приємний дизайн, зручна для заповнення. Що ще?

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



Здається, що дрібниця, а загальну картину може зіпсувати.
Наприклад, відвідувач залишив заявку на сайті та хоче повернутися до перегляду сайту. АЛЕ! Форма висить, не зникає, як її закрити – незрозуміло. Або інший варіант – відвідувач передумав писати заявку, а вирішив сам зателефонувати. Вийти може неприємно.

Налаштування повідомлення у відповідь.



Якось так…

Людина, яка надіслала повідомлення, хоче бути впевнена, що її повідомлення буде отримано вами та розглянуто. Технічно налаштування автоматичного оповіщення багато часу не забере, натомість зміцнить упевненість відвідувача у тому, що його повідомлення не залишиться без відповіді. Зазвичай це використовується в тих формах, де під час заповнення потрібно вказати свою електронну пошту. Втім, сучасні сервіси дозволяють налаштовувати автоматичні оповіщення через SMS.

Підводячи підсумок

Тонкостей та інших деталей дуже багато: можна експериментувати з формою та дизайном, можна домалювати ненав'язливу графіку на тему тощо. Але базові критерії не змінюються. До всього сказаного хочеться додати велике, але важливе побажання – періодично перевіряйте роботу форм зворотного зв'язку на сайті. Технічні збої не повинні бути перешкоди у роботі вашого бізнесу!

Доброго дня, форма зворотного зв'язку має бути присутня на кожному сайті. Сьогодні я покажу приклад готової форми для вставки на будь-який сайт, у тому числі і на двигун Wordpress. Готовий приклад html та php коду можна буде скопіювати на свій сайт. Крім готового прикладу, існує багато плагінів, які також користуються великою популярністю. На багатьох сайтах така форма вже вбудована в тему, але іноді буває необхідність додати ще одну на іншу сторінку або замінити стару.

Перед тим, як починати писати цю статтю, я пройшовся інтернетом у пошуках відповіді на це запитання. Переглянувши більше сайтів і блогів, я знайшов дуже мало якісних відповідей щодо вставки форми зворотного зв'язку на сайт. Більшість матеріалів написано на роботі з плагінами. У деяких статтях не зовсім зрозуміло, що і як треба робити, код не працює, листи не приходять і так далі.

Є, звичайно, гідні відповіді, але їх дуже мало. Я наведу простий приклад, для якого багато розуму не потрібне. Особливих знань у php не потрібно, точніше вони взагалі не потрібні. Що і де потрібно змінити, я напишу докладно, коли це буде потрібно. Форма працює нормально, без збоїв. Приклад форми знаходиться у мене на . У готовий приклад я додав трохи стилів для краси, щоб форма зовсім не виглядала «убого». За бажання можна все змінити на вашу думку.

Готова форма зворотного зв'язку для сайту на html

В даному прикладі, форма зворотного зв'язку для сайту складається з HTML коду. Такий приклад HTML коду вставляєте абсолютно на будь-яку сторінку сайту, не важливо, де і що ви використовуєте. Цей код можна вставити на сторінку движка wordpress, все буде працювати правильно і без збоїв.

На початку коду, в першому рядку, ви повинні вказати свій шлях до php файлу form.php (про нього трохи пізніше). Більше нічого міняти не треба. Якщо вас не влаштовує назва форми та її поля, ви завжди можете додати нові або змінити старі. Так само можна додати свої стилі прямо до суду в таблицю. Якщо такий варіант вам незручний, задавайте нові класи і вже потім додавайте стилі через файл style.css

Хто не знає, як це можна зробити, заходимо до адмінки сайту, переходимо в редактор і відкриваємо файл style.css. Наприкінці таблиці стилів додаємо ось цей код. У результаті має бути вставлений код форми на сторінку і ваші css стилі у таблицю style.css

Inp( padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shado , 0, 0, 0.1) 0px 0px 8px;

Після виконаних дій, у вас має вийти ось така форма зворотного зв'язку на сторінці. Не варто сильно захоплюватися, ваша форма має бути простою і максимально зручною. Без зайвих додаткових полів... ім'я, пошта, тема та повідомлення. При бажанні навіть Тему повідомлення можна прибрати.

Php код форми

З розміткою форми визначилися, красу навели, тепер необхідно створити файл із розширенням php і додати до нього такий код. Додайте файл через FTP клієнт на ваш сайт. Більшість користувачів використовують CMS, скидайте файл у папці з вашою темою. Адресу та назву цього файлу, ви повинні спочатку прописати в розмітці вашої форми, яку я показував вище. Я прописав повний шлях для прикладу, щоб було зрозуміло, що і куди потрібно вставити.

(