TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов


WordPress – Contact Form 7 и универсальная форма с скрытым полем ввода

Contact Form 7WordPressПлагины
2 616
Содержание
Contact Form 7 Modules – для скрытого поля ввода (hideinput)
Шаблон формы
Шаблон письма в форме
Popups — WordPress Popup – Реализация попап окон
Контент попап окна с ошибкой
Стили для попап окна с ошибкой
Контент попап окна для успешной отправки
Стили для попап окна для успешной отправки
Изображения для попап окон
И еще две штуки (старенькие, но красивые)
Экспорт PopUps
jQuery скрипт для обработки и вставки заголовков блока в попап и в скрытое поле ввода
AttrChange.js Скрипт отслеживающий изменения в DOM дереве страницы
Мой скрипт для Скрытой формы ввода
Пример модификации скрипта выше, в зависимости от потребностей и обилия блоков
Пример скрипта для применения на Woocommerce
Согласитесь, в случае создания лендинг пейдж страницы, у которой имеется огромное количество кнопок и блоков (содержание которых предполагает к действию), не совсем удобно создавать для каждого из данных элементов отдельную форму в плагине Contact Form 7. Помнится, был один проект, в макете которого было более 30 кнопок, и все они были по сути одинаковы по содержанию, но их отличие заключалось только в заголовке блока. Что ж, давайте создадим универсальную форму, которая будет захватывать заголовок блока, данным заголовком менять заголовок в попап окне, и сразу вставлять текст данного заголовка в скрытое поле ввода, которое визуально недоступно посетителю сайта.
Внимание: мой пример предполагает, что на вашем сайте уже установлен плагин Contact Form 7

Contact Form 7 Modules – для скрытого поля ввода (hideinput)

Contact Form 7 Modules - для скрытого поля ввода (hideinput) Загрузить плагин: https://ru.wordpress.org/plugins/contact-form-7-modules/ При помощи данного плагина мы реализуем скрытое поле, в которое и будет попадать текст заголовка блока.

Шаблон формы

Для того чтобы добавить скрытое поле ввода, установите плагин и активируйте его на сайте. Далее перейдите в форму Contact form 7 и добавьте шорткод скрытого поля ввода. [hidden hidden-120 id:HIDDENINPUT] В моём примере шаблон формы будет таким:

<style>
input#PhoneJA,
textarea#TextareaJA {
    padding-left: 14px;
}
input.wpcf7-form-control {
    min-width: 100%;
    min-height: 45px;
    margin-bottom: 15px;
}
#recapcha-popups{
    display:none;
}
</style>
[text* text-59 placeholder "Ваше имя*"]
[tel* tel-116 id:PhoneJA class:PhoneJA placeholder "Телефон*"]
[email Email id:Email class:Email placeholder "Email"]
<!--textarea* textarea-102 id:TextareaJA class:TextareaJA placeholder "Сообщение*"--><div id="recapcha-popups">[recaptcha]</div>
<span style="text-align:center;align-items: center;justify-content: center;display: block;">[submit id:BUTTOPOPUPS "Отправить"][hidden hidden-120 id:HIDDENINPUT]</span>

Шаблон письма в форме

Обязательно укажите на вкладке формы “Письмо” наше скрытое поле ввода [hidden-120]. В моем примере шаблон отправки письма будет выглядеть таким образом:

Обратите внимание: я использую нестандартные данные в полях “Кому” и “От кого”, потому как практически во всех проектах я использую отправку почты через Google Gmail API. Как его настроить, Вы можете глянуть здесь: Настройка Gmail SMTP.

Кому

ThisTestMailApi@gmail.com

От кого

info@ThisDomainSite.com

Тема

ThisDomainSite.com - ВЫБОР - "[hidden-120]"

Тело письма

<!doctype html>
<html>
  <head>
  <!--   Подключаем Google Fonts -->
  <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Open Sans">
<style>
  * {
    font-family:Open Sans;
  }
.Tovar, .Zagolovok{
font-weight:400;
}
</style>
  </head>
  <body>

<img style="max-width: 150px !important;" src="https://ThisDomainSite.com/wp-content/uploads/2018/10/SDStudio_Logo500x500-150x150.png">

<b><h2 class="Tovar">Пользователь выбрал товар:</h2></b>
<h2>[hidden-120]</h2>
<hr>
<h3 class="Zagolovok">Пользователь заполнил следующие данные:</h3>

<p><b>Имя:</b></p>
[text-59]
<p><b>Телефон:</b></p>
<b><a href="tel:[tel-116]">[tel-116]</a></b>
<p><b>Email:</b></p>
[Email]
-
Это сообщение отправлено с сайта <b>[_site_title]
<br>[_site_url]</b>

  </body>
</html>

Далее в поле обязательно отмечаем чекбокс “Использовать HTML-формат письма”.

Теперь перейдем к созданию попап окна

Popups — WordPress Popup – Реализация попап окон

Popups — WordPress Popup - Реализация попап окон Загрузить плагин Popups: https://ru.wordpress.org/plugins/popups/ При помощи данного плагина мы будем реализовывать всплывающие окна на сайте. Установите и активируйте плагин, далее создайте попап окно. В режиме редактора “Текст” введите верстку и шорткод контактной формы со скрытым полем для ввода. В моём примере код будет выглядеть так:

<div class="Popups_Title_Block h3">Заголовок</div>
<div class="Popups_SubTitle_Block">Суб заголовок</div>
[contact-form-7 404 "Not Found"]

Обязательно укажите в блоке настроек попап окна ”Trigger” в выпадающем меню (в котором текст по умолчанию “секунд после загрузки страницы”) “Manual Triggering”. WordPress – Contact Form 7 и универсальная форма с скрытым полем ввода Также нам понадобится идентификатор всплывающего окна, потому как мы планируем использовать лишь одно всплывающее окно, на котором предполагается использование универсальной формы. Согласитесь, нам ведь не нужно, чтобы скрипт обрабатывал все попапы подряд. Для того чтобы узнать идентификатор попапа, достаточно, находясь в режиме редактирования попапа, обратить внимание на текущую ссылку в URL браузера. В моем примере идентификатором является 4197. ID попапа нам понадобится для того, чтобы указать его в скрипте, и это важный момент. ID попап

Контент попап окна с ошибкой

<img class=" wp-image-1067 aligncenter" src="/wp-content/uploads/2019/02/flag.svg" alt="" width="177" height="161" />

Error filling form. The form was not filled correctly, or it was not filled at all. Please note the messages under the input fields.

Стили для попап окна с ошибкой

/*
 * Add custom CSS for this popup
 * Be sure to start your rules with #spu-1063 { } and use !important when needed to override plugin rules
 */

/*#spu-bg-1065 {
    opacity: 0.6;
    background-color: #F44336;
    z-index: 999999;
}*/
div#spu-bg-1065 {
    opacity: 0.6;
    background-color: #F44336;
    z-index: 9999999;
}
div#spu-1065 {
    z-index: 99999999;
}
/*Overlay*/
div#spu-1065:after {
    background-color: rgba(255, 255, 255, 0.91) !important;
    display: block;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
    opacity: 1;
    display: block;
}

#spu-1065 .spu-close {
    font-size: 30px;
    color: rgb(158, 158, 158) !IMPORTANT;
    text-shadow: 0 1px 0 #E91E63;
}

Контент попап окна для успешной отправки

<img class=" wp-image-1067 aligncenter" src="/wp-content/uploads/2019/02/like.svg" alt="" width="177" height="161" />
<p style="text-align: center;padding-top: 15px;">Thank! Your message has been successfully sent, we will contact you shortly.</p>

Стили для попап окна для успешной отправки

/*
 * Add custom CSS for this popup
 * Be sure to start your rules with #spu-1063 { } and use !important when needed to override plugin rules
 */
/*#spu-bg-1068 {
    opacity: 0.6;
    background-color: rgb(92, 162, 10);
    z-index: 999999;
}*/

div#spu-bg-1068 {
    opacity: 0.6;
    background-color: green;
    z-index: 9999999;
}
div#spu-1068 {
    z-index: 99999999;
}

/*Overlay*/
div#spu-1068:after {
    background-color: rgba(255, 255, 255, 0.91) !important;
    display: block;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
    opacity: 1;
    display: block;
}

#spu-1068 .spu-close {
    font-size: 30px;
    color: rgb(158, 158, 158) !IMPORTANT;
    text-shadow: 0 1px 0 rgba(50, 233, 30);
}

Изображения для попап окон

И еще две штуки (старенькие, но красивые)

Успешная отправка Ошибка отправки

Экспорт PopUps

По ссылке ниже Вы можете загрузить созданные мной и уже много раз испытанные попап окна для плагина Popups. В архиве находится два экспорта, созданных при помощи WordPress экспортера, на рус. и укр. языках. Скачать архив: UKRUS-Popups-ok-error.zip

jQuery скрипт для обработки и вставки заголовков блока в попап и в скрытое поле ввода

Теперь основная задача — это захватить заголовок блока и вставить его в заголовок открывшегося попап окна и в скрытое поле ввода при щелчке по “кнопке действия” (в моем примере кнопка действия “ЗАКАЗАТЬ СЕЙЧАС”). То есть, допустим, у нас имеется вот такой блок, который содержит информационные блоки в количестве 5 штук: Пример блока При клике по кнопке “Заказать сейчас” первого блока скрипт захватит текст “Ролеты” и вставляет его в заголовок открывшегося попап окна и в скрытое поле (как указано на скриншоте ниже). Далее благодаря скрипту произойдет вставка заголовка блока в скрытое поле ввода формы. Аналогичные действия скрипт совершит и для остальных четырех блоков (но, конечно же, только в случае клика по кнопке “Заказать сейчас” блока). Схема работы скрипта В начале каждому из данных блоков необходимо присвоить класс “ForContactForm7HiddenInput”. Благодаря этому мы укажем скрипту, в каких именно блоках необходимо производить поиск заголовка.

AttrChange.js Скрипт отслеживающий изменения в DOM дереве страницы

Скачать нужный скрипт: https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js На страницу создателей: http://meetselva.github.io/ Данный скрипт нам поможет определить тот факт, что в текущий момент открыто именно то попап окно, которое нам нужно. А нам нужно именно попап окно для универсальной формы CF7. Скачиваем и кладем скрипт attrchange.js в корень темы. Далее подключаем скрипт в function.php, например так:

// Путь в корень аддонов и сторонних не WP плагинов
$url_SDStudio_JS_CSS_ADDONS = $theme_url;

//AttrcHange
wp_enqueue_script( 'AttrChange', $url_SDStudio_JS_CSS_ADDONS.'/attrchange.js' , array( 'jquery' ), null, true);

Мой скрипт для Скрытой формы ввода

    jQuery(document).ready(function ($) {

    // -------------------------------------------------------
    // Захватываем заголовок блока (текст в H3) START
    // -------------------------------------------------------

    // Объявляем переменную для заголовка блока
    var TitleBlock_SDStudio = '';

    // Вешаем обработчик на кнопку в блоке для действия
    $('.elementor-element.ForContactForm7HiddenInput .elementor-jet-button.jet-elements').click(function(){
        // Присваиваем переменной заголовок
        TitleBlock_SDStudio = $(this).closest('.elementor-element.ForContactForm7HiddenInput').find('h3.elementor-heading-title').text();
        // Отладка
        // console.log(TitleBlock_SDStudio);

    });

    // -------------------------------------------------------
    // Захватываем заголовок блока (текст в H3) END
    // -------------------------------------------------------

    // --

    // -------------------------------------------------------
    // AttrChange.js START - Отслеживаем события в DOM дереве
    // -------------------------------------------------------

    $('.spu-box').attrchange({
    //   trackValues: true,
        callback: function(event) {
            // which attribute you want to watch for changes
            if(event.attributeName == "style") {

                    // ----------------------------------------------------
                    // Обрабатываем только попап окно PopUps для уневерсальных форм

                    // Если в текущий момент открыто универсальное попап
                    if ($(this).attr('id') === 'spu-4197'){
                        // console.log('Да это тот попап который мне нужен');
                        // Вставим в заголовок данного попап окна, заголовок блока
                        $(this).find('.Popups_Title_Block.h3').text(TitleBlock_SDStudio);
                        // Заменяем текст в суб заголовке
                        var SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';
                        $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                        // Переводим текст блока в верхний регистр
                        var TitleBlockSDStudioUppercase = TitleBlock_SDStudio.toUpperCase();

                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                        $(this).find('input#HIDDENINPUT').attr('value', TitleBlockSDStudioUppercase);
                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                    } else {
                        // console.log('Нет! Это НЕ тот попап который нужен');
                    }
                    // ----------------------------------------------------
            }
        }
    });

    // ----------------------------------------------------
    // AttrChange.js END
    // ----------------------------------------------------
    });

Пример модификации скрипта выше, в зависимости от потребностей и обилия блоков

// =============================================================
// =============================================================
// Универсальная форма Contact Form 7 START
// =============================================================
// =============================================================

jQuery(document).ready(function ($) {

setTimeout(function(){

// -------------------------------------------------------
// Захватываем заголовок блока (текст в H3) START
// -------------------------------------------------------

// Объявляем ID нашего попап окна
var SPU_ID = 'spu-4197';
var SPU_ID_Full = '#'+SPU_ID;

// Объявляем переменную для заголовка блока
var TitleBlock_SDStudio = '';

// переменная для текста вставленного в скрытый импут
var TitleBlock_SDStudioHidden = '';

// Объявляем переменную для заголовка блока
var SubTitleText = '';

// 1 ------------------------------------------------------
// Обрабатываем бок с кнопками с право https://goo.gl/jCmC8Y
$('div#SD_MAin_Links_Right_List li.elementor-icon-list-item a').click(function(){
    // Заменем <br> напробелы и делаем текст в верхнем регистре
    TitleBlock_SDStudio = $(this).find('span.elementor-icon-list-text').html();
    TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/<br>/g, " ");
    TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase()

    TitleBlock_SDStudioHidden = TitleBlock_SDStudio;
    // Отладка
    // console.log(TitleBlock_SDStudio);
    SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

});

// 2 ------------------------------------------------------
// Обрабатываем бок с текстом под скролом https://goo.gl/N8niNA
$('div.ForContactForm7HiddenInput_Uslugi .elementor-jet-button.jet-elements').click(function(){
    // Заменем <br> напробелы и делаем текст в верхнем регистре
    TitleBlock_SDStudio = $(this).closest('div.ForContactForm7HiddenInput_Uslugi').find('h2.elementor-heading-title.elementor-size-default').text().toUpperCase();
//  TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase();
//  console.log(TitleBlock_SDStudio);

    if (TitleBlock_SDStudio == 'МЕТАЛЛОПЛАСТИКОВЫЕ ОКНА В ГОРОДЕ СУМЫ'){
            TitleBlock_SDStudio = 'Вы хотите приобрести "Металлопластиковые окна"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'Металлопластиковые окна';

        } else if (TitleBlock_SDStudio == 'БАЛКОННЫЕ РАМЫ И БАЛКОНЫ ПОД КЛЮЧ - В ГОРОДЕ СУМЫ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "Балконные рамы"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'Балконные рамы';

        } else if (TitleBlock_SDStudio == 'О СТЕКЛОПАКЕТЕ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "Стеклопакет"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'Стеклопакет';

        }

    // Отладка
    // console.log(SPU_ID_Full);

});

// 3 ------------------------------------------------------
// Обрабатываем бок c каруселью производителей https://goo.gl/hdeusv
$('a.jet-carousel__item-link').click(function(){
    return false;
//  $('div.ForContactForm7HiddenInputPartners .jet-carousel__item-text a').trigger('click');
});
$('div.ForContactForm7HiddenInputPartners .jet-carousel__item-text a').click(function(){
    // Заменем <br> напробелы и делаем текст в верхнем регистре
    TitleBlock_SDStudio = $(this).attr("data-name");
    TitleBlock_SDStudioHidden = TitleBlock_SDStudio;

//  TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/<br>/g, " ");
    TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase();
    TitleBlock_SDStudio = 'Заказать у производителя "'+TitleBlock_SDStudio+'" сейчас.';
    // Отладка
    // console.log(TitleBlock_SDStudio);
    SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

});

// 4 ------------------------------------------------------
// Вешаем обработчик на кнопку в блоке для действия
$('div.ForContactForm7CelevueBloki .elementor-jet-button.jet-elements').click(function(){
    // Присваиваем переменной заголовок
    TitleBlock_SDStudio = $(this).closest('div.ForContactForm7CelevueBloki').find('h3').text().toUpperCase();

    if (TitleBlock_SDStudio == 'БАЛКОННАЯ РАМА'){
            TitleBlock_SDStudio = 'Вы хотите заказать "БАЛКОННУЮ РАМУ"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'БАЛКОННАЯ РАМА';

        } else if (TitleBlock_SDStudio == 'БАЛКОННЫЙ БЛОК') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "БАЛКОННЫЙ БЛОК"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'БАЛКОННЫЙ БЛОК';

        } else if (TitleBlock_SDStudio == 'ЗАЛЬНОЕ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "ЗАЛЬНОЕ ОКНО"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'ЗАЛЬНОЕ ОКНО';

        } else if (TitleBlock_SDStudio == 'КУХОННОЕ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "КУХОННОЕ ОКНО"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'КУХОННОЕ';

        }
    // Отладка
    // console.log(TitleBlock_SDStudio);
//  SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

//  TitleBlock_SDStudioHidden = TitleBlock_SDStudio;

});

// 5 ------------------------------------------------------
// Вешаем обработчик на кнопку в блоке для действия https://goo.gl/2Lg125
$('div.ForContactForm7HiddenInput .jet-button__state.jet-button__state-hover').click(function(){
    // Присваиваем переменной заголовок
    TitleBlock_SDStudio = $(this).closest('.ForContactForm7HiddenInput').find('h3.elementor-heading-title').text();
    TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase();
    TitleBlock_SDStudio = 'Вы хотите заказать "'+TitleBlock_SDStudio+'"';
    // Отладка
//  console.log(TitleBlock_SDStudio);
    SubTitleText = 'Спасибо за Ваш заказ, мы вскоре свяжемся с Вами';

    TitleBlock_SDStudioHidden = TitleBlock_SDStudio;

});

// -------------------------------------------------------
// Захватываем заголовок блока (текст в H3) END
// -------------------------------------------------------

// --

// -------------------------------------------------------
// AttrChange.js START - Отслеживаем события в DOM дереве
// -------------------------------------------------------

$('.spu-box').attrchange({
//   trackValues: true,
    callback: function(event) {
        // which attribute you want to watch for changes
        if(event.attributeName == "style") {

                // ----------------------------------------------------
                // Обрабатываем только попап окно PopUps для уневерсальных форм

                // Если в текущий момент открыто универсальное попап
                if ($(this).attr('id') === SPU_ID){
                    // console.log('Да это тот попап который мне нужен');

                    // Вставим в заголовок данного попап окна, заголовок блока
                    $(this).find('.Popups_Title_Block.h3').text(TitleBlock_SDStudio);
                    // Заменяем текст в суб заголовке
                    // SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

                    $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                    // Переводим текст блока в верхний регистр
                    var TitleBlockSDStudioUppercase = TitleBlock_SDStudioHidden.toUpperCase();

                    // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                    $(this).find('input#HIDDENINPUT').attr('value', TitleBlockSDStudioUppercase);
                    // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                } else {
                    // console.log('Нет! Это НЕ тот попап который нужен');
                }
                // ----------------------------------------------------
        }
    }
});

// ----------------------------------------------------
// AttrChange.js END
// ----------------------------------------------------

},1000);
});

// =============================================================
// =============================================================
// Универсальная форма Contact Form 7 END
// =============================================================
// =============================================================

Пример скрипта для применения на Woocommerce

//===============================================================================================
// ------------------------------------------------------------
// CF7 + PopUps универсальные формы START
// ------------------------------------------------------------
//===============================================================================================

// ------------------------------------------------------------
// 1) Универсальная форма для карусели товаров START
// ------------------------------------------------------------
jQuery(document).ready(function ($) {
    setTimeout(function(){
        $('.rpc-post-para.rpc-content a.buy_now').click(  function(event){

// Запрещаем переход по ссылке
event.preventDefault();

        // ======================================================
        // КОД БЫЛ ОБОРВАН В ОРИГИНАЛЕ
        // ======================================================
        });
    }, 100);
});
Вам также может понравиться Больше от автора

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