Всплывающая форма обратной связи wordpress: Всплывающая форма обратной связи для WordPress

Содержание

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

Категория: WordPress, Опубликовано: 2015-12-18
Автор:

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

1. Для чего нужна всплывающая форма обратной связи?

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

Во вторых, всплывающий эффект достаточно интересно выглядит;

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

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

 

Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:

Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.

Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.

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

 

2. Устанавливаем Contact Form 7

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

Копируем название плагина Contact Form 7

Переходим в меню «Плагины» => «Добавить новый». Дальше вы можете либо скачать этот плагин с сайта разработчика, и затем загрузить его при помощи кнопки «Загрузить плагин»

Либо сразу в строку поиска ввести название плагина и нажать Enter.

Нажимаем на кнопку «Установить» и теперь активируем его.

 

3. Устанавливаем Easy FancyBox

Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox

4. Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Нам нужно перейти к стандартным настройкам медиафайлов WordPress.

Заходим в пункт меню «Настройки» => «Медиафайлы».

Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.

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

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

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

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

Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»

И в поле «Текст» вставляем следующий фрагмент кода:

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div> <div> <div> [contact-form-7 title=»Контактная форма 1″] </div> </div>

1

2

3

4

5

6

<div><a href=»#contact_form_pop_up»>Отправить сообщение</a></div>

<div>

<div>

[contact-form-7 title=»Контактная форма 1″]

</div>

</div>

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.

Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться

6. Редактируем фрагмент кода вывода формы обратной связи.

Вставляем этот шоткод в код виджета вместо [ВАШ ШОТКОД] Вместо ОТПРАВИТЬ СООБЩЕНИЕ вы можете написать любой другой текст. Это текст высветится на кнопке, по щелчку на которой будет открываться всплывающая форма обратной связи. Сохраняем настройки, переходим на наш сайт, обновляем страниц, и нажимаем на нашу ссылку. Вот что у меня получилось:

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

7. Стилизация кнопки

Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили:

