Обратная связь для темы the7

Форма обратной связи Contact form 7

Шаблон формы

<h3 style="text-align: center;">Вызвать замерщика</h3>
<label> Ваше имя<span style="color: red">*</span>
    [text* your-name] </label>

<label> Ваш телефон<span style="color: red">*</span>
    [tel* your-phone] </label>

<label> Сообщение
    [textarea your-message x3] </label>

[submit "Отправить"]

Письмо

Имя: [your-name]
Телефон: [your-phone]
Сообщение:
[your-message]

Копируем файлы в dt-the7-child/

css/magnific-popup.css
js/jquery.magnific-popup.js
js/jquery.inputmask.bundle.js

https://github.com/dimsemenov/Magnific-Popup/tree/master/dist

https://github.com/RobinHerbots/Inputmask/tree/5.x/dist

Создаём dt-the7-child/js/main.js

jQuery(document).ready(function(){
  //Input Mask
  jQuery("input[type=tel]").inputmask("+7 (999) 999-99-99");

  //Popup Form - CallBack
  jQuery(".order__link").magnificPopup({
      items: {
            src: '#callback',
            type: 'inline'
      }
  });
});

Добавляем стили dt-the7-child/style.css

/* Magnific Popup */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 400px;
  margin: 20px auto;
}

Подключаем стили и скрипты dt-the7-child/functions.php

/**
 * Enqueue Styles
 */
function mfnch_enqueue_styles() {
	wp_enqueue_style( 'magnific-popup', get_stylesheet_directory_uri() . '/css/magnific-popup.css' );
	wp_enqueue_style('style', get_stylesheet_directory_uri() .'/style.css');

	wp_enqueue_script( 'magnific-popup-js', get_stylesheet_directory_uri() . '/' . 'js/jquery.magnific-popup.js', array('jquery'), '1.1.0', true );
	wp_enqueue_script( 'jquery-inputmask', get_stylesheet_directory_uri() . '/' . 'js/jquery.inputmask.bundle.js', array('jquery'), '4', true );
	wp_enqueue_script( 'main', get_stylesheet_directory_uri() . '/' . 'js/main.js', array('jquery'), '0.0.1', true );
}
add_action('wp_enqueue_scripts', 'mfnch_enqueue_styles', 101);

Сюда же добавляем код формы. Шорткод нужно будет заменить.

//Форма обратного звонка
add_action( 'wp_footer', 'callbackform', 1000 );
function callbackform() {
  echo '<div id="callback" class="white-popup mfp-hide">';
  echo do_shortcode( '[contact-form-7 id="923" title="Вызвать замерщика"]' );
  echo '</div>';
}

Указываем ссылке нужный класс

<a href="#" class="order__link">Заказать</a>