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

Contact Form 7 — фантастический бесплатный плагин для добавления контактных форм на сайт WordPress. Но, несмотря на простоту использования и надежность, ему не хватает многих готовых функций.

В этом посте покажем, как расширить Контактную форму 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>Где вы узнали о нас?</legend>
[radio where class:where default:1 "Из уст в уста" "Поисковая система" "Электронная почта" "Социальные сети" "Другое"]
</fieldset>

<wp-p>[group other-input]<label for="where-other">Пожалуйста, укажите, откуда вы узнали о нас:</label>[/group]</wp-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 можно сохранить до 1 000 000 подробных записей контактов и компаний и бесплатно отправлять до 2 000 автоматических электронных писем.

Смотрите также:

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

3. Contact Form 7 – Dynamic Text Extension

С помощью Contact Form 7 — Dynamic Text Extension сможете добавлять динамические значения в поля формы.

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

Вы можете добавить следующие динамические значения:

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

Скрытые поля также могут быть добавлены в формы. Это полезно, если вы хотите использовать теги в выводе электронной почты, но не показывать информацию в форме, где ее можно изменить.

Иногда я получаю электронные письма с просьбой добавить ссылку на конкретный пост. Вот форма, которая немного облегчит пользователю отправку запроса на ссылку.

Окончательный вариант:

[response]

<h2>Предложите ссылку</h2>

<wp-p>У вас есть предложение по поводу полезного URL-адреса для ссылки на этот пост? Отправьте свою идею с помощью этой формы.</wp-p>

<wp-p><label for="your-name">Ваше имя (required)</label><wp-br />
     </wp-p>

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

<wp-p><label for="your-url">Ваш предлагаемый URL (required)</label><wp-br />
[url* your-url id:your-url]

<wp-p><label for="your-reason">Почему этот URL заслуживает включения в этот пост:</label><wp-br />
    [textarea your-reason id:your-reason] </wp-p>

<wp-p>Следующие поля должны быть автоматически сгенерированы:</wp-p>

<wp-p><label for="site-title">Заголовок сайта:</label><wp-br />[dynamictext dynamicsitetitle id:site-title "CF7_bloginfo show='name'"]</wp-p>

<wp-p><label for="post-title">Заголовок псота:</label><wp-br />[dynamictext dynamicposttitle id:post-title "CF7_get_post_var key='title'"]</wp-p>

<wp-p><label for="post-url">URL поста:</label><wp-br />[dynamictext dynamicurl id:post-url "CF7_URL"]

Вот форма на фронтенде:

В разделе «Почта» вашей формы есть предлагаемая строка темы и текст сообщения:

Тема: Предложение ссылок для [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]

<wp-p>Забронируйте место на нашем бесплатном семинаре по WordPress 11 октября, 10 утра-1 вечера</wp-p>

<wp-p>Вы получите подтверждение бронирования в формате PDF. Обязательно возьмите его с собой в день мероприятия.</wp-p>

[dynamichidden workshop-name "WordPress воркшоп"]

[dynamichidden workshop-date "Октябрь 11, 2022"]

[dynamichidden workshop-time "10:00-1:00"]

<wp-p>Место проведения: Эдинбургский центр обучения и конференций, 16 St Mary's St, Edinburgh EH1 1SU<wp-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>

<wp-p><label for="your-name">Ваше имя (required)</label><wp-br />
     </wp-p>

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

<wp-p><label for="access">Есть требования к доступу? Пожалуйста, сообщите нам.</label><wp-br />
    [textarea access id:access] </wp-p>

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

В параметрах «Отправить PDF с помощью CF7» шаблон для PDF следующий:

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

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

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

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

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

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

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

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

Чтобы отправить PDF-файл человеку, делающему бронирование, у вас должен быть включен автоответчик Mail(2) для формы. PDF-файл прикреплен к электронному письму с подтверждением.

В противном случае включите ссылку для скачивания PDF при отправке формы.

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"]

<wp-p>ID товара: E100</wp-p>
[dynamichidden productid id:productid "E100"]

<wp-p>Цена: £2.99</wp-p>
[dynamichidden price id:price "£2.99"]

<wp-p><label for="your-name">Ваше имя (required)</label><wp-br />
     </wp-p>

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


<wp-p>[submit "Отправить"]</wp-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 на вашем сайте.

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Источник: hostenko.com/wpcafe