Как сделать всплывающее окно с яндекс-формой (для онлайн-заявки на сайте)?

Question

[Вова]

У меня сайт на Wordpress...
Сейчас для заявок через сайт использую ссылку на яндекс.форму (т.е. клиент уходит с сайта чтобы оставить заявку на сам яндекс).
Но недавно нашел сайт, где яндекс.форма реализована в виде всплывающего окна: grafika21.ru
Подскажите, может кто-то в курсе, с помощью какого плагина например для Wordpress можно такое реализовать?
Заранее спасибо)

Answer 1

[Vefolio]

Для создания всплывающего окна с яндекс-формой можно использовать следующий подход:

Создайте кнопку или ссылку, по клику на которую будет открываться всплывающее окно.

<button id="open-form-btn">Открыть форму</button>

Добавьте JavaScript-обработчик на кнопку, который будет открывать всплывающее окно.

const openFormBtn = document.querySelector('#open-form-btn');
const formPopup = document.querySelector('#form-popup');

openFormBtn.addEventListener('click', function() {
  formPopup.classList.add('show');
});

Здесь мы добавляем обработчик события click на кнопку с id "open-form-btn" и добавляем класс "show" к элементу с id "form-popup", который будет содержать всплывающее окно.

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

<div id="form-popup" class="form-popup">
  <div class="form-content">
    <!-- Ваша яндекс-форма здесь -->
  </div>
</div>

Здесь мы создаем элемент с id "form-popup" и классом "form-popup", который будет содержать всплывающее окно. Внутри него создаем элемент с классом "form-content", в котором будет располагаться сама яндекс-форма.

Добавьте стили для всплывающего окна и яндекс-формы.

.form-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.form-content {
  background-color: #fff;
  padding: 20px;
  max-width: 400px;
  max-height: 80%;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.form-popup.show {
  display: flex;
}

Здесь мы задаем стили для элемента с классом "form-popup", который будет содержать всплывающее окно. Задаем ему фиксированное положение, 100% ширины и высоту, полупрозрачный цвет фона и высокий z-index, чтобы он был поверх всего содержимого страницы. Также добавляем свойства display: none и justify-content: center; align-items: center;, чтобы он не отображался изначально и чтобы содержимое было выровнено по центру. Для элемента с классом "form-content" задаем стили для самой формы.

Теперь вы можете добавить свою яндекс-форму внутри элемента с классом "form-content" и по клику на кнопку с id "open-form-btn"