Форма зворотного зв’язку із захистом від спаму

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

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

Чим гарна ця форма?

По-перше, легко встановлюється та налаштовується.

По-друге, абсолютно не навантажує сервер. Навіщо тримати зайвий плагін заради однієї форми зворотного зв'язку.

По-третє, у форму вбудовано захист від СПАМу.

Як організовано захист від спаму

Як встановити форму зворотного зв'язку на сайт

Крок 1. Створення файлу обробника.

Крок 2. Завантаження файлу на сервер.

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

А можна завантажити файл у папку з темою оформлення і тоді його можна буде редагувати прямо з панелі адміністрування WordPress, але при зміні теми оформлення та налаштування доведеться змінювати.

Розглянемо приклад із завантаженням файлу в папку теми оформлення:

Зробити це ви зможете за допомогою файлового менеджера хостингу або через FTP-з'єднання.

Завантаження файлу на сервер

Крок 3. Створення форми на сторінці.

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

Відкриває адміністративну панель WP –«Сторінки» – вибираєте або створюєте сторінку для розміщення форми.

Підбираємо сторінку для форми

Обов'язково змініть шлях до файлу-оброблювача. Цей код без застосування стилів оформлення, є лише кілька найнеобхідніших. Така форма виглядатиме ось так:

Форма без оформлення

Крок 4. Застосування стилю до форми.

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

Як приклад наведу стилі, які я використав для оформлення. Скопіюйте ці стилі та вставте файл Таблиця стилів (style.css).

У результаті форма набуде такого вигляду:

Форма зі стилями оформлення

Якщо поколупатися в коді форми можна зробити, щоб форма виглядала так:

Горизонтальне виконання форми

На цьому створення форми зворотного зв'язку без плагіна та із захистом від спаму завершено. Вам лише залишається слідувати покроковій інструкції та впровадити цю форму до себе на блог.

Також друзі для полегшення завдання пропоную завантажити вихідні файли.

PS: якщо вам цікава тема створення форм, подивіться статтю «Як створити красиву форму передплати».