Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Contact Form 7 – фантастичний безкоштовний плагін для додавання контактних форм на сайт WordPress. Але, незважаючи на простоту використання та надійність, йому не вистачає багатьох готових функцій.

Огляд розширень

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

У цьому пості покажемо, як розширити Контактну форму 7, щоб зробити таке:

  1. Додати умовну логіку.
  2. Додати динамічні значення у поля.
  3. Зберегти надіслані контактні форми до бази даних WordPress.
  4. Надіслати PDF-файл, створений у формі.
  5. Захистити форму від спамерів.
  6. Продавати прості продукти без використання плагіну електронної комерції.

Всі плагіни, згадані в цьому пості, можна завантажити безкоштовно з WordPress.org.

Як додати функції до Контактної форми 7

1. Contact Form 7 Conditional Fields

Contact Form 7 Conditional Fields привносить умовну логіку контактну форму. Поля можна налаштувати таким чином, щоб вони відображалися лише тоді, коли користувач дав відповідь.

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

Є 5 варіантів відповіді на це запитання:

  • З вуст в уста
  • Через пошук
  • Електронного листа
  • соціальні медіа
  • Інший.

Ці параметри додаються як перемикачів. Групу перемикачів було названо where(інше).

Коли вибрано варіант «Інше», він повинен відображати текстове поле, щоб відвідувач зміг додати свій варіант. Цьому текстовому полю надали ім'я where-other.

Але це поле має відображатися лише в тому випадку, якщо вибрано опцію «Інше», тому воно укладено до групи умовних полів, у якій використовується короткий код [group other][/group]. Ця умовна група полів називається other-input.

Щоб встановити умову відображення, перейдіть до «Умовних полів» і створіть правило.

Умовні поля
Ось остаточний код контактної форми для групи перемикачів та текстового поля:

<fieldset><legend>Where did you hear about us?</legend>
[radio where class:where default:1 "Word of mouth" "Search engine" "Email" "Social media" "Other"]
</fieldset>

<p>[group other-input]<label for="where-other">Please say where you heard about us:</label>[text where-other id:where-other][/group]</p>

Форма тепер відображатиме можливість додавання додаткової відповіді лише при виборі Інше.

Додаткова відповідьНе забудьте змінити текст повідомлення у розділі «Пошта», щоб додати нову інформацію до отриманого електронного листа.

От: [your-name] <[your-email]>
Тема: [your-subject]

Сообщение:
[your-message]

Где вы узнали о нас? [where]

[other-input]В каком другом месте? [where-other][/other-input]

-- 
Это письмо было отправлено из контактной формы компании Hostenko

Рядок [other-input]What other place? [where-other][/other-input]буде відображати [where-other]вміст лише тоді, коли дія буде завершена.

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

2 HubSpot

плагін HubSpot WordPress збере всі ваші відправлені форми Contact Form 7 і організує їх у безкоштовну CRM. Це дозволяє бачити всі сторінки, які переглядали контакти, спілкуватися з ними в чаті, поки вони знаходяться на вашому сайті. А також надсилати їм маркетингові електронні листи і все це безкоштовно.

HubSpot дозволяє легко управляти всіма вашими контактами і сегментувати їх у списки. Вся їх інформація фіксується в акуратній шкалі часу, щоб ви могли по-справжньому зрозуміти людей, які стоять за формами.
HubSpot
З плагіном HubSpot можна зберегти до 1 000 000 докладних записів контактів та компаній та безкоштовно надсилати до 2 000 автоматичних електронних листів.

Дивіться також:

як додати контактну форму в WordPress: 2 способи.

3. Contact Form 7 – Dynamic Text Extension

За допомогою Contact Form 7 - Dynamic Text Extension зможете додавати динамічні значення поля форми.

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

Ви можете додати наступні динамічні значення:

  • URL-адреси
  • Опублікувати інформацію, наприклад, назву, автор
  • Значення полів користувача
  • Ідентифікатори продуктів

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

Іноді я отримую листи з проханням додати посилання на конкретну посаду. Ось форма, яка трохи полегшить користувачеві надсилання запиту на посилання.

Остаточний варіант:

[response]

<h2>Suggest a link</h2>

<p>Do you have a suggestion for a helpful URL to link to this post? Send your idea using this form.</p>

<p><label for="your-name">Your Name (required)</label><br />
    [text* your-name id:your-name] </p>

<p><label for="your-email">Your Email (required)</label><br />
    [email* your-email id:your-email] </p>

<p><label for="your-url">Your Suggested URL (required)</label><br />
[url* your-url id:your-url]

<p><label for="your-reason">Why this URL merits inclusion in this post:</label><br />
    [textarea your-reason id:your-reason] </p>

<p>The following fields should be auto-generated:</p>

