Плагін Contact Form 7 для WordPress
Contact Form 7 я використовую досить давно. Дане доповнення призначене для створення різних форм на движку WordPress. Наприклад, Ви вирішили зробити на сайті форму зворотного зв'язку або форму записи на семінар. Для цих цілей краще всього підійде Contact Form 7. Плагін переведений на безліч мов і буде зручний у використанні всім без винятку, так як настройка Contact Form 7 досить проста. На момент написання поста його скачали 9 437 388 раз. Так що популярності йому не позичати :). Радує те, що тут реалізована не тільки настройка самої форми, а й листи, яке буде надходити до Вас пошту. Сам плагін можна скачати тут.
Тепер давайте подивимося на Contact Form 7 в дії.
Подивилися? Давайте спробуємо щось зробити;). Але для початку проголосуйте в опитуванні 😉
Як зробити форму зворотного зв'язку на WordPress
Для початку давайте якось підпишемо нашу форму. Я напишу «Форма зворотного зв'язку».
Тепер реалізуємо все це.
Для початку створимо форму «Ім'я». Це звичайне текстове поле. Генеруємо новий тег «Текстове поле»:
Далі налаштуємо його:
- Зазначимо, що воно обов'язково для заповнення;
- Додамо в графу «Відправник».
От і все. Перша форма створена. Далі створюємо форму «Тема листа» так само, як і «Ім'я».
Поле «Сайт» робимо звичайним текстовим полем. Зазначаємо, що воно не обов'язково для заповнення.
Переходимо до поля «Повідомлення». Генеруємо «Текстове поле». АЛЕ! Не те, що перше, а то, що третє :). Вони називаються по-різному, а відмінності істотні. Говорячи простою мовою, перше текстове поле маленьке, друге - велике. Генеруємо, а далі все, як і в минулий раз.
Тепер генеруємо тег «Відправлення файлу».
В налаштуваннях можете задати максимальний розмір файлу і дозволені типи файлів (.jpg. Png. Doc і т.д.).
Додаємо в форму.
Зауважте, що в тіло повідомлення прикріплені файли додавати не потрібно. Їх вказуємо в поле зліва.
Тепер зроблю кнопочку «Відправити». Згенерує тег «Кнопка відправки».
Вставляємо в форму.
От і все! Наша форма готова. Так вона буде виглядати на Вашому сайті:
Як зробити форму замовлення товару або записи на подію на WordPress
За допомогою плагіна Contact Form 7 можна створити не тільки форму зворотного зв'язку, а й, наприклад, форму для замовлення товару або записи на семінар. Як це зробити, думаю, Ви розумієте (як і з формою зворотного зв'язку). У цій частині поста я тільки хочу більш детально розглянути теги, які можна згенерувати.
Текстове поле 1
Дозволяє зробити текстове поле в один рядок.
Текстове поле 2
Створює текстове поле великих розмірів для введення будь-якого тексту.
Створює меню, що випадає. Пункти слід вказувати в полі «Вибір». Кожен з нового рядка (як показано на скрині).
Виглядає наступним чином:
Створює «чекбокси» - прапорці, які дозволяють вибрати кілька варіантів із запропонованих. Налаштовуються також як і меню, що випадає. Виглядає так:
Створює «радиокнопки» - елементи інтерфейсу, які дозволяють вибрати один варіант з кількох запропонованих. Налаштовуються також як і меню, що випадає. Виглядає так:
Створює прапорець прийняття. Якщо він не встановлений, не можна відправити повідомлення. Можна використовувати для пункту «З правилами ознайомлений і згоден» і т.д.
Дозволяє задати користувачеві якесь питання. Якщо він правильно на нього відповість, то повідомлення буде успішно відправлено. В іншому випадку видасть помилку. Не забудьте налаштувати тег в поле «Питання і відповіді». Вказувати слід так: Питання | Відповідь.
Використовується для захисту від роботів.
Створює капчу - картинку з символами. Користувач ввів правильні символи - повідомлення пішло. Чи не правильні - видає помилку. Зверніть увагу, що при вставці в форму, використовується 2 коду: для зображення і для поля введення. Виглядає так:
Використовується для захисту від роботів.
Дозволяє відправляти файли. Під час створення форми зворотного зв'язку Ви бачили це поле в дії. Виглядає так:
Створює кнопку, яка дозволяє відправити повідомлення Вам на пошту: D. Виглядає так: