В этой статье мы рассмотрим, как с помощью Contact Form 7 создать форму, которая позволит посетителям вашего сайта заказать обратный звонок. Это важная функциональность для многих бизнесов, так как повышает конверсию и улучшает взаимодействие с клиентами.
Почему важно добавить поле для обратного звонка в форму
Обратный звонок — это удобный способ для пользователя быстро получить консультацию или помощь. Вместо того, чтобы искать телефон или писать письмо, посетитель просто оставляет свой номер, и менеджер перезванивает в удобное время. Это повышает лояльность и может увеличить продажи.
Contact Form 7 отлично подходит для реализации такой задачи, так как плагин гибкий, поддерживает кастомные поля и легко интегрируется с другими сервисами.
Создание формы обратного звонка в Contact Form 7
Для начала создадим простую форму, в которой будет поле для имени и телефона. В админке WordPress перейдите в раздел «Contact > Contact Forms», создайте новую форму и вставьте следующий код:
[text* your-name placeholder "Ваше имя"]
[tel* your-phone placeholder "Ваш телефон"]
[submit "Заказать звонок"]Поле [tel* your-phone] — это обязательное поле для ввода номера телефона. Атрибут * указывает, что поле обязательно для заполнения.
В настройках формы можно добавить дополнительные атрибуты, например, маску ввода или ограничение длины, но базового типа tel достаточно для большинства случаев.
Добавление маски ввода для телефона
Чтобы пользователь вводил номер в нужном формате, можно использовать JavaScript. Contact Form 7 позволяет добавлять свои скрипты. Пример маски с использованием библиотеки jQuery Mask Plugin:
document.addEventListener( 'wpcf7mailsent', function( event ) {
// Можно добавить дополнительные действия после отправки
}, false );
jQuery(document).ready(function($){
$("input[name='your-phone']").mask("+7 (999) 999-99-99");
});Для этого нужно подключить сам плагин маски или добавить в тему скрипт из CDN. Такой подход улучшит юзабилити и качество данных.
Отправка данных формы с полем телефона
В настройках почтового шаблона Contact Form 7 добавьте тег [your-phone] в тело письма, чтобы получать номер клиента:
Имя: [your-name]
Телефон: [your-phone]Таким образом менеджер сразу увидит, кто и с каким номером хочет обратный звонок.
Автоматизация обработки заявок на звонок
Чтобы не пропускать заявки, можно использовать интеграцию с CRM или сервисами уведомлений. Например, отправлять данные в Telegram или сохранять в базу. Ниже пример отправки номера телефона в Telegram с помощью Webhook:
add_action( 'wpcf7_mail_sent', 'contactform7ru_send_telegram' );
function contactform7ru_send_telegram( $contact_form ) {
$submission = WPCF7_Submission::get_instance();
if ( $submission ) {
$data = $submission->get_posted_data();
$phone = isset($data['your-phone']) ? $data['your-phone'] : '';
$name = isset($data['your-name']) ? $data['your-name'] : '';
$message = "Новая заявка на обратный звонок:\nИмя: $name\nТелефон: $phone";
$botToken = 'ВАШ_BOT_TOKEN';
$chatId = 'ВАШ_CHAT_ID';
$url = "https://api.telegram.org/bot$botToken/sendMessage";
$params = array(
'chat_id' => $chatId,
'text' => $message
);
wp_remote_post( $url, array( 'body' => $params ) );
}
}Такой код можно добавить в файл functions.php вашей темы или в плагин-сниппет. Он отправит уведомление в Telegram сразу после отправки формы.
Расширение функционала с помощью дополнительных плагинов
Для более продвинутых задач можно использовать дополнительные расширения:
- Contact Form 7 Dynamic Text Extension — автоматически подставляет данные в поля формы.
- Contact Form 7 Honeypot — защита от спама, чтобы звонки заказывали реальные пользователи.
- WPGPT с https://wpshop.ru — можно сгенерировать тексты для автоответов или подсказок прямо в форме.
Подключение этих плагинов значительно улучшит качество сбора данных и взаимодействия с клиентами.
Резюме и рекомендации
Добавление поля для телефона и организации обратного звонка в Contact Form 7 — это простой и эффективный способ увеличить конверсию сайта. Используйте обязательные поля, валидируйте данные, применяйте маски для удобства и интегрируйте с внешними сервисами для автоматизации.
Если вы хотите более сложный функционал, например, выбор времени звонка, можно комбинировать Contact Form 7 с плагинами календарей или кастомной логикой через хуки.
Экспериментируйте, тестируйте и улучшайте формы, чтобы сделать их максимально удобными для ваших посетителей.