«Перезвоните мне» с получением SMS информирования

В статье "Как сделать «Заказать обратный звонок» для WordPress своими руками" мы рассмотрели некоторые варианты построения в WP окон с формами CF7 для быстрого заказа звонка. А в статье "Все секреты плагина Contact Form 7" рассматривались некоторые расширенные возможности столь популярного плагина. В этой статье мы сделаем некий симбиоз из этих двух публикаций и сделаем сами (своими руками) симпатичную форму под названием "Перезвонить мне" или "Заказать обратный звонок" с некоторыми особенными возможностями.

Выглядеть это будет следующим образом:

Форма обратной связи с SMS

C виду это обычная форма обратной связи, реализованная с помощью плагина CF7, содержащая два поля - Имя и Номер телефона. Но в отличии от стандартной формы, у этой будут две особенности:

  1. Поле "Номер телефона" будет проходить валидацию на соответствие телефона;
  2. После отправки формы с сайта, администратор сайта получит молниеносно SMS извещение (содержимое форм сразу же отправляется по SMS с дублированием на электронную почту);

У такой формы заказа обратного звонка явные преимущества. И их тоже два:

  1. Антиспам (вероятность, что вам будут сыпаться фейковые заявки на звонок очень низкая);
  2. Оператор, получивший заявку на обратный звонок, может отреагировать на него практически молниеносно;

Где и зачем используют  такие формы? Там, где вы оставляете пользователям Вашего сайта возможность связаться с Вами, если у него возник вопрос или проблема, если Вы не хотите "светить" своих телефонов и т.д. Такие формы есть как на крупных интернет-площадках (где собственно подключены колл-центры), так и маленьких интернет-площадках, торгующих разным барахлом или предлагающие разнообразные услуги.

Обычно "Заказать звонок" посетитель видит в шапке сайта (на первом экране). Такая позиция идеально подойдет для постоянной аудитории сайта или интернет-магазина. Если у Вас информационный сайт и люди приходят на него с поиска, то идеально будет разместить такую форму в самом низу публикации/новости/статьи, с таким расчетом, что пользователь упрется в это заманчивое предложение после ознакомления с материалом. Озаглавить такую форму можно интригующе:

  • Вам перезвонить?
  • Не нашли ответа на свой вопрос?
  • Не нашли то, что искали?
  • У Вас остались вопросы?
  • Требуется помощь консультанта?

Создаем форму CF7

Contact Form 7 - Добавить новую. В шаблон формы вставляем:

<p>[text* your-name maxlength:22 placeholder "Ваше имя"] </p>
<p>Телефон<br />
[text* your-tel class:tel placeholder "+7 (___) ___-__-__"] </p>
<p>[submit "Перезвоните мне, пожалуйста"]</p>

В файлы single.phppage.php шаблона (если идет речь о вставке формы в конец публикации) в нужное место вставляем код (не забываем поправить contact-form-7 шарткод на шарткод  своей контактной формы):

<!--noindex--><div class="action-callback call">
<h3>Не нашли, что искали?</h3>
<h4>Закажите обратный звонок! *</h4>
<?php echo do_shortcode('[contact-form-7 404 "Not Found"]');?>
<div style="clear:both;"></div>
</div>
<b>* В 97% случаев мы перезваниваем в течении 5 минут!</b><!--/noindex-->

В style.css вставляем стили (не забываем поправить под себя):

.action-callback.call {
border-radius: 5px;
background: #2b8c2a;
border: 1px ridge #2b8c2a;
background-repeat: no-repeat;
background-size: cover;
height: 240px;
color: #fff;
}

Подключаем валидацию телефонного номера

Куда нибудь в footer.php (во избежание конфликтов) вашей текущей темы (файл jquery.maskedinput.min.js вы можете перенести на свой сервер):

<script type='text/javascript' src='https://seo-zona.ru/files/jquery.maskedinput.min.js'></script>
<script type="text/javascript">
jQuery( function($){
$(".tel").mask("+7 (999) 999-99-99");
});
</script>

На этом валидация телефонного номера в CF7 закончена!

Подключаем SMS информирование

Прежде всего, нам понадобится регистрация в сервисе, который будет присылать нам SMS. Рекомендую https://seozona.sms.ru (проследуйте по ссылке для регистрации).

За SMS придется платить, но 10  SMS в день за счет сервиса, поэтому если Вы не будете выходить за этот лимит, то и можете пользоваться SMS-информированием абсолютно бесплатно. На пожарный случай, баланс можно пополнить на произвольную сумму.

После регистрации, в личном кабинете в меню найдите "Программистам", в этой вкладке найдете Ваш api_id. Он вам понадобится. Так же вам понадобится указать свой телефон на который будут приходить SMS в нижеследующем коде, который вставляем в файл functions.php текущей темы:

add_action( 'wpcf7_mail_sent', 'your_wpcf7_mail_sent_function' );
function your_wpcf7_mail_sent_function( $contact_form ) {
$title = $contact_form->title;
$posted_data = $contact_form->posted_data;
if ('Заказ звонка' == $title ) {
$submission = WPCF7_Submission::get_instance();
$posted_data = $submission->get_posted_data();
$yourphone = $posted_data['your-tel'];
$yourname = $posted_data['your-name'];
$mes = 'Заказ ЗВОНКА:'.$yourphone.' '.$yourname;
$sms = str_replace(' ','+', $mes);
$url2="http://sms.ru/sms/send?api_id=Y231AC10-0F1B-8AE2-1622-478C2FAC61F1&to=794512345678&text=$sms";
$body=file_get_contents($url2);
}}

На этом все! Всем спасибо за внимание! Возникшие трудности в процессе построения такой формы обсуждаем в комментариях!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (8 голоса, рейтинг: 4,88 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

1 комментарий

  1. Елена says:

    добрый день! А как сделать отправку СМС с кодом подтверждения и при верном коде- отправку формы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте ранее:
Как купить оригинальный Xiaomi

Xiaomi бывают предназначенные для китайского рынка, которые европейцу не подходят по целому ряду причин. В чем отличия? По каким критериям...

Закрыть