У цьому пості розглянемо спосіб, як вбудувати контактні форми на сторінку за допомогою редактора блоків, використовуючи шорткод. Це особливо актуально для плагінів, які ще не пропонують блоки, що настроюються. Пропонований спосіб дозволяє прямо зараз використовувати улюблений плагін у редакторі блоків.
Плагін Contact Form 7
плагін Contact Form 7 - надзвичайно популярний і добре підтримуваний плагін для створення форм. В даний час він використовується більш ніж у п'яти мільйонах активних установок. Він дає змогу легко створювати власні форми, використовуючи дуже просту розмітку. Він також підтримує CAPTCHA, відправку форм AJAX, захист від спаму Akismet та багато іншого.
Установка плагіна
Щоб встановити плагін, просто перейдіть до Плагіни > Додати новий на панелі інструментів та знайдіть Contact Form 7. Після встановлення плагіна активуйте його. Тепер можна розпочати роботу зі своїми контактними формами.
Створення першої форми
Після активації плагіна перейдіть на вкладку «Контакти» на панелі керування WordPress. Тут можна створювати нові форми або редагувати наявні. Плагін поставляється з попередньо створеною контактною формою, якої достатньо більшості випадків використання. Будемо використовувати її як основу для форми контактної сторінки. Щоб відредагувати об'єкт, клацніть посилання «Змінити» під заголовком.
Редагування форми
На наступному екрані з'явиться базова форма. Включені поля для імені, електронної пошти, теми та повідомлення дають досить гарне уявлення про структуру форми.
Давайте додамо нове поле прапорця, щоб отримати згоду користувача на нашу політику конфіденційності. Почнемо зі створення елемента мітки з деяким текстом, який буде міткою поля. Потім помісти курсор безпосередньо перед елементом теги, що закриває тегом, і натискаємо кнопку прапорцівЦе дасть нам спливаюче вікно з параметрами прапорця.
У спливаючому вікні можна зробити прапорець обов'язковим, назвати його та додати параметри, записавши їх у текстове поле "Параметри", за одним параметром на рядок. При введенні кількох рядків буде встановлено кілька прапорців.
Також можна встановити ідентифікатори і класи для застосування стилів до цього конкретного прапорця. Закінчивши налаштування, натискаємо кнопку «Вставити тег», щоб додати поле прапорця у форму.
Дивіться також:
важливі оновлення WordPress Gutenberg, про які потрібно знати
Інші варіанти форми
Вкладки Пошта и Повідомлення у вікні Редагування форми пропонують варіанти для зміни зовнішнього вигляду, інформацію про електронну пошту, яка надсилається з контактної форми. Також можна змінювати різні пов'язані форми повідомлень, наприклад, повідомлення для невдалого представлення даних, про помилку під час перевірки повідомлення та багато іншого.
Параметри електронної пошти
Тепер, коли поля додані та налаштовані всі параметри, форму потрібно зберегти та можна її використовувати. Для цього скопіюйте шорткод, який відображається трохи нижче заголовка форми, і натисніть кнопку «Зберегти» праворуч.
Сторінка контактів
Для прикладу було створено сторінку контактів на основі блоків, на якій будемо використовувати нещодавно створену контактну форму. Сторінка складається з блоку Google Maps, наданого плагіном GutenBee, під картою є коротке повідомлення всім, хто хоче з нами зв'язатися. А внизу сторінки використовували основний блок шпальт для створення макета шпальт 1/3 - 2/3. У лівому стовпці додали кілька традиційних параметрів зв'язку, а більшому правому стовпці додамо нашу форму.
Блок шорткоду
Як згадувалося раніше, Contact Form 7 ще не надає блок, що настроюється для редактора блоків. Але не турбуйтеся, цю форму можна вбудувати за допомогою основного блоку шорткоду. Щоб додати блок у великий стовпець, натиснемо + і у спливаючому вікні пошуку введемо шорткод.
Коли блок додасться, вставте шорткод, який раніше скопіювали.
Блок шорткоду не має жодних опцій, тому просто збережіть сторінку.
Кінцевий результат
Тепер, коли сторінка контактів заповнена картою, деяким текстом, кількома варіантами контактів та формою зворотного зв'язку, можна перевірити кінцевий результат.
У цьому короткому посібнику описано, як створити контактну форму і додати її на сторінку контактів, навіть якщо в конкретному плагіні немає блоків, що настроюються.
Джерело: cssigniter.com
Коментарі до запису: 0