Плагін Contact Form 7: налаштування зовнішнього вигляду. Налаштування Contact Form 7 для Wordpress

У цьому матеріалі буде детально описана налаштування Contact Form 7 - плагіна для такої популярної платформи по створенню і просуванню сайтів в Глобальній павутині, як «Вордпресс». Цей програмний інструмент дозволяє створювати і конфігурувати форми зворотнього зв'язку.

Трошки про «Вордпрес»

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

Сильні та слабкі сторони даної платформи по створенню і просуванню сайтів

Плюси цієї програмної платформи такі:

Простота і відкритість вихідних кодів.

Значна кількість довідкової інформації.

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

Висока швидкодія без додаткових програмних надбудов (плагінів).

А от недоліки в цьому випадку такі:

Сайти, створені на основі «Вордпресс», не впораються з великим навантаженням.

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

Що таке плагіни і навіщо вони потрібні сайтів на базі платформи «Вордпресс»

Базовий функціонал такої системи управління контентом, як «Вордпресс», досить скромний. Його лише достатньо для розробки найбільш простих блогів і сайтів. Щоб хоч якось поліпшити ситуацію з функціональністю програмної платформи і додати їй гнучкості, розробникам доводиться додавати спеціальні міні-програми, які на професійному жаргоні називаються плагінами. Однією з таких і є Contact Form 7. Налаштування плагіна дозволяє на певній сторінці системи управління контентом створити форму зворотного зв'язку з високим рівнем функціональності.

Спеціалізація «Контакт форм 7»

Як було зазначено раніше, створення зворотного зв'язку між відвідувачем і адміністратором інтернет-ресурсу на базі платформи «Вордпресс» - це основне завдання Contact Form 7. Налаштування пошти, редагування шаблону, пересилання різних файлів — це далеко не повний перелік тих можливостей, які надає ця міні-програма. При цьому навантаження на апаратні ресурси сайту буде відносно невеликий і її наявність не приведе до істотного зниження швидкодії сайту або блогу.

Порядок встановлення плагіну

Існує три способи установки плагінів на платформі «Вордпресс»:

Шляхом завантаження ZIP-архіву з глобальної павутини і «заливання» його у відповідний каталог інтернет-ресурсу.

З використанням різного роду FTP-клієнтів.

Завантаження мініпрограми із застосуванням адміністративної панелі керування сайтом, блогом або порталом.

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

Заходимо в адміністративну панель «Вордпресс».

Потім необхідно перейти в розділ «Додатки».

У вікні вибираємо пункт «Додати новий».

У рядку пошуку вводимо назву плагіна - Contact Form 7 - і після цього наводимо вказівник мишки на кнопку «Пошук» і робимо одноразовий клік. Після цього почнеться операція пошуку необхідного програмного забезпечення.

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

Після цього система управління контентом автоматично завантажити та встановить цей плагін.

На наступному етапі необхідно активувати инсталлированного програмне забезпечення. Для цього переходимо на вкладку «Плагіни» і в списку знаходимо Contact Form7. Поруч з ним знаходиться напис: «Активувати», по ній і натискаємо один раз мишкою.

Оновлюємо адміністративну панель системи управління контентом і знаходимо серед її пунктів Contact Form7. Це і є умова успішної інсталяції цього популярного і функціонального плагіна.

Алгоритм налаштування «Контакт форм 7»

Налаштування Contact Form 7 складається з таких пунктів:

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

На наступному етапі вибираємо мову форми і ставимо її назва.

Потім, при необхідності, переконфігурувати її шаблон.

Зберігаємо зміни.

Створюємо нову сторінку з отриманим раніше кодом.

Потім необхідно опублікувати нову сторінку.

На завершальному етапі необхідно перейти на сайт і перевірити коректну роботу створеного елемента інтерфейсу інтернет-ресурсу.

Створюємо нову форму

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

Заходимо в меню цього плагіна і вибираємо пункт «Форми».

У вікні, яке відкриється після цього, необхідно поставити прапорець навпроти пункту «Контактна форма1».

Потім зверху над нею, в списку «Дії», вибираємо пункт «Видалити».

У відповідь з'явиться запитання на підтвердження виконуваних дій. Необхідно підтвердити видалення форми і клацнути мишкою на кнопці «Так».

На наступному вибираємо пункт меню: «Створити нову» в адміністративній панелі «Вордпресс» «Contact Form7».

У вікні, В випадаючому списку вибираємо мову інтерфейсу майбутньої форми - «російський». Після тиснемо кнопку «Створити».

Після цього буде згенеровано початковий код нової форми зворотнього зв'язку для «Вордпресс. Після цього необхідно виконати такі операції, як налаштування Contact Form 7.

Задаємо назву форми

Після виконання усіх раніше наведених дій з'явитися вікно для введення назви нової форми Contact Form 7 Style. Налаштування цей елемент інтерфейсу саме і починається з цієї нескладної операції з одного боку. Але назва форми краще давати виходячи з пошукової оптимізації. Тому найбільш оптимальним буде в цьому випадку, наприклад, «Форма зворотного зв'язку» або «Задаємо питання адміністратору сайту». Як тільки визначилися з назвою цього елементу інтерфейсу, набираємо його у відповідному полі вікна запиту.

Редагуємо шаблон «Контакт форм 7»

У цьому самому вікні з назвою створеної форми є 4 вкладки. Перша з них — «Шаблон». За замовчуванням тут сформовано лише 5 елементів:

Місце набору імені відвідувача інтернет-ресурсу.

Поле набору адреси електронної поштової скриньки відвідувача, який поставив питання.

Ще одне поле дозволяє набрати тему питання.

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

Останній елемент форми за замовчуванням — це кнопка з написом «Відправити».

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

Налаштування довжини полів і не тільки

У цьому ж самому місці можна змінити довжину поля вводу в Contact Form 7. Налаштування ширини будь-якого текстового поля виконується наступним чином:

Наприклад, необхідно збільшити до 55 кількість символів в імені відвідувача інтернет-ресурсу. За замовчуванням їх 40.

Для цього в коді[text * your-name]в кінці додаємо цифри 60/55. У результаті буде отриманий код[text * your-name 60/55]. Після збереження внесених змін довжина цього поля дорівнює 60 а максимальна кількість символів, яку можна набрати — 55.

Аналогічним чином можна змінити розмір текстового поля повідомлення. Тільки в цьому випадку необхідний змінити код даного елемента наступним чином[textarea your-message 40 х 30]. У цьому випадку 40 — це кількість букв в одному рядку, а 30 — загальна кількість строк в цьому елементі інтерфейсу Contact Form 7. Налаштування зовнішнього вигляду самої ж форми здійснюється саме шляхом підбору значень параметрів кожного окремо взятого елемента. Тому рекомендується в коді кожного елемента вказувати конкретні значення кожного приведеного в цьому розділі параметра.

Інші вкладки форми

Як було зазначено, перша вкладка носить назву «Шаблон форми». Наступна за нею в цьому вікні - «Лист». У ній задаються параметри того місця, в яке буде відправляти пошта з цього інтернет-ресурсу. На вкладці «Повідомлення» формується текст повідомлення, яке буде виводитися в разі успішної відправки листа. Тут же є також можливість заготовити повідомлення і на той випадок, якщо не вдасться зв'язатися з адміністратором сайту з допомогою коштів. Остання вкладка в Contact Form 7 - «Додаткові налаштування». В ній знаходяться ті параметри, які на практиці використовуються досить рідко. Наприклад, можна з її допомогою налаштувати введеного користувачем тексту засобами «Яндекс» - метрики.

Поля, які можна додати за допомогою цього плагіна в цю форму

Налаштування Contact Form 7 для Wordpress дозволяє додати такі елементи інтерфейсу на форму зворотного зв'язку:

Тестове поле — універсальний елемент інтерфейсу, у який можна ввести будь-який набір символів.

E-Mail – місце введення назви електронної поштової скриньки.

URL – поле набору адреси інтернет-сторінки.

Номер телефону — дозволяє ввести номер телефону в міжнародному форматі.

Елемент «Число (spinbox)» дозволяє створити поле введення будь-якого цілочислового значення (наприклад, віку відвідувача).

Елемент «Число (Slider)» додає на форму повзунок, за допомогою якого можна буде вибрати числове значення із заданого діапазону.

Пункт «Дата» створює спеціальне поле вводу, в якому можна вказати необхідну дату. При активації цього елементу інтерфейсу внизу випадає календар, в якому можна вибрати потрібну дату.

У свою чергу, пункт випадаючого меню «Текстове поле» призначений для набору текстової частини електронного листа.

Наступний пункт - «Випадаюче меню» - дозволяє з фіксованого списку вибрати необхідний параметр.

А ось «CheckBoxes» призначений для вибору одного чи кількох значень із заданого списку.

Елемент інтерфейсу «Radio Buttons» практично ідентичний попередньому. Різниця лише в тому, що в цьому випадку можна вибрати лише один правильний варіант, у той час як «CheckBoxes» може мати кілька правильних значень.

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

Пункт «Меню» дозволяє створити спеціальний розділ в інтерфейсі, який буде забезпечувати захист поштової скриньки від спаму. У цьому випадку перед відправкою необхідно буде дати правильну відповідь на поставлене питання.

Другий варіант захисту — це «CAPTCHA». При його виборі форми додатися окремий розділ, в якому буде відображатися картинка з символами і додаткове поле для їх введення.

Наступний пункт - «Відправлення файлу». Дозволяє додати до тексту листа файл з різного роду поясненнями та коментарями для адміністратора ресурсу.

Останній пункт - «Кнопка відправки» - дозволяє додати відповідний елемент інтерфейсу.

Зберігаємо зміни

Після того як необхідні значення задані, а форма повинні чином налаштовано, необхідно все це зберегти. Для цього у вікні редагування плагіна піднімаємося у його верхню частину. Тут повинна бути кнопка «Зберегти». Наводимо курсор маніпулятора на неї і робимо одноразове натискання на неї. У відповідь з'явиться код форми, який виділяємо з допомогою все того ж вказівника мишки і копіюємо. Далі рухаємось в адміністративній панелі системи управління контентом в пункт «Сторінки». Потім створюємо нову сторінку з необхідною назвою (наприклад, «зворотний зв'язок», «Контакти», або «Поставити питання адміністратору ресурсу»). Потім переводимо курсор набору в поле вводу коду. При цьому необхідно перевести режим набору коду в «Текст» на панелі параметрів. Після цього вставляємо раніше отриманий код форми. Далі в правій частині інтерфейсу знаходимо кнопку «Опублікувати» і наводимо на неї мишку. На наступному етапі здійснюємо одноразове натискання лівої кнопки миші на цьому елементі інтерфейсу системи управління контентом.

Перевіряємо отриманий результат

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

Плюси і мінуси плагіна. Альтернативні варіанти

Відмінним рішенням для початківця розробника щодо створення форми зворотного зв'язку є міні-програма Contact Form 7. Налаштування відправки пошти, створення елементів інтерфейсу та інших важливих елементів інтерфейсу у цьому разі більшої частиною автоматизовано і вимагає мінімальних знань користувача. Тому для простенького інтернет-ресурсу початкового рівня і з починаючим адміністратором — це відмінне рішення. Але ж будь-плагін — це додаткове навантаження на ресурси інтернет-сторінки, яка знижує швидкодію. Як результат, більш просунуті користувачі рекомендують йти від такого простого способу створення форми зворотного зв'язку. Її також можна і самостійно створити за допомогою HTML, CSS і JS, нехай і з меншим рівнем функціональності. При цьому знизиться потреба в обчислювальних ресурсах сайту і суттєво підвищиться рівень швидкодії.

Підсумки

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