<p><label for="site-title">Site title:</label><br />[dynamictext dynamicsitetitle id:site-title "CF7_bloginfo show='name'"]</p>

<p><label for="post-title">This post title:</label><br />[dynamictext dynamicposttitle id:post-title "CF7_get_post_var key='title'"]</p>

<p><label for="post-url">This post URL:</label><br />[dynamictext dynamicurl id:post-url "CF7_URL"]


<p>[submit "Send"]</p>


Ось форма на фронтенді:
Скрин з фронтенду
У розділі «Пошта» вашої форми є пропонований рядок теми та текст повідомлення:

Тема: Предложение ссылок для [dynamicposttitle]

Сообщение: 

От: [your-name] <[your-email]>

URL, который нужно включить, следующий: [your-url]

Почему? [your-reason]

Сайт: [dynamicsitetitle]
Пост: [dynamicposttitle]
URL: [dynamicurl]

Не забудьте додати шорткод Contact Form 7 наприкінці повідомлення:

[contact-form-7 id="389" title="Предложите URL"]

Якщо ви бажаєте увімкнути контактну форму після всіх повідомлень, використовуйте do_shortcode() функцію у файлі шаблону вашої теми, зазвичай single.php :

<?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>

4. Contact Form Submissions

Contact Form Submissions зберігає всі відправки Контактної форми 7 до бази даних і дозволяє експортувати їх у файл CSV.

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

Плагін створює новий пункт меню під назвою «Відправлення» у Контактній формі 7.

Відправлення

Якщо ви використовуєте налаштування Mail(2) для створення автовідповідача, коли хтось надсилає форму, ці записи також будуть відображатися у ваших надісланих матеріалах. Кожна з них покаже нижче надісланий вам електронний лист.

5. Send PDF for Contact Form 7

Як ви могли здогадатися, Send PDF for Contact Form 7 надсилає PDF-файл під час надсилання контактної форми.

Ви налаштовуєте його через «Контакти»> «Надіслати PDF за допомогою CF7».

Спочатку виберіть із розкривного списку форму, з якою хочете надіслати PDF-файл.

Тепер у вас є чимало варіантів:

  • Надішліть PDF-файл відправнику, одержувачу або обом електронною поштою.
  • Надішліть файл CSV відправнику, одержувачу або обом електронною поштою.
  • Назвіть PDF-файл. Ви можете увімкнути теги форми в ім'я, наприклад [ім'я]. Це гарна ідея зробити імена файлів унікальними.
  • Виберіть, чи будуть файли зберігатися на веб-сервері або видалятися після надсилання. (Подумайте про захист даних!) Збережені файли йдуть у /wp-content/uploads/*РІК*/*МІСЯЦЬ/ Папку призначення можна змінити.
  • Перенаправте користувача на нову сторінку після надсилання контактних даних.
  • Додайте посилання для завантаження PDF.
  • Захистіть паролем PDF-файл.
  • Додайте заголовок зображення до PDF.
  • Додайте теги, такі як дата, час і номер сторінки в нижній колонтитул.
  • Персоналізуйте макет PDF, включаючи теги форм. Ви можете увімкнути файли, завантажені користувачами, якщо у формі включено завантаження файлів.

Ось приклад.

Файли, завантажені користувачамиПри надсиланні ця форма надсилає підтвердження бронювання у форматі PDF для семінару.

У цій контактній формі використані приховані динамічні поля із плагіна Contact Form 7 – Dynamic Text Extension. Також вбудована для прикладу картка Google.

[response]

<p>Reserve a place on our free WordPress workshop on October 11, 10am-1pm</p>

<p>You will receive a PDF booking confirmation. Make sure you bring it on the day.</p>

[dynamichidden workshop-name "WordPress workshop"]

[dynamichidden workshop-date "October 11, 2017"]

[dynamichidden workshop-time "10am-1pm"]

<p>Venue: Edinburgh Training and Conference Venue, 16 St Mary's St, Edinburgh EH1 1SU<p>

[dynamichidden venue "Edinburgh Training and Conference Venue, 16 St Mary's St, Edinburgh EH1 1SU"]

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d17869.009828576563!2d-3.224820505495686!3d55.95584995890996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4887c7861d248169%3A0x1b79e35e310a3371!2sEdinburgh+Training+and+Conference+Venue!5e0!3m2!1sen!2suk!4v1504703317151" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

<p><label for="your-name">Your Name (required)</label><br />
    [text* your-name id:your-name] </p>

<p><label for="your-email">Your Email (required)</label><br />
    [email* your-email id:your-email] </p>

<p><label for="access">Any access requirements? Please let us know.</label><br />
    [textarea access id:access] </p>

<p>[submit "Send"]</p>

У параметрах «Надіслати PDF за допомогою CF7» шаблон для PDF наступний:

<h1>Спасибо за ваше бронирование</h1>

<p>Мы с нетерпением ждем встречи с вами на [workshop-name] на [workshop-date] в [workshop-time].</p>

<p>Место проведения: [venue]</p>

<p>Ваши данные бронирования</p>

<p>Ваше имя: [your-name]</p>

<p>Ваш email: [your-email]</p>

<p>Любые требования к доступу: [access] </p>

<p>Забронировано на [date].</p>

Щоб надіслати PDF-файл людині, яка робить бронювання, у вас повинен бути включений автовідповідач Mail(2) для форми. PDF-файл прикріплений до електронного листа з підтвердженням.

В іншому випадку увімкніть посилання для завантаження PDF під час надсилання форми.

7 плагінів для додавання функцій Контактної форми 7

6. Contact Form 7 Honeypot

Проблеми зі спамерами? Тоді плагін Contact Form 7 Honeypot для вас. Він відлякує спамерів, не дратуючи користувачів незручними CAPTCHA або питаннями вікторини.

Плагін створює новий [honeypot]тег.

Новий код
У діалоговому вікні створення тега honeypot рекомендується перейменувати тег форми з honeypot і не відключати повідомлення про спеціальні можливості.

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

Невидиме текстове поле

Це код для прихованого поля, створеного контактною формою 7 Honeypot

Якщо контактну форму буде перевірено або переглянуто без стилю, у невидимому полі з'явиться повідомлення «Будь ласка, залиште це поле порожнім». Для налаштування цього повідомлення доступні функції фільтрації, а також HTML та CSS.

7. Contact Form 7 – PayPal Add-on

У вас є один продукт для продажу, і ви не хочете створити повноцінний магазин електронної комерції? Тоді Contact Form 7 – PayPal Add-on підійде саме вам.

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

Вкажіть загальні налаштування PayPal у розділі «Контакти» > «Параметри PayPal». Потрібно додати мову та валюту, додати ідентифікатор облікового запису PayPal та вибрати режим «Пісочниця» або «Живий». Перевірте свою форму у режимі пісочниці, перш ніж запускати її.

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

response]

<h2>Предзаказ электронной книги об Contact Form 7 для WordPress</h2>

<img src="{url}/Contact-Form-7-for-WordPress.png" alt="Contact Form 7 for WordPress" />

[dynamichidden productname id:productname "Contact Form 7 for WordPress"]

<p>Product ID: E100</p>
[dynamichidden productid id:productid "E100"]

<p>Price: £2.99</p>
[dynamichidden price id:price "£2.99"]

<p><label for="your-name">Your Name (required)</label><br />
    [text* your-name id:your-name] </p>

<p><label for="your-email">Your Email (required)</label><br />
    [email* your-email id:your-email] </p>


<p>[submit "Send"]</p>

Ось як виглядає форма замовлення в інтерфейсі:

Кінцевий варіант

Щоб увімкнути PayPal у контактній формі, встановіть прапорець на вкладці PayPal для цього введіть інформацію про продукт, який буде передано до PayPal.

Прапорець пейпел

Коли користувач надсилає форму, відбуваються дві речі:

  • Електронний лист надсилається особі, яка замовляє продукт.
  • Клієнт відправляється до PayPal для оплати товару.

Відправка електронного письма

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

Ось формулювання, яке можна використовувати для відправки тому, хто зробить попереднє замовлення:

Дякуємо за інтерес до [назва продукту], [ваше ім'я], <[ваша адреса електронної пошти]>.

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

Коли платіж буде підтверджено, ваше замовлення [productname], ID [productid] вартістю [price] буде надіслано після 02 лютого 2022 р.

Тут знову використовувалися приховані динамічні поля з плагіна Contact Form 7 — Dynamic Text Extension.

Відправка користувача до PayPal для оплати

Це відбувається автоматично при успішному надсиланні форми.

Послідовність така:

  1. Клієнту пропонується увійти до системи, якщо він ще не зареєстрований.
  2. Клієнт перевіряє своє замовлення.
  3. Клієнт оплачує замовлення та отримує екран підтвердження оплати та електронний лист.

Скрин підтвердження оплатиPayPal Checkout - оплата завершена

На сторінці налаштувань плагін дозволяє встановити URL-адресу перенаправлення у разі скасування, а також URL-адресу для успішного платежу.

Версія Pro version of Contact Form 7 – PayPal Add-on пропонує більше функцій, які долають деякі обмеження безкоштовної версії:

  • Надсилати електронні листи після оплати.
  • Продавати до 5 товарів у формі.
  • Зв'язати елементи форми з поля PayPal.
  • Стягувати плату за доставку та податок.

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

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

Джерело: wpmudev.com

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 1

Alex:

В елементор найкраща форма

Додати коментар або відгук