Всплывающая форма обратной связи для wordpress: popup contact form 7 и всплывающее окно формы на Ajax

Всем привет. Появилась минутка и я решил посвятить ее заполнению пробелов у себя на сайте. А именно, хочу рассказать вам как делается всплывающая форма обратной связи для wordpress с помощью JavaScript, CSS, Html.

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

В идеале, я покажу вам как создать всплывающую форму обратной связи, она же popup contact form 7 или любая другая произвольная форма обратной связи в модальном окне.

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

Для успешной работы popup формы вам практически не нужны знания яваскрипт и пхп, – достаточно просто следовать пошаговой инструкции.

Навигация по странице:

Не бойтесь нажимать, вы перейдете сразу к просмотру нужной информации

 

За все время работы WEB - программистом я создал и повидал не одну сотню всплывающих форм: как самописных так и на базе готовых модальных окон типа fancybox, lightbox и тому подобное. По этому, опираясь на свой опыт я вывел для себя самый удобный и простой вид всплывающих модальных окон, белая форма на полупрозрачном черном фоне, им я с вами и хочу поделиться.

 

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

к менюДля более продвинутых пользователей я сейчас опишу 3 составляющих кода (яваскрипт, хтмл, цсс) для создания и работы модального окна. Далее, я покажу как этот код интегрировать в CMS WordPress для пользователей, которые не сильно разбираются в программировании. Перейти сразу к интеграции всплывающей формы на сайт вордпресс для начинающих можно нажав на этот линк.

Если вы хотите просмотреть код и скопировать его к себе на сайт нажимайте по очереди вкладки Html, CSS, Javascript ниже:

  • Всплывающая форма Html код

    <div rel="form1" class="black">
        <div class="big_box_close"></div>
        <div class="form_box">
            <a class="a_close_box">x</a>
            <div class="form_title">Название формы</div>
            <div class="form_form">
                ///место для вставки кода формы
            </div><!--form_form-->
        </div><!--form_box-->
    </div><!--black-->

    Это хтмл код для вставки в произвольное место родительского тега body. Лучше всего вставлять в конец страницы, перед закрывающимся тегом </body>

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

    <a href="#" rel="form1" class="show_form">Текст кнопки, можно менять</a>

  • Javascript для popup окна

    к менюТут, наверное, нужно сразу оговорится, в своем скрипте я буду использовать jquery библиотеку javascript. У вордпресс она подключена автоматически, а вот если вам нужна форма обратной связи в модальном окне на другой CMS, то вам придется подключить ее самостоятельно, например вот так:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    Теперь записываем вот такой код для работы модального окна:

    (function( $ ) {
    $(document).ready(function(){
        $(".show_form").on("click",function(){show_form_in_site($(this)); return false;});
        $(".big_box_close, .a_close_box").on("click",function(){hide_form_in_site($(this)); return false;});
    });
    function show_form_in_site(X){ // открываем нужную форму
        var needBoxToShow=$(".black[rel='"+X.attr("rel")+"']");
        needBoxToShow.fadeIn(500); // открываем нужную форму у них, ссылки и формы, rel совпадают
        var heightWind=parseInt($(window).height());
        var heightBox=parseInt(needBoxToShow.find(".form_box").outerHeight());
        var heighRaz=heightWind-heightBox;
        if(heighRaz>0){
            needBoxToShow.find(".form_box").css("top",parseInt(heighRaz/2)+"px");
        }
        return false;
    }
    function hide_form_in_site(X){ // прячем нужную форму
        X.closest(".black").fadeOut(500);
        return false;
    }
    })(jQuery);

  • Модальное окно для формы CSS код

    Идем дальше, сейчас я скину сюда код CSS для отображения формы:

    .black{
        position:fixed;
        top:0px;
        width:100%;
        height:100%;
        display:none;
        background:rgba(0,0,0,0.65);
        z-index:1000;
    }
        .big_box_close{
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            z-index:1001;
            display:block;
        }
        .form_box{
            position:relative;
            display:block;
            top:auto;
            left:auto;
            margin:0px auto;
            background:#ffffff;
            border-radius:5px;
            padding:18px 20px;
            box-sizing:border-box;
            width:100%;
            min-width:300px;
            max-width:350px;
            height:auto;
            z-index:1002;
        }
            .a_close_box{
                position:absolute;
                display:block;
                top:3px;
                right:3px;
                width:20px;
                height:18px;
                font-size:15px;
                line-height:1em;
                border-radius:10px;
                background:rgba(0,0,0,0.9);
                color:#ffffff;
                text-align:center;
                font-family:sans-serif;
                font-weight:bold;
                text-transform:uppercase;
                padding-top:2px;
                box-sizing:content-box;
                cursor:pointer;
                z-index:1003;
            }
            .form_title{
                position:relative;
                font-size:20px;
                font-weight:bold;
                padding-bottom:10px;
            }
            .form_form{
                position:relative;
                display:block;
                clear:both;
                width:100%;
                height:auto;
            }

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

 

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

vspluvayuschaya-forma

 

Пошаговая инструкция: всплывающая форма обратной связи для wordpress

к менюДалее вы увидите пошаговую инструкцию по созданию и добавлению всплывающих форм на сайт wordpress. Для начала я расскажу как делается всплывающая contact form 7, а потом как сделать произвольную форму обратной связи в модальном окне.

Popup Contact Form 7

1) к менюВам нужно установить плагин Contact Form 7 на ваш сайт, а также прочесть краткое руководство "Настройка Contact Form 7". Ссылка будет открыта в новом окне, она ведет на начало пошаговой настройки плагина CF7, перейдя по ней вы сможете прочесть урок и создать нужную форму у себя на сайте вордпресс. Далее можно будет закрыть ненужную вкладку.

Если вы все сделаете правильно у вас должен появится код для вставки вызова формы CF7 такого плана:

[contact-form-7 id="1252" title="Форма номер 1"]

id и title - могут выглядеть по другом, но в целом такая структура.

 

2) Далее нам нужно открыть в редакторе вордпресс или через фтп, кто как умеет, файл темы footer.php и записать туда вот такой код:

<div rel="form1" class="black">
    <div class="big_box_close"></div>
    <div class="form_box">
        <a class="a_close_box">x</a>
        <div class="form_title">Название формы</div>
        <div class="form_form">
            <?php echo do_shortcode('[contact-form-7 id="1252" title="Форма номер 1"]');?>
        </div><!--form_form-->
    </div><!--form_box-->
</div><!--black-->

Как у меня на скине:

всплывающая форма обратной связиИ сохраняем наши правки, нажав на кнопку "Обновить файл".

3) Открываем файл стилей style.css и записываем туда вот такой код:

.black{
    position:fixed;
    top:0px;
    width:100%;
    height:100%;
    display:none;
    background:rgba(0,0,0,0.65);
    z-index:1000;
}
    .big_box_close{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        z-index:1001;
        display:block;
    }
    .form_box{
        position:relative;
        display:block;
        top:auto;
        left:auto;
        margin:0px auto;
        background:#ffffff;
        border-radius:5px;
        padding:18px 20px;
        box-sizing:border-box;
        width:100%;
        min-width:300px;
        max-width:350px;
        height:auto;
        z-index:1002;
    }
        .a_close_box{
            position:absolute;
            display:block;
            top:3px;
            right:3px;
            width:20px;
            height:18px;
            font-size:15px;
            line-height:1em;
            border-radius:10px;
            background:rgba(0,0,0,0.9);
            color:#ffffff;
            text-align:center;
            font-family:sans-serif;
            font-weight:bold;
            text-transform:uppercase;
            padding-top:2px;
            box-sizing:content-box;
            cursor:pointer;
            z-index:1003;
        }
        .form_title{
            position:relative;
            font-size:20px;
            font-weight:bold;
            padding-bottom:10px;
        }
        .form_form{
            position:relative;
            display:block;
            clear:both;
            width:100%;
            height:auto;
        }
        
/***далее идут стили исключительно для оформления формы, их можно не переносить***/
        
            .form_form p{padding:4px 0px; margin:0px;}
            .form_form input[type=text],
            .form_form input[type=email],
            .form_form textarea{
                position:relative;
                display:block;
                width:100%;
                height:28px;
                font-size:14px;
                border:1px solid #7B7878;
                color:#000000;
                box-sizing:border-box;
                padding:2px 7px 0px 7px;
                background:#ffffff;
                border-radius:3px;
            }
            .form_form textarea{resize:none; height:100px;}
            .form_form input[type=submit]{
                background:#000000;
                border-radius:3px;
                font-size:14px;
                color:#ffffff;
                text-align:center;
                height:28px;
                padding:0px 20px;
            }
body span.wpcf7-not-valid-tip{font-size:12px;}
body div.wpcf7-response-output{margin:10px 0px 0px 0px; font-size:13px;}

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

 

4) Далее, нам нужно создать javascript файл, с именем script-forma.js . Можно создать обычный текстовый файл, а потом переименовать его и изменить разрешение txt на js.

Кстати, виндовс может вам это не дать сделать, придется скачать редактор типа Total Commander () или Filezilla. Он нам все равно будет нужен далее для заливки файла на сервер по фтп, хотя можно обойтись фтп редактором из хостинг панели.

 

5) В файл script-forma.js нужно записать вот такую информацию:

(function( $ ) {
$(document).ready(function(){
$(".show_form").on("click",function(){show_form_in_site($(this)); return false;});
$(".big_box_close, .a_close_box").on("click",function(){hide_form_in_site($(this)); return false;});
});
function show_form_in_site(X){ // открываем нужную форму
var needBoxToShow=$(".black[rel='"+X.attr("rel")+"']");
needBoxToShow.fadeIn(500); // открываем нужную форму у них, ссылки и формы, rel совпадают
var heightWind=parseInt($(window).height());
var heightBox=parseInt(needBoxToShow.find(".form_box").outerHeight());
var heighRaz=heightWind-heightBox;
if(heighRaz>0){
needBoxToShow.find(".form_box").css("top",parseInt(heighRaz/2)+"px");
}
return false;
}
function hide_form_in_site(X){ // прячем нужную форму
X.closest(".black").fadeOut(500);
return false;
}
})(jQuery);

Сохраняем файл и закрываем его. Кстати файл желательно сохранять в кодировке UTF-8 иначе мои комментарии на кириллице будет не прочесть.

 

6) Теперь открываем наш фтп клиент, я открываю Filezilla, вы можете открыть любой другой или воспользоваться встроенным клиентом у вашего хостинга.

Как пользоваться фтп клиентом Filezilla я когда то описывал в этом уроке. Смотрите заголовки "Инструменты для переноса wordpress" там есть ссылка для скачивания и далее идет "Пошаговая инструкция: перенос сайта wordpress" первых 4 пункта как раз о файлзиле.

И заходим на наш сайт. В корень сайта. Его очень просто определить, там есть как минимум 3 папки: "wp-admin", "wp-content", "wp-includes" а также файл конфигурации "wp-config.php" и куча других файлов.

 

7) Заходим с корня сайта в папку "wp-content", далее "themes", далее нужно выбрать имя вашей темы, их может быть несколько, у меня это "twentysixteen" у вас может быть другая. Заходим в папку темы:

форма обратной связи в модальном окне

 

8) Заливаем сюда наш файл, для этого нужно в левом окне найти его и сделать как на скине ниже:

popup contact form 7

 

9) Открываем файл functions.php и пишем туда вот такой код в самое начало:

<?php
add_action( 'wp_enqueue_scripts', 'scripts_to_form' );
function scripts_to_form(){
    wp_enqueue_script("script_form", get_bloginfo( 'stylesheet_directory' ).'/script-forma.js',array('jquery'),"0.1",false);
}
?>

как у меня на скине:

contact form 7 всплывающее окно

И не забываем сохранять наши правки.

 

10) Последний шаг, нам нужно добавить код вызова формы, он у нас выглядит вот так:

<a href="#" rel="form1" class="show_form">Текст кнопки, можно менять</a>

Он может быть произвольным и в произвольном месте, но обязательно должно присутствовать rel="form1" и class="show_form". Я вставляю этот код в шапку в header.php вот так:

vspluvayuschaya-forma-5

 

11) Наслаждаемся результатами нашей работы:

всплывающее окно с формой обратной связи

На этом popup contact form 7 или contact form 7 всплывающее окно закончен, нажав на кнопку вызова всплывающей формы, вы должны увидеть затемненный экран + форму посредине окна.

 

 

Произвольное всплывающее окно с формой обратной связи

к менюБывает ситуация, когда использовать плагин Contact Form 7 не целесообразно или невозможно, например супер уникальные формы или упертый заказчик :). Если первое можно реализовать на CF7, то с упертым заказчиком, который не любит плагины, – спорить бесполезно.

Далее я покажу вам пошаговую настройку самописной, произвольной всплывающей формы.

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

 

1) Открываем в новом окне вот эту запись: обратная связь wordpress без плагина и читаем ее от начала до конца + делаем все что там написано. В статье описан механизм создания произвольных форм на аякс. Закидываем код к себе на сайт и тестируем работу формы, как описано в статье.

 

2) После прочтения статьи выше у вас на сайте должен появится вот такой шорткод:

[formZak]

Надеюсь вы его проверили, например вставили в пост, и форма у вас появилась.

3) Догадались что нужно делать далее? – правильно, идем в инструкцию выше, которая называется "Popup Contact Form 7" и делаем все пункты начиная со второго и до конца. Единственный нюанс, там в п.2 мы ставили вот такой код:

<div rel="form1" class="black">
<div class="big_box_close"></div>
<div class="form_box">
<a class="a_close_box">x</a>
<div class="form_title">Название формы</div>
<div class="form_form">
<?php echo do_shortcode('[contact-form-7 id="1252" title="Форма номер 1"]');?>
</div><!--form_form-->
</div><!--form_box-->
</div><!--black-->

а теперь на его нужно заменить на вот такой:

<div rel="form1" class="black">
<div class="big_box_close"></div>
<div class="form_box">
<a class="a_close_box">x</a>
<div class="form_title">Название формы</div>
<div class="form_form">
<?php echo do_shortcode('[formZak]');?>
</div><!--form_form-->
</div><!--form_box-->
</div><!--black-->

далее забрасываем код, как написано в инструкции.

Подняться выше в инструкцию popup contact form 7 к п.2 можно нажав на ссылку.

 

Платная помощь по созданию всплывающей формы обратной связи

к менюНужна контактная форма в модальном окне wordpress но у вас не получается самостоятельно ее сделать? – не беда, мы с радостью поможем вам установить и прикрутить всплывающею форму обратной связи на сайт.

Цена услуги:

  • за создание contact form 7 всплывающее окно – 10$ (с правкой и подгонкой кода в ваш стиль)
  • за всплывающее окно с произвольной формой обратной связи на аякс – 15$

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

 

На этом у меня все, клик по ссылке поделиться приветствуется 🙂

Комментарии к записи «Всплывающая форма обратной связи для wordpress: popup contact form 7 и всплывающее окно формы на Ajax»:
  1. Сергей:

    Подскажите, а есть какая-то альтернатива атрибуту rel? А то он работает, по сути, только для Хрома, в остальных браузерах форма не открывается

    • admin:

      Добрый день. Работает во всех браузерах, проверенно. Но если нужно заменить то можно использовать data-id вместо rel, только ж поменяйте везде. Или вообще можно по id формы работать но не советую

  2. Сергей:

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

    • admin:

      Добрый день.
      Вот тут:

      $(".show_form").on("click",function(){show_form_in_site($(this));});
      $(".big_box_close, .a_close_box").on("click",function(){hide_form_in_site($(this));});

      нужно добавить return false;

      Будет вот так:

      $(".show_form").on("click",function(){show_form_in_site($(this)); return false;});
      $(".big_box_close, .a_close_box").on("click",function(){hide_form_in_site($(this)); return false;});

      обновил у себя код тоже.

  3. Сергей:

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

    .show_form {
    border:1px solid #ffffff; /*цвет границы*/
    background:#36abfc; /*цвет фона*/
    padding: 1%;
    display:block;
    text-align:center; /*выравнивание текста по центру*/
    color: #ffffff; /*цвет текста*/
    font-size: 25pt; /*размер шрифта*/
    text-decoration:none; /*убрать подчёркивание у ссылки*/
    border-radius: 20px; /*скругление*/
    height:50px;
    width:200px; /*ширина кнопки*/
    margin:auto; /*выравнивание кнопки по центру*/
    margin-bottom: 2%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }

    Извините за, вероятно, тупые вопросы, я только-только учусь.

    • admin:

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

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

  4. Сергей:

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

    • admin:

      Дак там все просто если копировали этот пример то у кнопки уже привинчен класс show_form можно в стилях писать:
      body .show_form{ваши стили}

  5. Сергей:

    Добрый день!
    А подскажите, пожалуйста, как поменять форму самой кнопки? Хотел бы сделать в виде кнопки с надписью другого цвета.

    • admin:

      Добрый день.
      В CF7 можно добавить класс для кнопки или ИД посмотрте в настройках. А уже к этому классу можно все что угодно на CSS написать.
      Если вы пример отсюда брали https://help-wp.ru/contact-form-7/ то там уже привинчен id sub1 к нему можно цепляться. Если что вот этот скин https://help-wp.ru/wp-content/uploads/2015/07/contact-form-7-dynamic-text.jpg

  6. Виталий:

    Понял. Еще вопрос. А почему при повторном открытии формы без обновления страницы на ней остаются уведомления. Как сделать чтобы она очищалась после закрытия без обновления страницы?

    • admin:

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

      (Если нажать на кнопку ответить, то все ответы будут складываться в дерево 🙂 )

  7. Виталий:

    Подскажите, как сделать, чтобы форма сама закрывалась после отправки?

    • admin:

      Добрый день.
      А как ваши пользователи узнают что сообщение отправлено тогда?
      В CF7 чтоб закрывалось можно воспользоваться событием on_sent_ok:"hide_form_in_site($('.big_box_close'));"

      Единственный момент возможно в функцию вам нужно другой селектор передавать вместо этого $('.big_box_close') но должно работать.

      О том ка добавить событие on_sent_ok можно почитать здесь: https://help-wp.ru/contact-form-7-dopolnitelnye-nastrojki/

  8. Михаил:

    Не работает в мозиле и сафари

    • admin:

      А хоть где-то работает? Может банально не весь код забросили или кеш в браузере 🙁

  9. Павел:

    Вопрос по поводу адаптивности.
    Когда пытаешься ввести данные в форму с мобильного телефона, поля закрываются клавиатурой и не видно, что ты вводишь. Скорее всего это решается при помощи JS, как сделать так, чтобы поле ввода всегда было в зоне видимости? Если интересно, вот пример сайта (ввожу без http, чтобы не было внешних ссылок на Вашем замечательном ресурсе =)): (-url-)

    Большое спасибо!

    • admin:

      для адаптива нужно немного менять CSS, это самый элементарный popup. Его можно усложнять и усложнять. В адаптиве это надо менять position:fixed; у меня есть вариант с использованием яваскрипта, постараюсь со временем его сюда выложить

  10. Павел:

    Отличная статья! Долго искал нечто подобное.
    А чтобы пользователя не перекидывало вверх страницы, можно тег "a", заменить например на "p". Тем самым уберётся href="#", и форма будет функционировать более корректно.

  11. Тимур:

    Добрый день!
    А как сделать так, чтобы поля формы очищались после отправки?
    Спасибо!

    • admin:

      Добрый день.
      Малость сегодня закрутился.
      Как вариант чистить поля на яваскрипте. если используете мой код, то в файл script-forma.js можно попробовать дописать:

      needBoxToShow.find("input[type=text]").val("");
      needBoxToShow.find("textarea").val("");

      писать в
      function show_form_in_site(X){

      после needBoxToShow.fadeIn(500);

      думаю должно работать

  12. Влад:

    Зачетная формочка, добавляю в закладки. Просто взял, просто вставил, просто все взяло и заработало.
    Отличная инструкция для новичков по созданию всплывающих форм поверх текста.

Сделать заказ
Онлайн помощь по WordPress