/***Стили для формы обратной связи****/ .contact-us a{ border:1px solid #ccc; /*цвет границы*/ background:#2674C8; /*цвет фона*/ padding:10px 20px; /*внитренние отступы*/ display:block; text-align:center; /*выравнивание текста по центру*/ color:#fff; /*цвет текста*/ text-decoration:none; /*убрать подчёркивание у ссылки*/ width:200px; /*ширина кнопки*/ margin:auto; /*выравнивание кнопки по центру*/ -webkit-transition: all 0. 5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } /**Плавное появление тени у кнопки при наведении**/ .contact-us a:hover{ -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow:0 0 6px #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

/***Стили для формы обратной связи****/

 

.contact-us a{

border:1px solid #ccc; /*цвет границы*/

background:#2674C8;  /*цвет фона*/

padding:10px 20px; /*внитренние отступы*/

display:block;

text-align:center; /*выравнивание текста по центру*/

color:#fff;  /*цвет текста*/

text-decoration:none;  /*убрать подчёркивание у ссылки*/

width:200px;  /*ширина кнопки*/

margin:auto;  /*выравнивание кнопки по центру*/

-webkit-transition: all 0.

5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

}

 

/**Плавное появление тени у кнопки при наведении**/

 

.contact-us a:hover{

-moz-box-shadow: 0 0 6px #000;

-webkit-box-shadow: 0 0 6px #000;

box-shadow:0 0 6px #000;  

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

}

Посмотрим, что у нас получилось:

Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.

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

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

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

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

Желаю вам успехов в создании такой формы и до встречи в следующих статьях.

 

С уважением Юлия Гусарь

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

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

Чтобы реализовать на сайте всплывающую контактную форму нужно установить два плагина: плагин формы обратной связи Contact form 7 и плагин шорткодов Shortcodes Ultimate. Последний плагин имеет обширный функционал и наверняка потребуется для реализации других задач.

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

1. Следующий шаг —  создание содержимого лайтбокса (модальная форма обратной связи). Заходим в раздел «шорткоды»:

 

2. Добавляем содержимое лайтбокса (модальная форма обратной связи):

 

3. В открывшемся окне заполняем поле ID — вставляем туда любой идентификатор, написанный латиницей, в нашем случае: contact-form:

 

4. Далее, наша задача создать непосредственно лайтбокс (модальная форма обратной связи). Для этого вновь вверху нажимаем кнопочку «ВСТАВИТЬ ШОРТКОД» (см. изобр. 1) и там выбираем «Лайтбокс»:

 

5. В открывшейся форме выбираем тип содержимого Html, ниже заполняем источник содержимого id, заданый в предыдущем пункте для содержимого лайтбокса. Не забываем впереди поставить символ решётки: #contact-form:

 

6. Следующий шаг — создание кнопки, на которую будут кликать посетители сайта. Кнопка будет открывать всплывающую форму обратной связи. Для этого, снова кликаем наверху нашей страницы «Вставить шорткод» и в открывшейся форме выбираем функцию «Кнопка». Настраиваем её по своему усмотрению в соответствии с общим дизайном сайта. Обращаю ваше внимание на то, что результат настроек можно посмотреть в реальном режиме. И не забывайте «Сохранить шорткод».

 

7. Теперь берём сохранённый шорткод «Обратной формы связи», созданный в плагине Contact form 7 :

 

8. И вставляем его в нашу конструкцию вместо слов «Содержимое кнопки»:

 

По умолчанию плагин создаёт форму в один столбик, но часто возникает необходимость сделать форму обратной связи в два-три столбика. Как это сделать читайте КАК СДЕЛАТЬ ПОЛЯ CONTACT FORM 7 В 2-3 КОЛОНКИ

Как легко создать всплывающую форму WordPress (шаг за шагом)

Хотите создать всплывающую форму для своего сайта WordPress?

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

Если у вас есть нужные инструменты, вы можете легко создавать пользовательские всплывающие формы в WordPress без

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

В этой статье

  • Метод №1: Создание всплывающей формы с помощью OptinMonster + WPForms
    • Установка OptinMonster
    • Установка WPForms
    • Создание формы с помощью WPForms
    • Создание всплывающей формы Кампания с использованием OptinMonster
    • Предварительный просмотр и публикация Всплывающая форма WordPress
  • Метод №2: Создание всплывающей формы с помощью Popup Maker + WPForms
    • Установка необходимых плагинов всплывающей формы
    • Создание простой контактной формы
    • Создайте всплывающее окно с помощью Popup Maker
    • Публикуйте всплывающую форму с помощью Popup Maker

Создайте всплывающую форму WordPress сейчас

Зачем использовать всплывающую форму WordPress?

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

Кроме того, вы также можете использовать всплывающую контактную форму WordPress для:

  • Обратная связь —  Собирайте отзывы, запрашивая комментарии или даже создавая опрос.
  • Подписка —  Создайте свой список рассылки по электронной почте, упростив подписку одним нажатием ссылки.
  • Встречи —  Позволяет пользователям запланировать звонок или встречу.

Итак, теперь, когда вы знаете, почему вы хотите использовать всплывающую форму WordPress, давайте перейдем к тому, как именно ее создать!

Существует несколько способов создать всплывающую форму для вашего сайта WordPress. Мы покажем вам два разных, но простых способа.

В первом методе мы будем использовать платформу SaaS (OptinMonster), которая идеально интегрируется с WordPress для создания всплывающих форм.

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

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

Способ №1: создание всплывающей формы с помощью OptinMonster + WPForms

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

Давайте приступим.

Установить OptinMonster

OptinMonster — это сервис SaaS, предлагающий инструменты оптимизации конверсии. Несмотря на то, что это сервис SaaS, OptinMonster легко интегрируется с сайтами WordPress через свой плагин.

На самом деле, вы можете скачать плагин OptinMonster бесплатно и создать до 3 кампаний с общим лимитом 300 показов кампании в месяц без подписки на платную лицензию.

Идеально подходит для настройки вашего первого всплывающего окна WordPress.

Если вы не знаете, как установить плагин WordPress, вот инструкции по добавлению OptinMonster на ваш сайт WordPress.

Позже вы, вероятно, захотите снять ограничения бесплатной версии. К счастью, вы можете перейти на платную лицензию OptinMonster всего за 9 долларов в месяц.

Когда вы настроили OptinMonster для своего сайта WordPress, пришло время перейти к следующему шагу.

Установить WPForms

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

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

После покупки лицензии установите WPForms на свой сайт.

Создание формы с помощью WPForms

После активации WPForms вы можете сразу начать создавать формы с панели управления WordPress.

Для начала перейдите к WPForms »Добавить новый .

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

В этом примере мы будем использовать шаблон простой контактной формы. Нажмите кнопку Использовать шаблон под ним, чтобы продолжить.

WPForms быстро загрузит выбранный вами шаблон и перенесет вас на экран конструктора форм. Шаблон простой контактной формы включает поля «Имя», «Электронная почта» и «Текст абзаца».

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

Если вы довольны тем, как выглядит ваша форма, нажмите Сохранить .

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

Создайте кампанию всплывающей формы с помощью OptinMonster

После сохранения формы вернитесь на панель управления WordPress. Затем нажмите OptinMonster » Кампании в боковом меню WordPress.

Здесь нажмите кнопку Создайте свою первую кампанию .

OptinMonster предлагает множество различных типов кампаний. Выберите Popup  в качестве типа кампании.

После этого прокрутите вниз и выберите шаблон из доступных вариантов. Просто наведите курсор на шаблон и нажмите Использовать кнопку шаблона .

OptinMonster предложит вам дать название вашей кампании. Введите имя и нажмите кнопку Start Building , чтобы продолжить.

Теперь вы окажетесь на экране конструктора кампаний OptinMonster с загруженным выбранным вами шаблоном.

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

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

На предыдущем шаге мы использовали WPForms для создания простой контактной формы, которая включает поле текстового поля в дополнение к полям имени и электронной почты. Теперь мы можем просто вызвать эту форму для кампании всплывающей формы OptinMonster.

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

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

Теперь мы можем перетащить блок WPForms прямо под заголовок кампании.

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

Щелкните раскрывающийся список Выбор формы на левой панели построителя кампании, который откроет список всех форм, которые вы ранее создали с помощью WPForms. Выберите форму, которую вы хотите встроить во всплывающую кампанию.

Потрясающе! Мы почти закончили создание всплывающей формы WordPress с использованием первого метода.

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

Поскольку OptinMonster использует короткие коды для встраивания форм, созданных с помощью WPForms, вы не можете сразу увидеть предварительный просмотр своей формы в режиме реального времени в рамках кампании всплывающих форм.

Но вы можете просмотреть его прямо перед публикацией. Для этого нажмите кнопку Опубликовать на панели навигации вверху.

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

Теперь OptinMonster будет запускать всплывающую форму WordPress при загрузке страницы. Вот как это выглядит в нашем примере:

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

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

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

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

Вернуться к OptinMonster » Кампании . Найдите только что созданную кампанию и наведите на нее курсор. Затем нажмите на опцию Настройки вывода .

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

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

После изменения правил отображения по своему вкусу обязательно нажмите зеленую кнопку Сохранить изменения справа.

И это все, что вам нужно сделать, чтобы создать кампанию с всплывающими формами WordPress, используя OptinMonster и WPForms!

Перейдем к следующему способу достижения того же результата.

Метод №2: создание всплывающей формы с помощью Popup Maker + WPForms

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

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

Для этого метода мы будем использовать два плагина, полностью встроенных в WordPress: Popup Maker и WPForms.

Вот видео-руководство по этому методу добавления всплывающей формы в WordPress:

Для получения пошаговых письменных инструкций вы можете продолжить чтение ниже:

Установите необходимые плагины всплывающих форм

Для начала вам необходимо установить и активировать 2 плагина.

Во-первых, вам понадобится Popup Maker. Хотите знать, является ли создатель всплывающих окон бесплатным? Да, вы можете использовать бесплатную версию для этого руководства и с WPForms.

Нажмите синюю кнопку загрузки и узнайте, как установить плагин в WordPress.

Далее вам также понадобится плагин WPForms. Вот простое руководство по установке плагина WPForms.

Создайте простую контактную форму

Далее вам нужно создать форму, которую вы хотите поместить во всплывающую форму WordPress. Если вы уже создали контактную форму, вы можете пропустить этот шаг.

Чтобы создать форму, перейдите в WPForms »Добавить новый и выберите шаблон. В этом примере мы будем использовать простую контактную форму. Хорошая идея — упростить работу с всплывающими формами WordPress, чтобы вы могли максимизировать коэффициент конверсии форм.

Как только форма загрузится, в ней будет все необходимое для начала работы, включая:

  • Имя
  • Фамилия
  • Электронная почта
  • Комментарий

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

Когда вы закончите создание формы, вам нужно нажать кнопку «Сохранить», чтобы сохранить изменения. Ваша контактная форма готова к работе!

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

Создание всплывающего окна с помощью Конструктора всплывающих окон

Отлично, ваши плагины установлены и активированы. Далее мы перейдем к плагину Popup Maker, чтобы создать всплывающее окно. Этот бесплатный плагин WordPress позволяет легко создавать всплывающие окна с нуля.

Перейдите на панель инструментов WordPress и перейдите к Popup Maker » Add Popup , и вы увидите экран редактирования всплывающих окон.

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

А теперь пришло время вставить форму во всплывающее окно. Нажмите кнопку «Добавить форму», чтобы выбрать форму.

Появится экран «Вставить форму». Здесь вы можете выбрать форму, которую хотите вставить в это всплывающее окно, выбрав ее в раскрывающемся меню.

После выбора формы нажмите синюю кнопку Добавить форму , чтобы добавить ее во всплывающее окно.

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

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

Триггеры сообщают всплывающему окну, когда его открывать. Нажмите синюю кнопку «Добавить новый триггер» .

В появившемся окне параметров триггера откройте раскрывающийся список и выберите Задержка времени/автоматическое открытие . Это приведет к тому, что всплывающее окно откроется после того, как посетители вашего сайта пробудут на странице определенное время.

Вы можете установить время для чего угодно, но мы рекомендуем начинать с 5 секунд (5000 миллисекунд). Когда будете готовы, нажмите Добавить кнопку для продолжения.

По умолчанию это всплывающее окно будет отображаться на каждой странице вашего веб-сайта WordPress и для всех на всех устройствах. Вы можете настроить эти параметры для таргетинга на определенных людей, устройства, места (например, пост или страницу) и многое другое в разделе «Таргетинг». На самом деле, для более продвинутых настроек ознакомьтесь с документацией Popup Maker.

Теперь давайте украсим внешний вид вашего всплывающего окна, нажав Показать  в настройках всплывающего окна.

В раскрывающемся списке «Тема всплывающего окна» выберите тему всплывающего окна.

Вы можете выбрать любую тему всплывающего окна. Для этого примера мы выбираем популярный стиль Light Box.

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

Публикация всплывающей формы с помощью Popup Maker

Прокрутите страницу вверх и нажмите кнопку Опубликовать , чтобы активировать всплывающую форму WordPress.

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

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

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

Кроме того, если вы настроили Google Analytics на своем веб-сайте, вы можете отслеживать Popup Maker с помощью специального отслеживания событий.

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

Хорошо, все готово. Мы надеемся, что эта статья помогла вам узнать, как создать всплывающее окно контактной формы WordPress в WordPress.

Далее, заставить пользователя отправлять формы

Хотите, чтобы гостевые пользователи могли публиковать сообщения на вашем сайте из внешнего интерфейса? WPForms — лучший плагин для этого! Подробнее см. в нашем руководстве по разрешению отправленных пользователями сообщений в WordPress.

С WPForms можно делать гораздо больше. Например, вы можете создать классную форму выбора даты WordPress, как показано в руководстве.

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

Создайте всплывающую форму WordPress сейчас

Готовы построить свою форму? Начните сегодня с самого простого плагина для создания форм WordPress. WPForms Pro включает множество бесплатных шаблонов и предлагает 14-дневную гарантию возврата денег.

Если эта статья помогла вам, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств и руководств по WordPress.

Всплывающая контактная форма — плагин WordPress

  • Детали
  • отзывов
  • Монтаж
  • Развитие

Поддержка

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

Посетите официальный веб-сайт для живой демонстрации http://www.gopiplus.com/work/2012/05/18/popup-contact-form-wordpress-plugin/

  • Живая демонстрация
  • Дополнительная информация
  • Контакт

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

Преимущество плагина

  • Простота настройки.
  • Представление Ajax.
  • Неблокируемый.

Конфигурация плагина

  • Перетащите виджет
  • Вставьте код php в нужное место шаблона
  • Короткий код для страниц и постов
Переводчики
  • Французский (fr_FR) – Шеннон Мартин
  • Польский (pl_PL) – Абдул Саттар

Установка

Q1) Как изменить/обновить стиль формы?

Q2) Как изменить/обновить проверку клиента формы?

Q3) Как изменить изображение кнопки связаться с нами?

Ответить

Мне нужно больше возможностей для удовлетворения моих потребностей.

я использую всплывающую контактную форму на своем веб-сайте, я проверил свой веб-сайт с помощью https://validator.w3.org/ и получил ошибку в «id», я не мог найти, где это изменить, поскольку я разработчик. у меня есть приложил снимок экрана с этим для справки. http://www.awesomescreenshot.com/image/1682816/74fc219f68e79cf23ecbae0866d608ce

Прочитать 5 отзывов

«Всплывающая контактная форма» — это программа с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

Авторы

  • www.gopiplus.com
  • гопиплюс
1.0

Первая версия

2.0

JavaScript, загруженный с помощью хука wp_enqueue_scripts (вместо хука init)
Вариант короткого кода для страниц и сообщений

3.0

Новая демонстрационная ссылка

4.0

Проверено до версии 3.4.2

4.1

Протестировано до версии 3.5

5.0 9 0081

Протестировано до версии 3.6
Добавлено несколько функций безопасности.

5,1
  1. Испытано до 3,8
  2. Теперь этот плагин поддерживает локализацию (или интернационализацию). то есть возможность перевода на другие языки.
    Файл плагина *.po (popup-contact.po), доступный в папке языков.
5,2
  1. Испытано до версии 3.9
5.3
  1. Капча удалена из плагина. Вместо этого на странице отправки всплывающей контактной формы была добавлена ​​проверка безопасности. С помощью этой новой опции всплывающая контактная форма принимает заявки только с домена вашего веб-сайта. Он просто отклоняет представление, отличное от домена вашего веб-сайта. После обновления плагина деактивируйте и активируйте плагин один раз.
5,4
  1. Испытано до версии 4,0
5,5
  1. Испытано до версии 4.1
5,6
  1. Испытано до версии 4.2.2
5,7
  1. Испытано до 4,3
5,8
  1. Испытано до 4,4
  2. Слаг текстового домена был добавлен для языковых пакетов.
5,9
  1. Испытано до 4,5
  2. Санитизация добавлена ​​ко всем входным значениям.
  3. После отправки формы всплывающее окно будет автоматически закрыто.
6,0
  1. Испытано до версии 4.6
6,1
  1. Испытано до 4,7
6,2
  1. Испытано до 4,8
6,3
  1. Испытано до 4,9
6,4
  1. Испытано до 5,1
6,5
  1. Испытано до 5,2
  2. Добавлена ​​опция удаления. Все ссылки на плагины и таблица плагинов будут очищены во время удаления.
6,6
  1. Проверено до версии 5.3
6,7
  1. Испытано до 5,4
6,8
  1. Испытано до 5,5
6,9
  1. Испытано до 5,7
7,0
  1. Испытано до 5,8
  2. Использовать короткий код плагина в виджете.
7,1
  1. Испытано до 5,9

Мета

  • Версия: 7.

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

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