Как сделать «Заказать обратный звонок» для WordPress своими руками

Если Вам на сайте понадобился функционал для пользователя для заказа обратного звонка, то Вы идете в поиск и вбиваете что-то типа этого - "Обратный звонок для WordPress". К своему удивлению, Вы находите несколько готовых решений, но они либо платные, либо честно просят оставлять обратную ссылку на разработчика. В этом ничего плохого нет, но если ставить все скрипты со ссылкой на разработчика, то очень скоро Ваш сайт превратится в каталог ссылок.

Что же такого сложного в форме "обратного звонка для WordPress"? Собственно, ничего сложного нет, но этот функционал, по закону жанра, должен включать в себя следующие элементы (как это реализовано на большинстве продающих страниц):

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

Естественно, не все представляют себе, как это сделать самостоятельно, лихорадочно ища плагины для WordPress и каждый раз разочаровываясь наличием в них рекламы и обратных ссылок.

Между тем, ничего сложного в создании формы обратного звонка для WordPress нет. Давайте делать все своими руками. Я расскажу и покажу попунктно, как это делается:

Создаем фиксированную кнопку для обратного звонка

Первым делом, готовим картинку кнопки для обратного звонка. Можно нарисовать самому или поискать в поиске. Дальше, нам ее нужно зафиксировать (неподвижно) в самой горячей зоне экрана, чтобы она больше привлекала внимание и была всегда под рукой. На практике это выглядит так (зеленая кнопка "Заказать обратный звонок" прилипла к правому верхнему углу экрана):Фиксированная кнопка для обратного звонка

Когда с картинкой определились, в header.php текущей темы после <body> прописываем вызов кнопки:

<div id="callbutton"><a href="" class="zvonok" rel="http://ваш_сайт.ру/contakts"><input type="button" id="viewbutton" style="opacity: 1;"></a></div>

А в style.css текущей темы пишем стиль для кнопки:

#callbutton {
height: 170px;
position: fixed;
top: 120px;
right: 0;
width: 43px;
z-index: 110;
}

#viewbutton {
border: 0;
padding: 0;
background: url(/img/bttn.png) 0 0;
height: 170px;
width: 43px;
cursor: pointer;
}

Перезагружаем страничку на нашем сайте и видим прилипшую к правому верхнему краю экрана кнопочку вызова обратного звонка. По идее она должна открывать по клику страничку /contakts. Но почему-то этого не происходит. Все правильно, саму страничку мы еще не создали и не поместили ее в модальное окно.

Создаем страницу с формой для заказа обратного звонка

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

Создаем шаблон для страницы обратного звонка

В этом ничего сложного нет:

Сделайте копию файла page.php из вашей текущей темы и назовите его page_contacts.php

Вверху файла после <? напишите: /* Template Name: Обратный звонок */

А также удалите из него (из page_contacts.php) строчки, вызывающие шапку, сайдбар и футер. В моем случае это были строчки:

<?php get_header(); ?>

<?php get_sidebar();  ?>

<?php get_footer(); ?>

Шаблон для страницы обратного звонка готов!

Создаем форму с полями для ввода

В нашем случае, создадим форму, по принципу обратной формы связи, с помощью всем нам известного плагина Contact Form 7 (Вы же можете создать форму с помощью своего любимого плагина). Здесь я не буду детально все расписывать, нам достаточно создать самую простую форму типа:

<p>[text* your-name] Ваше имя (обязательно) </p>
<p>[tel* tel-916] Ваш телефон (обязательно)</p>
<p>[select* menu-45 "Утром" "В обед" "Вечером" "Ночью"] Когда Вам позвонить?</p>
<p>[text* your-info] Дополнительная информация </p>
<p>[submit "Заказать обратный звонок"]</p>

Форма с полями для ввода готова, нам выдали шорткод:

[contact -form-7 id="13432" title="Контактная форма Заявка на обратный звонок"]

Теперь мы перенесем форму на саму страницу Заказа обратного звонка.

Создаем страницу для заказа обратного звонка

Создаем обычную страницу в WordPress (Страницы - Добавить новую), в Атрибутах страницы выбираем для нее наш заранее подготовленный шаблон "Обратный звонок":

Атрибуты страницы для обратного звонка

Постоянную ссылку для страницы прописываем contakts (помните, наша кнопочка ссылается на нее: rel="http://ваш_сайт.ру/contakts")

А в качестве содержимого страницы, в режиме редактора ТЕКСТ пишем что-то такое:

<table border="0" width="100%">
<tr><td>
<div><strong>Укажите свой телефон</strong></div>
<div><strong> и мы Вам перезвоним!</strong></div>
<p>
[contact -form-7 id="13432" title="Контактная форма Заявка на обратный звонок"]
</p>
</td></tr></table>

Итак, саму кнопку создали и зафиксировали, саму страницу с контактной формой подготовили (не забудьте ее работоспособность проверить по ссылке http://ваш_сайт.ру/contakts - ваша форма должна открываться на чистой белой странице), теперь наша задача - заставить открываться страницу в модальном окне по клику на саму кнопку.

Открываем форму заказа обратного звонка в модальном окне

И последний штрих - чтобы /contakts открывалась в модальном окне, нам осталось прописать некоторые коды. Код модального окна вставляем после вызова самой кнопки, в файле header.php:

<div id="modal_form">
<span class="modal_close">Х</span>
<iframe id="frm" src width="100%" height="103%" frameborder="1">
</iframe>
</div>
<div class="overlay"></div>

Там же (после него) добавляем js код:

<script>$(document).ready(function(){$(".zvonok").click(function(o){var t=$(this).attr("rel");o.preventDefault(),$(".overlay").fadeIn(200,function(){$("#modal_form").css("display","block").animate({opacity:1,top:"50%"},200)}),document.getElementById("frm").src=t}),$(".zvonok").click(function(o){o.preventDefault(),$(".overlay").fadeIn(200,function(){$("#modal_form").css("display","block").animate({opacity:1,top:"50%"},200)})}),$(".modal_close, .overlay").click(function(){$("#modal_form").animate({opacity:0,top:"45%"},200,function(){$(this).css("display","none"),$(".overlay").fadeOut(100)})})});</script>

Осталось лишь добавить в стили (в файл style.css):

#modal_form {
width: 350px;
height: 520px;
border-radius: 5px;
border: 3px #000 solid;
background: #fff;
position: fixed;
top: 45%;
left: 50%;
margin-top: -235px;
margin-left: -455px;
display: none;
opacity: 0;
z-index: 5;
padding: 20px 10px;
}

.modal_close {
width: 16px;
padding-left: 10px;
height: 18px;
position: absolute;
top: 2px;
right: 5px;
text-decoration: none;
cursor: pointer;
display: block;
border: 1px solid #000;
}
.overlay {
z-index: 3;
position: fixed;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}

Собственно и все. Функционал обратного звонка готов! Пробуем нажимать на нашу кнопку "Заказать обратный звонок". Результатом работы будет полноценное модальное окно с полями для ввода. Пользователь  на Вашем сайте сможет заполнить поля и его просьба перезвонить ему отправится на адрес электронной почты администратора сайта - тут уже вступает в силу форма обратной связи плагина Contact Form 7.

Форма для обратного звонка в модальном окне

Если по клику на кнопку модальное окно не открывается, то самая распространенная ошибка - отсутствие библиотеки jquery. В секцию <head> добавьте ее вызов:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Теперь все должно работать!

Вариант №2: Заказать телефонный звонок в модальном окне fancybox

Если на вашем сайте WordPress используются плагины с функционалом fancybox (модальные окна для фотографий и т.д.) можно сделать процедуру вызова формы для заказа обратного звонка еще проще:

1. В header.php текущей темы после <body> прописываем вызов кнопки:

<div id="callbutton"><a href="#contact_tel" class="fancybox"><input type="button" id="viewbutton" style="opacity: 1;"></a></div>

В style.css текущей темы пишем стиль для кнопки:

#callbutton {
height: 170px;
position: fixed;
top: 120px;
right: 0;
width: 43px;
z-index: 110;
}

#viewbutton {
border: 0;
padding: 0;
background: url(/img/bttn.png) 0 0;
height: 170px;
width: 43px;
cursor: pointer;
}

2. Создаем форму с нужными нам полями в плагине Contact Form7, где просим указать свой телефон и т.д..

3. Создаем модальное окно следующим кодом (добавляем код после вызова самой кнопки), в котором цепляем контактную форму:

<div style="display:none" class="fancybox-hidden">
<div id="contact_tel">
<?php echo do_shortcode('[contact -form-7 id="13432" title="Контактная форма Заявка на обратный звонок"]'); ?>
</div>
</div>

Все! Этот способ не требует создания шаблонов страниц и самих страниц. Форма заявки на обратный звонок создается в модальном окне fancybox.

Вариант №3: Заказать телефонный звонок в модальном окне на CSS

Еще один метод создания модального окна - простой до безобразия. С помощью этого метода создается модальное окно на чистом CSS и помещается внутри его контактная форма связи плагина Сontact-form-7 или его аналогов.

В нужном месте страницы, где надо разместить кнопку вызова формы размещаем код:

<label class="btn" for="modal-1">Заказать обратный звонок</label>

<div class="modal">
 <input class="modal-open" id="modal-1" type="checkbox" hidden>
 <div class="modal-wrap" aria-hidden="true" role="dialog">
 <label class="modal-overlay" for="modal-1"></label>
 <div class="modal-dialog">
 <div class="modal-header">
 <h3>Быстрая обратная связь </h3>
 <p>Если у Вас возникли вопросы, просьбы или пожелания... </p>
 <label class="btn-close" for="modal-1" aria-hidden="true">×</label>
 </div>
 <div class="modal-body">
<center><?php echo do_shortcode('[contact -form-7 id="13432" title="Контактная форма Заявка на обратный звонок"]'); ?></center>
 </div>
 </div>
 </div>
</div>

Теперь осталось лишь добавить CSS стили в файл со стилями:

.modal-header h3 {
    color: #555;  
    font-size: 20px;
    font-weight: normal;
    line-height: 1;    
    margin: 0;
}
.modal .btn-close {
    color: #aaa;
    cursor: pointer;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
}
.modal .btn-close:hover {
    color: red;
}
.modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
}
.modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
}
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
    display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
.modal-dialog {
    background: #fefefe;
    border: none;
    border-radius: 5px;
    position: fixed;
    width: 80%;
    max-width: 500px;
    left: 50%;
    top: -100%;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    z-index: 103;
}
.modal-body {
  padding: 20px;
}
.modal-body p {
    margin: 0;
}
.modal-header,
.modal-footer {
    padding: 20px 20px;
}
.modal-header {
    border-bottom: #eaeaea solid 1px;
}
.modal-header h3 {
    font-size: 20px;
    margin: 0;
}

.btn {
    background: #fff;
    border: #555 solid 1px;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
 color: #2870a0;
}
.btn:hover, .btn:focus {
    background: #f2f2f2;
 color: #000000;
  text-decoration: underline;
}
.btn-primary {
    background: #428bca;
    border-color: #357ebd;
    color: #2870a0;
}
.btn-primary:hover{
    background: #66A1D3;
    text-decoration: underline;
}

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

На этом, собственно, все! Побольше Вам клиентов и побольше телефонных звонков!

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

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

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

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

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

  1. Сделала по варианту 1, но форма не появляется в модальном окне. Скрипт с библиотекой jquery добавила. И в header немного по другому пришлось вставить, иначе на кнопке ссылки не было:

    Сама форма работает, кнопка на месте - поставилась отлично.
    Не подскажите, в чем может быть причина? Скорее всего, я где-то в коде напутала, поскольку в этом не сильна

  2. Валентина says:

    Здравствуйте, Вячеслав!
    Подскажите, пожалуйста как можно решить проблему. На сайте используется плагин fullpage. Т.е используется полноэкранная прокрутка сайта. При реализации третьего варианта, расположение модального окна зависит от высоты всей страницы сайта, а не от высоты экрана. top: 20%; надо подгонять под все разрешения экранов. Как можно было сделать, чтоб всё таки зависело от от высоты экрана?

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

  4. Ольга says:

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

  5. Евений says:

    При открытии появляется белое окно, помогите пожалуйста разобраться. Очень нужен обратный звонок

    1. Евений says:

      По второму способу тоже ничего не получается, когда выбираю картинку то получается пустая кнопка(белая) размеры кнопки пробовал менять, сам рисовал, ничего не получается!

  6. Дмитрий says:

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

    1. Вячеслав Скоблей says:

      Вижу одну из двух причин:
      1) у вас стоит кеш старых стилей
      2) повторяются имена стилей (названия уже используются вашей темой)
      В любом случае, вам поможет инструмент разработчика (в браузере).

      1. Дмитрий says:

        Со стилями разобрался. Спасибо. Возникла очередная проблема. Не отображается после изменения шаблона страницы не отображается капча. Хотя при выборе базового шаблона все отображается. И еще один вопрос(извините за наглость ), какую капчу используете Вы? Мне что-то reCAPTCHA совсем не нравится.

        1. Вячеслав Скоблей says:

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

  7. Антон says:

    Здравствуйте. Подскажите пожалуйста, у меня форма обратного звонка:
    [text* contact-name placeholder "Имя"]
    [tel* tel-145 placeholder "Ваш телефон"]
    [submit "Отправить"]

    Как мне правильно настроить в панеле "Письмо"? У меня высвечиваетя что найдена ошибка конфигурации...

    Кому: здесь мой email
    От кого: здесь вставляется contact-name
    Тема: здесь пусто
    Доп. заголовки: (здесь и ошибка, что сюда нужно поместить, tel-145???)
    Тело письма: От: [contact-name]
    Сообщение: [text-66]

    1. Вячеслав Скоблей says:

      Поле "Дополнительные заголовки" можете очистить - ничего страшного.

  8. Евгений says:

    Все, разобрался. Огромное СПАСИБО. Статья класс

  9. Евгений says:

    Добрый день. при нажатии на кнопку выходит белый квадрат. Дело в шаблоне.
    Что нужно еще прописать на странице page_contacts.php.
    Если меняю шаблон на стандартный все появляется, но коряво. Помогите пожалуйста...

    1. Вячеслав Скоблей says:

      Значит, наложились стили или элементы поверх. Нужно изучать диспетчер загрузки и разрешить конфликт. А уж тем более, новое туда ничего не надо вставлять.

      1. Евгений says:

        Т.е. шаблон page_contacts.php, должен содержать только:

        1. Вячеслав Скоблей says:

          Прошу прощения, запутался я уже. Не уверен что вы осилите этот вариант.
          Попробуйте самый простой http://seo-zona.ru/kak-sdelat-zakazat-obratnyj-zvonok-dlya-wordpress-svoimi-rukami-2015-08-08.html#_3____CSS

    2. Тиур says:

      Текст формы нужно прописать не в тексте страницы, а в тексте шаблона Внешний вид -> редактор -> page_contacts.php.
      так как в шаблоне этой страницы нет кода который выводит текст страницы.

      1. Тимур says:

        и в этом шаблоне пропишите
        иначе стили не будут цепляться

      2. Тимур says:

        «link href=`.../style.css` rel=`stylesheet` type=`text/css`»

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

  11. Здравствуйте!
    Огромное спасибо за статью. Единственный материал в рунете, которые на самом деле грамотно и доходчиво объясняет как же сделать кнопку обратного звонка своими руками. Но возник один вопрос - ипользовал функцию wp_is_mobile() для запрета показа кнопки на мобильных устройствах. На всех страницах сайта код работает исправно, но на главной баннер почему-то не пропадает. Кэш чистил. Вот сам код из header.php

  12. Александр says:

    Спасибо вам, применил третий способ, так как он самый простой, не требует скриптов и прекрасно работает на ослике! круть

  13. Александр says:

    После того как подключаю в header.php то:
    - перестаёт выпадать шапка с меню при прокручивании страницы вниз;
    - пропала карта гугл.

    1. Александр says:

      Приветствую! Может быть вы в курсе, как сделать чтобы кнопка заказа звонка в мобильной версии пропадала с экрана ?

      1. Вячеслав Скоблей says:

        Для этого в вордпресс есть функция wp_is_mobile(). Пример ее использования по ссылке

        1. Александр says:

          спасибо!

  14. Александр says:

    по какой причине могут не применяться стили для модального окна с содержимым ?

  15. Leo says:

    Все, разобрался.
    Использовал 2 способ. Мне нужна была кнопка в футере, в виджете, и "не висячая", в стилях прописал только это:

    #viewbutton {
    border: 0;
    padding: 0;
    background: url(/img/bttn.png) 0 0;
    height: 170px;
    width: 43px;
    cursor: pointer;
    }
    А в виджет запихнул это:
    [contact-form-7 id="97" title="Обратный звонок"]

    Вячеслав, дай Бог вам здоровья - очень помогли. Если есть замечания к данному коду, виджета буду благодарен за комментарии.

  16. Leo says:

    Спасибо! Одно не понял: способ 2, шаг 3 - куда этот код вставить?
    И еще, у меня вот такая форма на сайте выведена в виде виджета вордпресс, не подскажете, как ее в вашу кнопку превратить, чтобы не ссылка была, а кнопка?

    Заказать обратный звонок [contact-form-7 id="97" title="Обратный звонок"]

  17. Nik says:

    Огромное спасибо! Всё работает, но есть одно но, модальное окно уходит под header, это можно исправить?

  18. Вячеслав, добрый день!
    подскажите, пожалуйста, как реализовать идею?
    в одностраничном шаблоне "Zerif lite" есть уже две кнопки,
    расположенные по центру главного блока. как прикрутить
    всплывающую форму обратного звонка к одной из них?
    большое спасибо!

  19. Валентина says:

    Здравствуйте, Вячеслав! Спасибо большое за статью!!! Всё работает. Сделала по первому варианту. Единственное что хотелось бы сделать-это добавить стилей. При создании отдельного шаблона page_contacts.php, никак не получается прикрутить к этой странице стили. Подскажите в чём может быть проблема?

    1. Вячеслав Скоблей says:

      Стили подгружаются с кодом

      Но вместе с ним, могут подгрузится элементы дизайна, поэтому лучше вырезать код стилей с рабочего сайта (с шапки) и вставить их руками в файл page_contacts.php

      1. Валентина says:

        Спасибо большое, до меня дошло)

      2. Валентина says:

        Здравствуйте, Вячеслав! Подскажите, возможно работы этой кнопки в мобильной версии сайта? Я сделала по первому варианту, но к сожалению в мобильной версии не работает.

        1. Вячеслав Скоблей says:

          Если у Вас адаптивная верстка шаблона, то будет работать, правда нужно будет иное позиционирование на экране (для удобства). Если в мобильной версии у вас используется свой шаблон - естественно не будет работать (нужно подключать и там тоже).

          1. Валентина says:

            Спасибо большое, Вячеслав)

  20. Ann says:

    Вячеслав, большое спасибо и респект вам за статью! Вы, наверное, единственный, объясняете как делать форму без плагина Easy FansyBox. У меня в магазине он начинает картинки товаров некорректно отображать, поэтому ваша статья то что доктор прописал!
    Я сделала форму обратного звонка по 1-му варианту, пока что на Денвере. Но, не без огрехов: во-первых, внизу формы вылезла запись "Возможность комментирования заблокирована". Я так полагаю, что я что-то лишнее удалила в шаблоне. Начала возвращать поочерёдно строчки, но, то ошибка выскочит, то вылезет виджет с последними просмотренными товарами в футере. Может быть можно как-то по другому такой шаблон страницы сделать, чтобы всё было нормально? Простите, может мой вопрос глупый, но, даже самая незначительная подсказка от профессионала иногда может спасти ситуацию.
    А ещё, не подскажете, как можно сделать так, чтобы модальное окно открывшись вставало ровно по середине страницы по ширине и по высоте по центру страницы. И ещё, если я высоту и другие параметры в пикселях заменю на ту же величину только в емах, тогда она может претендовать на адаптивность? Я хочу сказать, что не могу подо всеми мониторами посмотреть сайт и меня это напрягает, невольно думаю, а может при каком-то разрешении у меня это модальное окошко будет сикось-накось. Так если я задам не в px, а в em, тогда будет всё в порядке? На сайте стоит тема Mantra. Ну, это на всякий случай. Заранее спасибо за ответ.

    1. Вячеслав Скоблей says:

      Вы выбрали, пожалуй, самый сложный вариант из предложенных, в нем много шагов и неопытный верстальщик может допустить массу ошибок. Советую вам перейти к СПОСОБУ N3

      1. Ann says:

        Вячеслав, спасибо, ещё раз, я сделала по 3-му способу и у меня всё получилось! Я добавила код вызова кнопки в header.php (хотя, можно было бы и в footer.php :)), стили кнопки поменяла на свои (сделала фиксированную кнопку, которая стоит на месте при прокрутке сайта). Легко и просто!

      2. Рустем Султанов says:

        День добрый!!! А если и третий способ не работает? Тема - Parallax One. Проглатывает все и ноль реакции.

        1. Вячеслав Скоблей says:

          Нужно смотреть консоль, искать причину. Их можем быть очень много.

  21. Андрей says:

    Лучший обзор по теме. Именно обратный звонок с кнопкой, перемещающейся вместе с экраном. Щас буду мучить. Спасибо.

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

  23. Доброго времени суток, Вячеслав!

    Сделал всё, по первому методу.

    Столкнулся с двумя проблемами:

    Проблема 1:
    - не отображается кнопка на сайте, хотя пробовал и в разные папки загружать свою кнопку, также пробовал в стилях указывать прямую ссылку на изображение.

    Проблема 2:
    - не появляется всплывающее окно, борюсь с этим уже 2 дня, но ничего не выходит.
    Не могли бы Вы бы описать хотя пару вариантов возможных проблем, из-за чего это может происходить.

    Спасибо за Ваш труд, ну и надеюсь, что Вы ответите.

    1. Вячеслав Скоблей says:

      Проблема в том, что вариантов проблем может быть множество:

      • конфликт стилей
      • ваш сайт кешируется
      • нахождение элементов внутри других элементов
      • и т.д.
      • Однозначно ответить, не видя вашего кода - проблематично.

  24. Дмитрий says:

    Огромное спасибо! Делал второй вариант. Не сразу понял куда картинку вставить. Если у кого то как у меня туго пойдет, то вот подсказка: в корне сайта сделать папку img и туда положить сделанную кнопку назвав ее bttn.png
    Ширина и высота кнопки 43*170px

    И еще на всякий случай, кто не внимательно читает =)
    На третьем шаге второго варианта код вставлять в header.php
    Еще раз спасибо! Сайт однозначно в закладки =)

    1. Дмитрий says:

      Вячеслав, доброго времени!
      Появился вопрос. Хочу сделать изображение кнопки .gif чтоб мигала или прыгала, но не в этом суть вопроса. Вопрос в том, что прописать и куда чтоб все работало?

      Достаточно ли просто указать путь к картинке нет bttn.jpg а bttn.gif конечно же положив в нужную папку подготовленный gif ?

      Спасибо заранее...

      1. Вячеслав Скоблей says:

        Естественно, вы можете использовать картинку gif, указав в стилях правильный к ней путь. Однако обратите внимание на такие свойства, как:

        height: 170px;
        width: 43px;
        

        в элементах #callbutton и #viewbutton. Вы должны изменить их размеры и нужное вам положение картинки на экране. Если картинка будет других размеров, вы можете просто не увидеть ее на экране или увидеть лишь ее часть.

        1. Дмитрий says:

          Все верно. Все работает. Благодарю еще раз!

          1. Все пропало! Спасите! Помогите =)

            Все хорошо работало, но... хостер оказался "нехорошим" у меня пропали все файлы (базы остались). Переехал и восстанавливаюсь вот уже вторую неделю. Один из моментов это- перестало выскакивать окошко, которое я настроил по данной инструкции по второму варианту. Уже и третий вариант попробовал. Уже и снес и заново поставил Contact form 7. Все равно не работает. Кнопку вижу. Нажимаю ее (кнопку) и в адресной строке http://сайт.ru меняется на http://сайт.ru/#contact_tel и все... окошко не выскакивает. Уже измучился весь. Выручайте?
            Сама форма на странице контактов поставлена- работает исправно.

            1. Вячеслав, возможно моя просьба пропущена, не могли бы Вы обратить внимание? Чуть выше описана проблема. Надеюсь на Вас. Спасибо.

              1. Вячеслав Скоблей says:

                Если я правильно понимаю, у вас конфликт в jQuery или он вообще не подключен. Попробуйте в шапку добавить код:

                < script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" >< /script >
  25. says:

    Статья бомба! Сайт в закладки, спасибо!

  26. says:

    Все сделал по варианту 3.
    Модальное окошко появляется, но в нем нет формы ContactForm.
    на отдельной странице ContactForm работает, а в этом окошке - нет.
    Помогите разобраться.

    1. Вячеслав Скоблей says:

      Здравствуйте Игорь. В примере, форма должна выводиться шорткодом с указанием правильного id формы:

      1. says:

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

        1. Вячеслав Скоблей says:

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

          1. Иван says:

            Тоже самое, форма не отображается во всплывающем окне. Можно подробнее рассказать куда же все-таки нужно вставить код?

            1. Вячеслав Скоблей says:

              Иван, уточните, какой из методов Вы используете? Что и куда вставляли?

              1. Иван says:

                Использую 3 вариант. Стили работают правильно. Кнопка отображается и вызывает модальное окно, но там нет формы отправки. id формы вставил свой. Куда нужно вставить ваш код, чтобы работал шоткод?

                1. Вячеслав Скоблей says:

                  Если вы вставили в тело страницы, записи, то шорткод прописывается так:

                  [contact -form-7 id="13432" title="Контактная форма Заявка на обратный звонок"]

                  если в тело шаблона, то так:
                  < ?php echo do_shortcode('[contact -form-7 id="13432" title="Контактная форма Заявка на обратный звонок"]'); ?>

                  1. Иван says:

                    Спасибо, все получилось)

                  2. Артур says:

                    Приветствую! я использую 1 вариант, и кнопка не появляется! может есть какие ни будь решения , сделал вроде правильно

                    1. Вячеслав Скоблей says:

                      Если кнопка не появляется, значит, что-то со стилями, либо они у вас не подгружаются, либо подменяются текущими

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

    1. Артур says:

      в "style.css" в любое место можно вставлять текст:
      #callbutton {
      height: 170px;
      position: fixed;
      top: 120px;
      right: 0;
      width: 43px;
      z-index: 110;
      }

      #viewbutton {
      border: 0;
      padding: 0;
      background: url(/img/bttn.png) 0 0;
      height: 170px;
      width: 43px;
      cursor: pointer;
      }
      я так понимаю "bttn.png" должна называться картинка которая будет использоваться в качестве кнопки?

      1. Вячеслав Скоблей says:

        Если у вас возникают такие вопросы, то Вам сложно будет разобраться со всем остальным кодом. Используйте способ #3 - он самый простой. И не хамите в комментариях, Новый год и Рождество на носу, где позитив?

  28. Алексей Урбанов says:

    Очень нужная и полезная вещь организация обратного звонка клиента с сайта. Повышение эффективности продаж до 75%

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

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