Стильна форма зворотного зв’язку для сайту з капчею на PHP
У цій статті я розповім Вам, як створити більш якісну форму зворотного зв'язку з використанням класу валідації Validator.php, про який я розповідав у минулій статті. Також наша форма зворотного зв'язку міститимекапчу, для захисту від СПАМ-роботів.
HTML-розмітка
Насамперед створимо html-розмітку для нашоїформи зворотного зв'язку.
Тут нема нічого складного. Найпростіший HTML-код форми, де кожен елемент форми обертається в контейнер
Для капчі є окремий контейнерdiv з класом , куди виводяться захисні зображення. Для цього в коді необхідно прописати наступний код:
Докладніше прозахисний код Ви можете прочитати у статті «Створюємо просту капчу для захисту форми зворотного зв'язку», тому тут я на цьому не зупинятимуся.
CSS-стилі
У стилях також немає нічого особливого. Для полів задаються відступи, рамка та фонове зображення. Використовуючи CSS3, закруглюємо кути у текстових полів. Також створюємо стилі для повідомлень про помилки. То йдемо далі.
PHP обробник форми
Якщо Ви звернули увагу, у форми атрибутaction порожній. Це означає, що всі дані форми будуть передані на ту ж сторінку, на якій розміщена сама форма. Тому й обробник форми зворотного зв'язку перебуває у тому файлі як і сама форма. Тому на початку файлу, де знаходиться форма, необхідно додати наступний код:
Тепер про все по порядку.
Насамперед запускаємо сесію, тому що захисний код форми буде зберігатися в сесії.
Далі підключаємо клас вілідації Validator.php та створюємо екземпляр класу, який зберігаємо у змінну $validator. Також задаємо теги обрамлення дляповідомлень про помилки.
Після того, як створено об'єкт Validator, задаємо правила валідації. Як спосіб встановлення правил валідації я вибрав багатовимірний асоціативний масив правил.
Як видно ми отримуємо повідомлення у вигляді рядка та масиву. Це зроблено спеціально.
Повідомлення у вигляді рядка ми виводимо над формою зворотний зв'язок. Для цього перед формою необхідно прописати наступний php-код:
А асоціативний масив із повідомленнями про помилки потрібний для того, щоб підсвічувати текстові поля, в яких є помилки. Для цього необхідно контейнеруdiv, який містить елемент форми, дописати класerror_field. Для прикладу я наведу код для текстового поляsubject
Також слід зауважити, що для того, щоб дані користувача не стиралися при виникненні помилок, текстовому полю атрибутуvalue необхідно прописати такий код: