Доброго дня, дорогі читачі блогу. Продовжуємо тему форм зворотного зв'язку WordPress. І якщо мова зайшла про них, пропоную сьогодні поговорити про плагін WP Contact Form 7. Далі я розповім вам покрокове налаштування плагіна, а також коротко опишу доповнення для цього плагіна.
Навігація по сторінці:
Опис WordPress Contact Form 7
2) Активувати плагін Contact Form 7 в адмінці WordPress.
3) Перейти на нову створену вкладку, як показано на малюнку:
4) Натиснути вкладку "Додати нову" та вказати мову форми за замовчуванням, або вибрати потрібну
5) Вказуємо ім'я контактної форми та натискаємо зберегти.
6) Тепер у нас з'явився шорткод, який вже можна скопіювати та вставити в пост чи сайдбар для того, щоб вивести форму - contact-form-7 id="1252" title="Форма номер 1" (надо взять в квадратные скобки как на рисунке).!}
7) Ось як так виглядає наша форма:
Звичайно, не дуже красиво, але ніхто не заважає створити свої стилі або зробити свою форму і туди вносити вставки.
Як вивести Contact Form 7 у довільне місце шаблону
У п.6 покрокової настройки я показував вам, як можна взяти шорткод коду CF7 і далі описав, що цей код можна виводити у віджет або пост, сторінку. На додаток, хочу сказати, що ви можете вивести Contact form 7 у будь-яке довільне місце шаблону. Для цього слід вставити такий нескладний код:
Ось і все, якщо ви все зробили правильно, отримаєте висновок Contact Form 7 в довільне місце шаблону WordPress.
Налаштування полів введення Contact Form 7
Завдяки йому у вас додатково з'являться такі бокси як:
Налаштування відповіді reply-to для contact form 7
У новій версії плагіна CF7 4.4 і вище розробник рекомендує вводити в поле from (ось воно на скіні нижче)
правильна адреса, яка відповідає вашому домену. Видно зі скіна, і ця рекомендація створює проблему:
Як зробити відповідь користувачеві з поштовика?
Якщо просто натиснути відповісти, то відповідатимемо на свою пошту, по суті, відповімо самі собі. Це дуже не зручно, адже нам потрібно руками копіювати адресу користувача вставляти у поштовик і лише потім відповідати.
Вирішення цієї проблеми є і як завжди просте. Вам потрібно в полі Additional Headersдодати код:
Reply-To:
Зрозуміло, your-email-sh потрібно замінити на свій шорткод пошти. Дивіться скін нижче:
Тепер, коли вам прийде лист із зворотного зв'язку вордпрес, ви зможете натиснути у поштовці відповісти і ваша відповідь буде надіслана на правильний e-mail.
Якщо після цих дій ви зіткнулися з проблемою - варто прочитати пост, перейшовши за посиланням. Там описані основні проблеми та причини траблів у плагіні Contact Form 7.
На цьому все. Сподіваюся вам стало зрозуміло як робиться настройка плагіна та його макетів.
Привіт всім. Як, то у мене занадто багато енергії і я вирішив сьогодні написати ще одну статейку, яка буде присвячена одному з плагінів WordPress. Цікавий і функціональний плагін, зі своїми обов'язками справляється на всі 100% і краще я поки не знайшов, щоб оформити зворотний зв'язок.
Не хочу довго Вас нудити, я думаю Ви і так вже зрозуміли про те, що йтиметься у статті. І так, сьогодні розбиратимемося і налаштовуватимемо плагін Contact Form 7 для WordPress, А саме створювати форму зворотного зв'язку.
Довго сидів і думав, які є мінуси в плагіні і в голову так нічого і не спало, а ось плюсів у цього творіння дуже багато.
Плюси плагіна Contact Form 7.
- Зрозумілість та простота налаштування. Людина, яка вперше стикається з цим плагіном без проблем зможе розібратися.
- Створення великої кількості різних форм та інтеграція їх на сайт.
- Форма вставляється за допомогою шорткоду на сторінку та в будь-яке місце сайту. Це дуже зручно.
- Підтримка російської та інших мов.
- Підтримка Ajax запитів.
- Захист від спаму за допомогою текстового питання чи капчі. Для капчі необхідно додатково встановити Really Simple CAPTCHA.
- Налаштування зовнішнього вигляду форми за допомогою CSS стилів.
- Інтеграція із сервісом Akismet, для захисту від спаму.
У нас на сайті Ви можете побачити та поюзати таку форму, якщо натиснете на пункт меню “Зв'язатися з нами”, випаде вікно, де можна побачити наочний приклад.
Дайте починати!
Для початку нам необхідно завантажити цей плагін. Можна з нашого сервера ось посилання ->або з офіційного сайту ось посилання -> Завантажити з офіційного сайту .
Після того, як завантажили, необхідно його встановити на . Я не буду описувати, як встановити, я думаю, що ви повинні знати цей процес від А до Я. Ми його завантажили, встановили, тепер переходимо безпосередньо до самого програмного забезпечення, щоб розібратися та налаштувати його.
Налаштування плагіна Contact Form 7 та створення форми зворотного зв'язку.
Тепер коли ви завантажили та встановили все як потрібно, переходимо в адміністративну панель WordPress та знаходимо пункт Contact Form 7, клацаємо по ньому і ми потрапляємо на сторінку додавання нової форми.
Створення форми.
Для того, щоб створити нову форму необхідно натиснути на “ Додати нову”, далі вибираємо мову (російську за замовчуванням) та натискаємо “Додати нову”. Після всіх зроблених кроків у Вас має бути така картина:
Форма створена, тепер її налаштовуватимемо, під ваші потреби і для початку даємо їй назву. У моєму випадку я назву “ Тест форма”, Ви називайте як хочете і після цього натискайте «Зберегти». Тепер ви можете побачити, шорткод, який необхідно буде вставляти в код сайту, де буде виводиться дана форма.
Знадобиться код нам трохи згодом, тому що необхідно спочатку налаштувати форму. Переходимо до шаблону форми та налаштовуємо його.
Праворуч список “ Згенерувати тег”, якщо його розкрити можна побачити багато полів, які додаються у форму.
Поле "Сгенерувати тег" Зліва можна побачити поля, які вже додані у форму.
Давайте для прикладу, зробимо просту форму в якій буде ім'я, пошта, телефон, текстове питання для захисту від спаму, повідомлення та кнопка відправити.
Приступає.
Робимо текстове поле імені. У списку “Сгенерувати тег” вибираємо “ Текстове поле”. Ставимо галочку обов'язкове поле, даємо йому назву в моєму випадку "NAME" і присвоюємо id, щоб можна було поле оформити за допомогою css стилів. У мене вийшло id=”name”. Внизу можна побачити текст “ Скопіюйте цей код та вставте його у шаблон форми зліва”. Беремо цей код і копіюємо шаблон форми, як на картинці:
Для пошти (e-mail) аналогічно робимо, для телефону вибираємо зі списку "Сгенерувати тег", поле " Номер телефону” І теж за аналогією робимо.
Для налаштування повідомлення вибираємо “ Текстове поле” і робимо також за аналогією з усім вище описаним.
Тепер додаємо поле « Питання“. Для цього у списку вибираємо пункт “ Питання”, задаємо йому назву. У полі Вопрос|Ответ, можна ставити різні запитання та відповіді, під полем наведено приклад логічного питання, можна ставити текстовий, наприклад “3 за рахунком місяць року?| Березень” тощо. Код вставляємо як і раніше.
поле «Питання» І останнє, що нам необхідно, це кнопка “ Відправити”, можна залишити ту, яка у шаблоні або у списку “Сгенерувати тег” вибираємо “Кнопка надсилання”. Шаблон готовий, натискаємо кнопку “ Зберегти”.
Давайте перевіримо, що у нас вийшло, копіюємо шорткод і вставляємо його на сторінку або в будь-яку частину коду, куди необхідно. Я вставлю на тестову сторінку.
Ось що в мене вийшло:
У Вас має бути щось схоже.
Налаштування адресата форми та повідомлень
Опускаємось трохи нижче шаблону форми і бачимо налаштування адресата.
- Поле адресат. Вводимо пошту, з якої надходитимуть листи відвідувачам, які заповнять форму.
- Поле відправника. Замість<>, підставляємо свої шорткоди (назви, які давали полям). Подивитися їх можна вище. У моєму випадку буде<>.
- Поле теми. Я завжди пишу Форму зворотного зв'язку та вказую сайт.
- Поле шаблон листа. Тут можна виводити, що душа забажає. Для нашого прикладу роблю поле Від:<>та дані Телефон: , Повідомлення ..
- Інші поля порожні.
Наприкінці не забуваємо збережуться.
Якщо опуститися ще нижче, можна побачити налаштування повідомлень. Тут все російською, тому можете правити під свої потреби, як хочете. Тут думаю самі розберетеся
Форма готова, можна переходити тестувати і дивитися чи надходить повідомлення на пошту, яку Ви вказали.
У мене все працює добре, після натискання кнопки “Надіслати”, бачу повідомлення “ Повідомлення було успішно надіслано. Дякую. ” Можете тестувати та дивитися які помилки форма видаватиме якщо не правильно ввести дані.
Що стосується css стилів, їх можна додати до головного css файлу style.css. За допомогою firebag, можете подивитися id та класи полів та привласнити їм відповідні стилі.
Плагін Contact Form 7 для WordPressдуже функціональний, можна зробити форму будь-якої складності, я впевнений, Ви в цьому переконалися. На цьому я закінчуватиму, якщо якісь моменти не до кінця зрозумілі, пишіть у коментарі намагатимусь допомогти розібратися. Дякую.
За допомогою плагіна Contact Form. Але з часом прийшло розуміння того, що можливостей цього плагіна явно мало і найбільший мінус - він дозволяє створити лише одну форму зворотного зв'язку.
Начебто б і проблеми немає, насправді. Але деяким власникам сайтів необхідно більше однієї форми зворотного зв'язку, які можуть розташовуватися не лише на сторінці «Зворотній зв'язок» або «Контакти», але й на будь-яких інших сторінках чи записах.
У цій інструкції я хочу показати вам створення форми зворотного зв'язку за допомогою іншого плагіна, більш функціонального та трохи складнішого, ніж розглянутий у минулій нотатці. Почнемо?
Опис плагіна
Плагін Contact Form 7 дозволяє створювати безліч різних форм для відправки результатів на вашу електронну скриньку. Налаштування піддається абсолютно все - зовнішній вигляд форми, порядок полів, назва написів, формат електронних повідомлень, вибір одержувачів відповідей. Загалом, плагін дійсно дуже функціональний та класний.
Крім цього, ви можете підключити до нього плагін Akismet для захисту від спаму, реалізувати, а також використовувати мультимовність. Це, як на мене, круто! :-)
Установка плагіна Contact Form 7
Плагін встановлюється стандартним способом WordPress. Заходимо до розділу «Плагіни» — «Додати новий», вводимо назву Contact Form 7 та встановлюємо його з репозиторію. Не забуваймо активувати відразу після установки.
Налаштування Contact Form 7
Після активації плагіна в головному меню WordPress з'явиться новий пункт "Контакти (CF7)", це основне місце налаштувань ваших форм зворотного зв'язку. Кількість форм нічим не обмежена. 
Список наявних форм доступний у розділі «Contact Forms»: 
Тут же можна скопіювати потрібний шорткод для вставки на сторінку або запис: 
Додавання нової форми зворотного зв'язку
Як бачите, якихось особливих додаткових пунктів у меню немає, тож перейдемо до створення самої форми зворотного зв'язку. Для цього вибираємо пункт «Додати нову» у головному меню.
Насамперед нам пропонується вибрати мову інтерфейсу форми, яка буде створюватися. WordPress визначає встановлену версію на вашому сайті та пропонує вибрати її за замовчуванням: 
Але ви можете вибрати зі списку будь-яку доступну мову: 
Після натискання на кнопку "Додати нову" з'явиться конструктор форми.
Змінюємо назву форми
Насамперед потрібно ввести назву нашої форми, щоб не загубитися у списку форм, коли їх буде надто багато. Для цього достатньо натиснути мишкою на слово "Заголовок" у верхній області екрана: 
Після цього з'явиться текстове поле, в якому введемо назву з описом:
Як тільки сторінка оновиться, ви побачите таке повідомлення: 
Можна скопіювати запропонований шорткод та вставити на потрібну нам сторінку.
Але ви можете зробити це пізніше, як тільки налаштуєте форму. Вибір за вами.
Змінюємо шаблон форми
Шаблон форми – це звичайний HTML-код, який формує зовнішній вигляд вашої форми. За замовчуванням він містить 4 поля (ім'я, електронну адресу, тему та повідомлення) та кнопку відправки форми. Це виглядає так: 
Ви можете міняти блоки місцями, просто вирізуючи та вставляючи їх код у будь-яке місце.
Наприклад, ми можемо поміняти місцями поле електронної адреси та ім'я клієнта: 
Або можемо видалити поле «Тема», щоб воно не висвічувалося в нашій формі. Для цього достатньо видалити відповідний блок тексту у нашому шаблоні: 
«Зірочка» біля коду елемента означає, що це поле обов'язкове і поки клієнт не введе якесь значення, форма не буде відправлена: 
Як додати нове поле у форму
Уявіть, що вам необхідно додати до стандартної форми поле з адресою сайту. Конструктор форми цього плагіна дозволяє без жодних проблем реалізувати задумане. Достатньо скористатися кнопкою «Сгенерувати тэг»: 
При натисканні випаде величезний список можливих додаткових полів:
Вам залишиться лише вибрати тип потрібного поля та виконувати ще ряд простих дій. 
Не лякайтесь. Налаштування хоч і виглядають жахливо, але насправді дуже прості:-)
Ознака «Обов'язкове поле» дозволяє встановити додаткову перевірку і поки це поле залишатиметься порожнім або матиме некоректне значення, форма не буде надіслана. Це налаштування є практично у всіх типів полів: 
Крім цього, багато полів нашої форми мають однакові налаштування імені, вказівки ID елемента і класу CSS, через які можна змінювати зовнішній вигляд цих полів. Вони присутні практично у всіх полях: 
Поле Ім'я найважливіше, саме воно використовується і в шаблоні форми, і в шаблоні листа.
Але за час користування цим плагіном мені жодного разу не доводилося змінювати чи встановлювати значення цих атрибутів. Швидше за все, і вам не знадобиться. Але розповісти та познайомити з ними я зобов'язаний:-)
Всі текстові поля у нашому конструкторі форми мають додаткові поля з розміром самого поля та максимальною довжиною значення, ось вони:
Так само специфічні поля, типу URL або інших, відмінних від звичайних текстових, мають свої особливі настройки. Наприклад, наше поле URL має додаткове налаштування: 
Розглядати абсолютно всі налаштування не буду, т.к. їх надто багато, і вони специфічні для кожного типу поля. Ну, а якщо раптом вам таки знадобиться ця інформація, тоді напишіть про це в коментарях до цієї нотатки і я підготую додатковий огляд налаштувань.
Тепер нам потрібно додати код цього поля до форми шаблону форми.
Для цього необхідно скопіювати запропонований код та вставити його у форму зліва:
Наприклад, я хочу розмістити поле з адресою сайту після імені клієнта. Мені необхідно буде ввести код за аналогією з іншими полями, тобто додати абзац, перенесення рядка та вставити шорткод цього нового поля: 
Ну і для того, щоб значення цього поля надійшло нам на електронну адресу, ось це значення потрібно скопіювати: 
І вставити в текстове поле нижче в Шаблон листа: 
За аналогією додаються інші поля. Все просто і зрозуміло:-)
Адресат та шаблон листа
Тепер давайте розглянемо настройки, які враховуються під час надсилання повідомлення. У нашому випадку це одержувач (практично завжди це ви і є) та шаблон листа, який приходитиме на вказану електронну адресу після відправлення повідомлення.
Насамперед необхідно вказати адресата, на чию електронну пошту надходитимуть повідомлення з нашої форми. За замовчуванням сюди підставляється електронна адреса з налаштувань WordPress. 
Я думаю ви вже звернули увагу, що в цих формах використовуються незрозумілі коди, типу , . Так ось, це саме поле «Ім'я» з генератора поля, яке я розглядав вище: 
Ну і далі вам залишиться лише упорядкувати шаблон самого листа: 
Ви можете використовувати всі поля, які створювали автоматично через кнопку «Сгенерувати тег», або залишити стандартну форму, якщо ви нічого не змінювали в налаштуваннях.
P.S. У налаштуваннях цього плагіна є досить цікава можливість вказати другого адресата повідомлення. Чесно кажучи я відразу не можу придумати навіщо це може знадобитися, але якщо можливість є, то хтось її в будь-якому випадку скористається. 
Налаштування повідомлень
Ну і який же це плагін надсилання повідомлень, якщо він не дозволяє змінити текст повідомлень чи написів? І плагін Contact Form 7 не є винятком. Він дозволяє перекласти будь-який напис або повідомлення про помилку: 
Відомі проблеми
Буває так, що при використанні нестандартних контролів типу email або url зовнішній вигляд окремих елементів на сторінці буде відрізнятися. Наприклад, зверніть увагу на поле «Адреса вашого сайту» у самій формі: 
Чи не побачили? А я покажу ближче: 
Загалом проблема в тому, що зовнішній вигляд подібних полів візуально відрізняється від стандартних текстових полів. Порівняйте з полем "Ваше ім'я", відразу все зрозумієте.
Тут є два варіанти вирішення. Перше — додати відповідні стилі у файл style.css вашої теми, або змінити у шаблоні форми тип url на text, тоді все буде нормально: 
Висновок
Я думаю, огляд способів створення форм зворотного зв'язку можна вважати повністю закритим, а саму тему розглянутої вздовж і поперек.
Звичайно, обов'язково з'явиться хтось, у кого щось не вийде, або захочеться запропонувати до розгляду якийсь інший, аналогічний плагін. Я завжди радий питанням та пропозиціям! Не соромтеся ставити їх у коментарях:-)
Якщо ви хочете подякувати мені за матеріал - можете зробити це тут:-)
Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.
Contact Form 7 може керувати численними контактними формами, де можна гнучко налаштовувати вміст форм і пошти з досить простою розміткою. Форми мають вбудовану підтримку Ajax відправки, CAPTCHA, фільтр Akismet спам і не тільки.
Документація та підтримка
Скріншоти
Встановлення
- Завантажте всю папку contact-form-7 у каталог /wp-content/plugins/ .
- Активуйте плагін на сторінці плагінів на інформаційній панелі WordPress.
У меню консолі WordPress ви знайдете вкладку 'Зворотній зв'язок'.
Щоб дізнатися, як правильно користуватися плагіном, ви можете відвідати його домашню сторінку.
Учасники та розробники
"Contact Form 7" - проект з відкритим вихідним кодом. У розвиток плагіна зробили свій внесок такі учасники:
УчасникиЖурнал змін
Для отримання додаткової інформації дивіться Релізи.
5.1.3
- Виправлено помилку, яка призводила до неможливості скасувати вибір параметра у вкладці Пошта.
5.1.2
- Постійний контакт: Наведено селектор списку контактів.
- Постійний контакт: Наведено додаткове налаштування constant_contact.
- reCAPTCHA: представлені перехоплювачі фільтрів wpcf7_recaptcha_actions та wpcf7_recaptcha_threshold.
5.1.1
- reCAPTCHA: Змінює реакцію на порожні токени відповіді.
5.1
- Подано модуль інтеграції Постійний контакт.
- Оновлено модуль reCAPTCHA для підтримки reCAPTCHA v3.
- Додає правила стилю Темного режиму.
5.0.5
- Виправлено проблему невідповідності між get_data_option() та get_default_option() у класі WPCF7_FormTag.
- Глушить помилки PHP, що виникають під час викликів unlink().
- Представлено wpcf7_is_file_path_in_content_dir() для підтримки константи UPLOADS.
5.0.4
- Явно встановлює аргумент power_type у виклику register_post_type() для виправлення проблеми, пов'язаної з несанкціонованим підвищенням привілеїв.
- Вкладення локального файлу — заборонено вказувати абсолютні шляхи до файлів, які розташовані поза каталогом wp-content.
- Валідатор конфігурації – додає тестовий елемент для виявлення некоректних налаштувань файлів вкладень.
- Виправлено помилку у функції зворотної сумісності JavaScript для застарілих браузерів, які не підтримують атрибут-заповнювач HTML5.
- Чекбокс згоди - відключає функцію do-not-store форм-тегу.
5.0.3
- CSS: Використовуйте "неможливий" список кнопок для обміну кнопками в "розповсюдженому" стані.
- Acceptance Checkbox: Revises tag-generator UI для налаштування використання певних опцій в термінах індивідуального захисту.
- Introduces wpcf7_anonymize_ip_addr() function.
- Наведено опцію consent_for:storage для всіх типів форм-тегів.
5.0.2
- Added Privacy Notices section до файлу readme.txt.
- Updated the Information meta-box content.
- Use get_user_locale() instead of get_locale() where it is more appropriate.
- Acceptance Checkbox: Reset submit buttons' disabled status after a successful submission.
5.0.1
- Fixed incorrect uses of _n().
- Config validation: Знижено неправильну категорію пунктів в Additional Settings tab panel.
- Зміна validation: Fixed improper treatment for the [_site_admin_email] особлива електронна пошта в електронній пошті.
- Примітка checkbox: Class and id atributes specified applied to the wrong HTML element.
- Конфігурація validation: Якщо ви збираєтеся додаткову адресу електронної пошти для mailboxes як Cc або Reply-To, але це можливе empty value, “Invalid mailbox syntax is used” error will be returned.
- Досить явно 4 параметра add_action() до avoid passing unintended parametr values.
- Check if the target directory is empty before removing the directory.
5.0
- Additional settings: on_sent_ok and on_submit мав бути переведений.
- New additional setting: skip_mail
- Flamingo: Inbound channel title changes in conjunction with change in the title of the corresponding contact form.
- DOM events: Make an enter API response object accessible through the event.detail.apiResponse property.
- HTML mail: Adds language-related attributes to the HTML header.
- Завантажити файл: Натисніть на accept atribut to an uploading field.
- Introduces the WPCF7_MailTag class.
- Дозволяє перервати спробу надсилання пошти, використовуючи перехоплювач дії wpcf7_before_send_mail. Крім того, ви можете встановити статус користувача і повідомлення через перехоплювач дії.
- Acceptance checkbox: Натисніть на особливу увагу умов в Form-tag's content part.
- Acceptance checkbox: Supports the optional option.
- New special mail tags: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_name [_user_display_name]
- Нові перехоплювачі фільтрів: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type), and wpcf7_mail_tag_replaced_($type)
- New form-tag features: zero-controls-container and not-for-mail
Контактна форма – невід'ємний атрибут більшості сайтів. Саме тому в каталозі WordPress багато плагінів для контактних форм. Один з найпопулярніших – це Contact Form 7. Плагін дозволяє створювати форми будь-яких видів; дуже гнучкий та зручний у налаштуванні; розвивається вже багато років та містить багато напрацювань.
Створення та показ контактних форм
Створення форм у адмінці
Після встановлення плагіна з'явиться пункт меню "Contact Form 7", через який можна створювати та видаляти форми.
Форма на зображенні створена при активації плагіна автоматично.
Використовуємо форму за замовчуванням, для цього створимо сторінку Зв'язатися зі мною і вставимо туди шорткод форми.
Лицьова частина сайту
А тепер збережемо статтю та подивимося, як виглядає наша форма (використовується тема Twenty Sixteen):
На малюнку вид форми після надісланого листа (про це говорить повідомлення внизу форми).
Налаштування форми (створення складних форм)
Приклад вище показує, як вставити готову і дуже просту форму контактів. А тепер давайте розглянемо як створити форму складніше. Для цього повернемося в адмінку, менеджер форм і зайдемо в редагування форми за замовчуванням.
У верхньому полі - назва форми (його видно тільки в адмінці), вказуємо зрозумілу для себе назву, наприклад: "Відгук про сайт", "Форма заявки на роботу", "Форма зворотного зв'язку" тощо.
Під заголовком – шорткод. Його використовуємо у записах, для виведення форми.
І нижче – чотири вкладки:
- Шаблон форми
- Лист
- Додаткові налаштування
Розглянемо кожну вкладку окремо.
Шаблон форми
У цій вкладці можна настроїти поля та зовнішній вигляд форми. Робочою областю є HTML редактор WP. Тільки замість звичних клавіш ми бачимо кнопки вставки різних полів форми.
Верстка форми
Для верстки можна використовувати html-теги та шорткоди плагіна. Шорткод додають поля форми, а html теги дозволяють створити довільну HTML структуру. Наприклад, наша дефолтна форма виглядає так:
А при відображенні в записі вона перетвориться на такий HTML:
Синтаксис шорткодів
Давайте натисніть на кнопку «Текст». Відкривається вікно, де ми можемо вказати атрибути текстового поля. Вказуємо та тиснемо "Вставити тег".
Тег згодом буде перетворено на текстове поле з html кодом:
Шорткод можна зручно створювати через конструктор шорткодів.
Але конструктор не дозволяє змінити шорткод (там можна тільки створити шорткод). Змінити шорткод можна двома способами:
- видалити та створити за допомогою конструктора новий.
- вивчити синтаксис та виправити шорткод поля вручну.
З конструктором ви самі розберетеся.
А тут ми розберемо синтаксис шорткоду.
Наприклад розглянемо тег текстового поля з додатковими опціями:
Text (обов'язковий)Тип поля: text, select, password, number і т.д. (В даному випадку поле текстове). Визначає, який елемент форми буде перетворено наш тег, отже який вид даних він приймати. (обов'язковий)* Зірочка робить поле обов'язковим для заповнення (форма не буде надіслана і з'явиться повідомлення про те, що поле потрібно заповнити)." Использовать текст "Введите имя" как placeholder. !}
client-name
Ім'я поля, використовується як атрибут name в input, а також використовується при формуванні шаблону листа, що відправляється.
- id:my-id Атрибут id input зі значенням my-id. Використовується для оформлення.
- class:my-class Атрибут class input зі значенням my-class. Використовується для оформлення.
- placeholder "Введіть ім'я
- Дотримуйтесь порядку атрибутів тега: спочатку йде тип поля, потім його ім'я і потім додаткові опції.
- Типи полів
- Текстові поля: text, email, tel, url, textarea
- Числові поля: number , range
- Поля з датою: date
- Чекбокси, радіо, списки: checkbox, radio, select
- Поле із завантаженням файлу: file
CAPTCHA: captchac та captchar
Опитування: quiz
Поле "Прийняти": aceptance
Кнопка "Надіслати": submit
- Додаткові заголовки - За замовчуванням тут написано Reply-To: . Заголовок Reply-To говорить нам, що на цю електронну скриньку можна відповісти, натиснувши кнопку "Відповісти" у поштовій програмі, а тег форми - це ім'я поля із шаблону. Зазначений користувачем email буде вставлений натомість тега. Вийде щось типу Reply-To: У другому вкладі можна тонко налаштувати шаблон (верстку) та властивості надісланого листа. У полях цієї вкладки можна використовувати спеціальні теги полів форми - це дає можливість передавати у листі зазначені у формі дані..
Довільний тип поля
Теги складаються з імен полів із шаблону форми. Наприклад, ми створили текстове поле під назвою: . Тепер у шаблоні листа можна використовувати тег. У листі замість цього тега буде підставлено значення поля, введене користувачем (ПІБ).
Тема - Заголовок листа. По ньому буде зрозуміло з якої форми були надіслані дані. Наприклад, тема листа "Помилка на сайті", "Замовлення зворотного дзвінка" тощо. Вибираєте такий заголовок, щоб простіше було працювати з отриманими листами.
Тіло листа
Це така важлива частина цієї вкладки. Тут вказується сам текст листа. У тексті використовуємо ті самі теги форми (імена полів із шаблону форми).
Розберемо дефолтний лист:
Від:<>Тема: Повідомлення: -- Відправлено з сайту Вивчаємо плагін Contact Form 7 (http://test-wp.ru)
Ми мали 4 поля, які заповнював користувач. Після надсилання листа теги перетворяться на значення і ми отримаємо такий лист:
Від: Дмитро
Чи не обов'язкові поля в тілі листи
Якщо користувач не заповнить полі, а воно використовується в тілі листа, то тіло листа буде неповним. Наприклад у тілі написано Людина з міста , але користувач не заповнив поле , отже, у листі ми отримаємо Людина з міста... Такий рядок у листі зайвий. Щоб видалити цей рядок із листа, поставте галочку на пункті "Виключити виведення рядків із порожніми тегами повідомлення". Зверніть увагу, що це спрацює тільки тоді, коли текст і шоткод поля знаходяться в тому самому рядку.
Опція "Використовувати HTML-формат листа". Дозволяє використовувати в тілі листи HTML теги. При цьому можна використовувати обмежений список HTML-тегів, тому що не всі поштові клієнти або сервіси вміють правильно обробляти складну HTML розмітку. Можна використовувати: таблиці, марковані списки, жирність, абзаци тощо. Докладніше шукайте в мережі.
Contact Form 7 дозволяє надсилати листа на дві адреси, причому налаштування для кожного листа різні. Це може стати в нагоді, коли треба відправити адміністратору сайту лист з повною інформацією та дублікат менеджеру, де міститься лише дані про замовлення.
Повідомлення при надсиланні форми
У цій вкладці можна відредагувати повідомлення, які виводить форма в тій чи іншій ситуації: при вдалому або невдалому надсиланні листа, або при помилках.
Теги шаблону листа не працюють у цих полях.
Додаткові налаштування
Ця вкладка призначена для просунутих користувачів і дає можливість за допомогою JS-коду розширювати можливості форми. Наприклад, вішати події для аналітики.
Про використання цього функціоналу я розповім окремій статті.