Contact form 7 всплывающая форма: Contact Form 7 во всплывающем окне

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

Приветствую вас дорогой читатель, меня зовут Юлия Гусарь, я фронтенд разработчик и в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте 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>

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «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;
}

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

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

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

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

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

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

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

Всплывающее окно после успешной отправки формы Contact Form 7

Как в плагине Contact Form 7 сделать всплывающее уведомление об успешной оправке письма? Рассмотрим два бесплатных плагина “Popup for Contact Form 7” и “Popup Message Contact Form 7”.

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

Смотреть видео

• Вступление.
• Popup for Contact Form 7: общие настройки, указываем текст и внешний вид формы.
• Дружит ли “Popup for Contact Form 7” с плагином “Art WooCommerce Order One Click”? – Нет, не дружит!
• Popup Message Contact Form 7: текст, ширина окна и шаблон формы.
• Дружит ли “Popup Message Contact Form 7” с плагином “Art WooCommerce Order One Click”? – Да, дружит!
• Выводы.

Contact Form 7 ★ Всплывающее уведомление об успешной оправке письма

Смотреть это видео на YouTube.
Подпишитесь на канал InwebPress, чтобы узнать больше о создании и настройке сайтов!

Ссылки

Contact Form 7

Popup for Contact Form 7

Popup Message Contact Form 7

Popup for Contact Form 7

Самый простой и быстрый способ реализации данной задачи, является использование плагина Popup for Contact Form 7.

Плагин Popup for Contact Form 7 является бесплатным и устанавливается как все плагины: Админка – Плагины – Добавить новый. В поле поиска вводим название “Popup for Contact Form 7” и после отображения плагина выполняем его установку и активацию.

После активации плагина переходим в его настройки: Contact Form 7 – Popup Settings.

Настройки плагина

Настройки плагина состоят из 3 вкладок с простыми параметрами.

General Settings (Общие настройки)

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

Указываем размеры окна. Не забываем указывать размеры с единицами измерения (px, %).

Указываем продолжительность отображения окна. Например, 5000 – это 5 сек., после которых окно автоматически закроется.

Popup Text (Текст)

Указываем текст и изображение для нашего окна.

Popup Design (Внешний вид окна)

Указываем цвет текста, фоновый цвет или фоновое изображение для окна.

Не забываем сохранять изменения.

Примечание: Эти плагины не работают с плагином By one click WooCommerce.

Как создать всплывающую форму контактов в WordPress

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

Внедрения формы в страницу обычно достаточно, однако что если вы захотите, чтобы форма появлялась во всплывающем окне, когда пользователь кликнет на ссылку Contact Us? Для реализации такого желания необходимо использовать два плагина WordPress одновременно: Easy FancyBox и Contact Form 7.

1. Первым делом устанавливаем плагины Contact Form 7 и Easy FancyBox.

Установка плагина WordPress

2. Для простоты мы будем использовать форму Contact Form 7, уже созданную самим плагином при установке для примера. На странице настроек Contact Form берем код формы, который нужно скопировать и вставить в редактор WordPress для создания формы.

Contact Form 7

3. Создаем новую страницу в WordPress. Для того, чтобы добавить контактную форму вам нужно вставить код, находящийся в квадратных скобках со страницы настроек Contact Form 7, на вашу страницу. Убедитесь, что вставили код корректно, ровно также как его отображает плагин.

Правим страницу в WordPress

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

4. Теперь на вашем WordPress есть контактная форма. Мы решили сделать её всплывающей, в модальном окне после клика пользователем на ссылку. В дело вступает плагин Easy FancyBox. С его помощью можно заставить любой элемент страницы отображаться во всплывашке. Открываем редактирование станицы, кликаем на вкладку ТЕКСТ и добавляем следующий HTML-код:

<a href="#contact_form_pop">Contact Us</a>

<div>
    <div>
        [contact-form 1 "Contact form 1"]
    </div>
</div>

Easy FancyBox HTML

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

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

VN:F [1.9.22_1171]

Rating: 2.7/5 (12 votes cast)

Как сделать всплывающую popup форму contact form 7 на WP

Очень длинный заголовок получился у данной статьи чего я не очень люблю, но именно по такому запросу “Как сделать всплывающую popup форму contact form 7 на wordpress”, а точнее с такой проблемой мне пришлось столкнуться при создании очередного сайта на заказ.

Казалось бы ничего сложного, но в моем случае нельзя было применять плагин “Elementor” и другие конструкторы страниц. Именно поэтому я по привычке установил плагин Contact Form 7, и только потом понял, что он работает по шорткоду в любом месте сайта, но уже в открытом виде, а мне было необходимо запускать форму обратной связи при клике на изображение.

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

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

Для решения этой проблемы, нам необходимо использовать два плагина в связке, это “Contact Form 7” и “Popup maker”.

Преимущества:

• Плагины на русском языке.
• Постоянно обновляются (кстати для CF7 – это не всегда хорошо, ниже по тексту решим и эту проблему).
• Плагины хорошо интегрируются между собой.
• Результат быстрый и удобный.

А теперь, разберем пошагово, как делать попапы (всплывающие окна) с встроенными формами.

Устанавливаем и настраиваем CF7

Сначала устанавливаем плагин Contact Form 7, через раздел “Плагины-Добавить новый” и активируем его, соответствующей кнопкой.

После активации в меню появится новый одноименный раздел, заходим и нажимаем “Добавить новую”, появится стандартная текстовая область с уже заполненными строками. Теперь нам необходимо создать форму обратной связи с нужными нам полями ввода: Имя, Почта, Телефон, Текстовая область или что-то еще.

Удалите все лишнее, оставляя только теги <label></label> и кнопку “submit” – это кнопка для отправки данных. В верхнем меню есть несколько кнопок нас интересуют кнопки нужных нам полей например «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку “Текст”.

Пример создания поля “Имя”:

1. Выбираем кнопку “Текст”;
2. Если обязательно для заполнения то отмечаем галочкой;
3. Уникальный идентификатор, оставляем без изменения;
4. Значение, которое отображается по умолчанию, в нашем случае это “Ваше имя”;
5. Если отметить чекбокс, то название поля будет внутри;
6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления;
7. Нажимаем вставить тег.

Далее помещаем получившийся шорткод между тегами <label>сюда вставляем код</label>, должно получится так:

Тоже самое делаем и с остальными полями, нажимаем “Создать тег” и помещаем получившиеся шорткоды между тегами <label></label>. В итоге у нас должна получиться вот такая форма. В самом верху шаблона я прописал обычный текст и разместил его по центру.

Нажимаем “Сохранить” и далее открываем вкладку “Письмо”.

1. Копируем шорткоды в область “Тело письма”, именно эта информация будет приходить при заполнении формы к вам на почту. Дописал напротив каждой переменной название, чтобы обозначить какая информация будет поступать на почту.
2. В разделе “Кому” указываем емейл, на который получать письма с формы, по умолчанию берется емейл администратора сайта на WordPress. Можете написать любой.
3. Тема отображается, стандартно, когда письмо придёт на почту.
4. Дополнительные заголовки советую стереть, толку от этого нет, а ошибки возникать могут.

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

Шорткод имеет, примерно, следующий вид: [contact-form-7 id=”197″ title=”Название формы”]

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

Теперь нам необходимо перейти к плагину “Popup maker”.

Устанавливается стандартно из админ панели WordPress, вводим в поиске по плагинам “Popup Maker”, устанавливаем и активируем.

Теперь также в левом меню администратора, у нас должен появиться одноименный раздел, нажимаем “Добавить всплывающее окно”. Даем имя всплывающему окну, название можно не прописывать (по-желанию), так как оно будет отображаться на сайте. Помещаем в текстовое поле шорткод скопированный ранее, после создания формы обратной связи.

Далее спускаемся ниже и видим меню настройки всемогущего Popup Maker. Сейчас нас интересует пункт “Триггеры”, открываем вкладку и нажимаем на кнопку “Добавить новый триггер”.

Обычно обратная связь появляется по нажатию кнопки, или как в моем случае, по клики на изображение, поэтому из списка выбираем параметр “Нажмите “Открыть”” и жмем “Добавить”. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.

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

Далее у вас появится новое окно, пропишите в него class, он может быть любым, но обязательно с точкой в начале, я написал .audit. Помним про cookie, для триггера работающего при нажатии куки не нужны, выбираем “Добавить” или “Обновить” если создаете не в первый раз.

Далее, ознакомьтесь с другими вкладками, настройте внешний вид, анимацию и другие параметры появления, на сайте над которым я работал, я выбрал “Центр popup”, а потом зашел в раздел “Отображение-Внешний вид” и нажал “Настроить эту тему” и настроил тему согласно технического задания.

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

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

Тег <img> у вас должен приобрести вид <img class=”alignnone size full wp-image-хх ваш класс” src=”http://вашсайт/wp-content/uploads/2021/01/картинка.png” alt=”” class=”wp-image-xx”/>

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

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

Переходим обратно в “Визуально” и нажимаем предварительный просмотр или кнопку “Опубликовать”. Теперь при нажатии на картинку у вас должна появиться всплывающая форма.

В целом выглядит она не плохо, да стандартно, но нормально ). Вы же всегда можете можете настроить ее внешний вид.

Видео для тех, кому так удобнее воспринимать.

Для этой ели я всегда использую простенький плагин, который носит название “CF7 Customizer”, скачать вы его также можете через раздел “Плагины-Добавить новый”.

После активации плагина, перейдите в раздел “Внешний вид – Настроить”, это стандартная страница настройки вашей темы(шаблона). Там вы найдете вкладку “CF7 Customizer”.

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

Если у вас настроена форма в Popup, то для того чтобы вам был доступен визуальный редактор, создайте страницу или статью, разместите туда шорткод вашей формы, которую вы всегда сможете найти в разделе “Contact Form 7 – Контактные формы”, сохраните и откройте эту страницу/статью для редактирования с помощью данного плагина!

У меня получилась вот такая всплывающая форма.

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

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

А также, заметки ради, оставлю здесь название еще одного плагина стилизации широкого формата с визуальным редактором “Contact Form 7 Styler for Divi“.

Сontact form не отправляет письма

Помните в начале статьи я писал о том, что для “Contact form” не всегда хорошо, что он обновляется. Проблема заключается в том, что после обновления с версии 4.7 на некоторых хостингах возникают проблемы, связанные с отправкой сообщений.

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

Проверьте какая версия Contact Form 7 у вас сейчас установлена. Если у вас стоит версия 4.7 или более ранняя, то этой проблемы у вас быть не должно. А если у вас стоит версия 4.8 и выше, то обратите особое внимание на работу форм на вашем сайте.

Если же у вас на сайте все-таки обнаружилась проблема с отправкой писем с Contact Form 7, то для её решения вам необходимо будет сделать откат плагина до версии 4.7.

Делать мы это будем при помощи специального плагина, который называется WP Rollback.

Все стандартно, переходим в соответствующий раздел ищем плагин, устанавливаем и активируем.

После его установки и активации у вас в разделе “Плагины – Установленные”, возле названия каждого плагина появляется ссылка “Rollback“.

Найдите такую ссылку напротив плагина Contact Form 7 и нажмите на нее. Теперь в списке найдите версию 4.7, выберите ее и в самом низу нажмите на кнопку “Rollback”. Подтвердите действие.

После переустановки плагина, вам необходимо его снова активировать. И теперь проверить работоспособность отправки писем.

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

На этом у меня все. Статья получилось длинной как и само заголовок к ней. Надеюсь что она была для вас полезной и вы нашли здесь ответы на свои вопросы. Комментарии внизу если что ) пишите.

Форма обратной связи wordpress – отличный способ коммуникации с посетителями сайта

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

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

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

Однако данные способы коммуникации связаны с неудобствами, как для посетителей сайта, так и для администратора, поэтому оптимальным решением является именно форма обратной связи wordpress.

WordPress является одной из популярных CMS, в том числе и по причине простоты её настройки. Пользователь может без труда добавлять своему сайту различный функционал посредством специальных расширений — плагинов, которые в данном случае чрезвычайно легко установить и настроить.

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

Вот некоторые:

• Contact Form 7, на примере которого далее будет разобран процесс создания формы обратной связи;
• Ещё один популярный плагин — Contact Form Plugin — он также чрезвычайно прост, легко настраивается и имеет русский язык интерфейса. Его функционал включает возможность выбора получателя сообщения, которым может стать любой пользователь сайта, а также возможность отправления файла в форме;
• SimpleModal Contact Form – ещё одна простая форма обратной связи. Реализована она как всплывающая форма обратной связи wordpress, появляющаяся в модальном окне. Плагин также русифицирован, реализована проверка правильности заполнения полей ввода;
• Usernoise – очень лёгкий плагин, не влияющий на скорость загрузки страницы, при этом ещё и очень красивый. После того, как Usernoise будет установлен, на блоге появится плавающая кнопка, нажатие которой вызывает появление формы для ввода текста. Причём предусматривается выбор типа формы, будь — то вопрос, пожелание или сообщение.

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

В самом верху страницы можно будет увидеть форму поиска, в которую и нужно вбить название плагина «Contact Form 7»:

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

После выполнения данных действий в меню чуть выше вкладки «Плагины» появится новый пункт «Contact Form 7». Перейдём в пункт меню «Добавить новую» во вкладке «Contact Form 7».

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

Сначала нужно будет выбрать заголовок для формы. Назовём её «Связаться с администрацией».

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

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

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

Далее останется только нажать на кнопку «Сохранить» в правом верхнем углу окна и перейти на вкладку «Формы» в меню «Contact Form 7».

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

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

Заметим, что редактор работает в двух режимах: «Визуально» и «Текст». Для вставки кода нужно выбрать второй режим, нажав на кнопку «Текст» над окном редактора.

Перейдя из администраторской панели на главное окно сайта сразу можно убедиться, что в верхнем меню появилась кнопка «Связь с администрацией», нажав на которую пользователь попадает в только что созданную форму обратной связи wordpress:

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

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

Надеюсь, что статья окажется для вас полезной! Удачи!

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

Форма обратной связи – один из важнейших элементов на сайте или блоге на WordPress

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

Что необходимо для создания обратной связи на WordPress?

Обратная связь может быть создана различными способами. Лучшее решение – с помощью плагина. Самыми востребованными являются:

• Contact Form 7;
• Usernoise;
• SimpleModal Contact Form;
• Custom Contact Forms;
• Slick Contact Forms.

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

Contact Form 7 – быстрая контактная связь и простота настроек

Плагин CF 7 дает возможность легко и просто создавать и настраивать обратную связь. Он очень легкий, совершенно не грузит сайт, а также считается самым простым в настройке. Многие выбирают именно его, работая с ВордПресс. Contact Form полностью русифицирован, что весьма удобно, и имеет интуитивно понятные настройки, разобраться с которыми очень легко. При этом, он полностью бесплатный и гибкий. Есть как простая установка – для всех, кому нравится простота, так и много глубины и сложности – для всех, кто любит углубиться. Поддерживает самые различные формы в окне, отправку через AJAX, интеграцию с Akismet, загрузку файлов, а также оснащен защитой от спама с помощью капчи и текстового вопроса. Многие признали его одним из лучших плагинов для системы управления контентом. CF 7 позволяет создавать на сайте на WordPress самые разнообразные сложные формы. В списке сразу же отображаются шорткоды, необходимые для вставки на страницу.

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

Usernoise имеет весьма широкий функционал, позволяя сделать красивую и простую в понимании всплывающую форму в окне. Но есть некоторый минус – полная часть его возможностей представлена в платной версии. Однако многим достаточно функций, которые представлены в бесплатном варианте. По умолчанию Usernoise для WordPress уже настроен как нужно, все что нужно – просто его включить. Дальнейшие настройки, по желанию владельца сайта, осуществляются тоже незатруднительно. Можно изменять расположение кнопки, изменить ее цвет и фон текста, добавить иконку к кнопке, поменять шрифт и поменять стандартные надписи. Все это легко настраивается из админки. С его помощью кнопка станет уникальной. Плагин полностью русифицирован, что максимально облегчает работу с ним. Идеально подходит для блогов. Usernoise поддерживается практически всеми знаменитыми браузерами – Opera, Firefox, Safari, IE7 (от 7 версии). Главным преимуществом данного плагина является его высокая производительность, он не оказывает влияния на скорость загрузки.

SimpleModal Contact Form – быстрая всплывающая форма в модальном окне

SimpleModal Contact Form (SMCF) представляет собой обратную связь, которая интегрирована в модальное всплывающее окно. Работает на WordPress при помощи jQuery. Плагин русскоязычный, благодаря Николаю Мясникову и другим «народным умельцам», принимающим участие в его русификации. Перевод на русский язык выполнен максимально грамотно, учитываются все малейшие детали. Всплывающее окно, которое выводит SMCF внешне напоминает окно плагина Lightbox. Это очень удобная вещь для всех, кто хочет дать возможность пользователям написать письмо, просто во всплывающем окне где угодно – в конце поста, на отдельной странице либо в Сайдбаре. Все работает очень быстро и удобно. Установка осуществляется самым традиционным способом. Также обратная форма проверяет правильность заполнения полей ввода. В опциях есть возможность сделать автоматическую подстановку заголовка страницы в теме письма, что является довольно весомым достоинством, когда он используется для заказа к описанию товаров. Тема письма позволит сразу увидеть какой товар заказан.

Custom Contact Forms – обратные формы любой сложности

Плагин Custom Contact Forms (CCF) очень популярен на сегодня. С его помощью можно сделать формы любой сложности на WordPress. Но, стоит отметить, что CCF не имеет русской локализации. Хотя это не играет особой роли, поскольку разобраться в нем проще простого, даже тем, кто не знает английский язык. Созданные формы вставляются в любые страницы, материалы и отдельные записи. Для создания простой формы не нужно копаться в настройках, все, что потребуется – вписать код [customcontactform=1] в любую статью, а дальше уже все делается автоматически. Есть также специальный виджет, который можно вставить в боковую панель, либо же в любые иные места на сайте, отведенные под виджеты. Никаких особых знаний CSS для настройки при этом не требуется, а настраивается практически любой аспект: цвета, размеры, границы, отступы. Управление стилями осуществляется прямо в админке WordPress, там же, где настраиваются все поля ввода значений. Работает на современных технологиях Ajax и jQuery.

Slick Contact Forms – простое добавление нескольких обратных связей

Плагин для ВордПресс Slick Contact Forms создает виджет, который может быть применен для добавления нескольких форм контакта на странице. С ним обратную можно сделать плавающей, выпадающей и выезжающей. Появляется при клике по ссылке в виде раскрывающейся панели. Вид очень аккуратный и красивый. Вставлять ее в блог достаточно просто, особенно если использовать виджет. Виджет уже содержит все необходимые параметры и настройки – скорость разворачивания и сворачивания, ширину, общее название и название полей, количество полей, положение на экране, обратный электронный адрес, расположение текстовых полей. Есть также несколько вариантов оформления. Можно сделать и с использованием шорткода, но это уже сложнее. Это один из самых дружественных и надежных инструментов WordPress.

Все плагины, перечисленные выше, заслуживают внимания и имеют свои достоинства. Однако выбор будет зависеть от личных предпочтений. Например, если необходимо встроить обратную связь в страницу, то лучше выбирать первые плагины, в частности Contact Form 7. Если же всплывающие окна больше нравятся – лучше остановить выбор на SMCF и Usernoise.

Плагин Easy FancyBox — всплывающие окна обратной связи

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

Зачем это нужно?

Ну во первых — надо помнить — юсер ленив. Сайты с хорошим юсабилити всегда получат больше клиентов. А причем тут Easy FancyBox и

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

Как это работает — создается форма связи в Contact Form 7, берем картинку и делаем картинку ссылкой на форму связи

1
2
3
4

<a href="#contact_form_pop1"><img src="адрес картинки" alt="" /></a>
<div>
<div></div>
</div>

<a href=»#contact_form_pop1″><img src=»адрес картинки» alt=»» /></a>
<div>
<div></div>
</div>

При этом на одной странице можно несколько раз использовать Easy FancyBox, только для каждой формы надо указать свой порядковый номер — пример

contact_form_pop1

тут стоит 1, следовательно, когда мы будем вставлять второе всплывающее окно при помощи плагина FancyBox, то нужно поставить 2 без пробелов. Обратите внимание — номер указывается в двух местах кода

Но тут я захотел поставить Easy FancyBox на кнопку, которая по мимо вывода форма связи еще должна изменять вид при наведении курсора мышки. Ну реализовать всплывающее окно и создать «активность» кнопки по отдельности — это не сложно и уже делал. нарисовал кнопки с эффектом и без, поставил в код на место картинки примерно следующее

<img 

src="cooltext120652803868648.png" 

onmouseout="this.src='cooltext120652803868648.png';" />

не могу сказать, что пошло не так, при обновлении страницы картинки кнопок выкидывало из тега <a> и переставало работать все — и окно FancyBox не всплывало и код кнопок менялся на одиночную картинку. После нескольких попыток найти ошибку в коде — плюнул и решил использовать обычный css для изменения кнопки при наведении

.blok1 {position: relative; cursor:pointer; display: inline-block; border: 0px; margin-top: -30px;}
.blok1 img + img {position:absolute; left: 0px; top: 0px; z-index:100; display: none;  width: 100%;}
.blok1:hover img + img {display: block;}

ну и естественно для вставки на страницу

<div><a 

href="#contact_form_pop1"><img src="адрес1" alt="" /><img src="адрес2" alt="" /></a></div>
<div>
<div>[contact-form-7 404 "Not Found"]</div>
</div>

WPB Popup for Contact Form 7 — плагин WordPress

Описание

Всплывающее окно для контактной формы 7 может отображать красивое всплывающее окно формы контактной формы 7 . Всплывающая форма появится при нажатии кнопки.

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

Можно добавить кнопку всплывающего окна в любом месте вашего сайта, используя его Custom ShortCode .

Для формы используется самый популярный плагин Contact Form 7 . Вы можете установить разные формы для разных всплывающих кнопок. И покажите разные всплывающие кнопки в разных местах сайта.

Текст кнопки, цвет, размер все можно изменить в настройках плагина. У него есть опции для WooCommerce, кнопка может отображаться на странице продукта.

Купить версию PRO | ДЕМО | Поддержка | Документация

Всплывающее окно для контактной формы 7 Основные характеристики

• Всплывающая кнопка для формы Contact Form 7.
• Показать кнопку, используя ShortCode, функцию PHP и обработчик действия.
• Показывать разные всплывающие кнопки на разных страницах с разными формами.
• Расширенные настройки для настройки стиля кнопок и всплывающих окон.
• Очень проста в использовании.
• RTL и поддержка нескольких языков.

Основные характеристики Premium

• Всплывающие кнопки для форм Contact Form 7.
• Показать кнопки с помощью коротких кодов и хуков действий.
• Показывать разные всплывающие кнопки в разных местах с разными формами.
• Расширенные настройки для настройки стиля кнопок и всплывающих окон.
• Виджет Elementor для удобного использования с конструктором страниц Elementor.
• Расширенный генератор всплывающих кнопок для добавления нескольких различных настраиваемых всплывающих кнопок.
• Всплывающие кнопки могут отображаться для любых обработчиков действий.
• Красивый дизайн для форм, отображаемых во всплывающем окне.
• RTL Поддержка и мобильная адаптация.

Поддержка и документация:

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

Скриншоты

• Всплывающее окно для контактной формы 7.
• Всплывающая кнопка.
• Короткий код всплывающей кнопки.
• Настройки

Установка

• Установите его как обычный плагин WordPress.
• Для этого плагина требуется плагин Contact Form 7. Поэтому, если у вас не установлен плагин Contact Form 7, убедитесь, что вы также установили этот плагин.
• После установки плагина активируйте его. Затем перейдите в Личный кабинет> Контакт> Всплывающее окно. Настройте параметры плагина и сохраните настройки.
• После установки плагина следуйте нашей пошаговой онлайн-документации.

FAQ

Это работает с темой, которую я использую?

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

Обзоры

Для этого плагина нет обзоров.

Авторы и разработчики

«WPB Popup for Contact Form 7» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

История изменений

Версия 1.0

Версия 1.1

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

Версия 1.2

• Исправлена ​​проблема выбора контактной формы в настройках.

Версия 1.3

• Протестировано с плагином Contact Form 7 новой версии 5.4

Версия 1.3.1

• Выпущена премиум версия.

Версия 1.3.2

• Добавлен список функций премиум-версии.

Версия 1.3.3

Slick Popup: Contact Form 7 Popup Plugin — плагин WordPress

Описание

Лучший плагин WordPress Popup для Contact Form 7

Наш плагин WordPress Popup поможет вам создать красивых и отзывчивых всплывающих окон с любой формой Contact Form 7 . Простая настройка в соответствии с вашей темой .

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

[Ознакомьтесь с демонстрацией] [Демо версии Pro]

Примечание. Плагин Contact Form 7 должен быть установлен и настроен для использования Slick Popup Lite.

Особенности плагина:

• Создать всплывающее окно для любой формы Contact Form 7 form
• Использовать разные всплывающие окна для разных страниц
• 5 готовых цветовых схем для всплывающих окон
• Импорт в один клик для демонстрационных форм
• Варианты стиля для боковой кнопки
• Параметры стиля для кнопки отправки

Другие преимущества:

• Slick and Beautiful : Общая привлекательность всплывающего окна довольно гладкое и красивое .
• Несколько цветовых схем : 6 встроенных цветовых схем для легкого выбора
• 100% отзывчивый : всплывающее окно отлично реагирует на все размеры экрана и хорошо работает на всех устройствах.
• Легкий и быстрый : Качество кода отличное, что делает его очень легким и молниеносным .
• Простота настройки : Параметры простой настройки делает его последним выбором после того, как вы попробуете.
• Удобство для пользователя : при загрузке пользователь обнаруживает, что очень легко заполнить форму. , и количество запросов увеличивается на .
• Совместимость с браузером : * Тщательно протестировано со всеми основными браузерами * и их широко используемыми версиями.

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

Что еще ?:

Премиум-версия — Slick Popup Pro имеет дополнительные возможности:

• Несколько режимов активации — Автоматическое всплывающее окно, всплывающее окно при прокрутке, всплывающее окно при входе
• 25+ анимационных эффектов
• 5 предустановленных макетов
• Несколько всплывающих окон на одной странице

Посмотреть на CodeCanyon

Установка

Самый быстрый способ установить плагин Slick Popup Lite:

1. Посетите плагины -> Добавить новый на панели инструментов WordPress
2. Искать «Slick Popup»
3. Нажмите «Установить сейчас»
4. Наконец, нажмите «Активировать плагин».

Если вы поклонник WordPress и предпочитаете делать что-то вручную, следуйте этим инструкциям:

1. Загрузите папку slick-popup в каталог / wp-content / plugins /
2. Активируйте плагин через меню «Плагины» в WordPress.
3. Измените настройки на странице параметров панели инструментов «Slick Popup»

FAQ

Как показать всплывающее окно с кнопкой или ссылкой?

Используйте class = ’splite-showpopup’ в элементе, чтобы сделать его дескриптором для отображения всплывающего окна.

Могу ли я создать несколько всплывающих окон на одной странице?

Нет, в бесплатной версии этих функций нет. Пожалуйста, посмотрите демонстрационную версию этой функции.

Всплывающие окна выглядят одинаково во всех темах?

Мы пытались подготовить код HTML / CSS для работы независимо от темы, но если у вас возникли проблемы на вашем веб-сайте, свяжитесь с нами для получения помощи. Почта: [email protected]

Какая версия WordPress мне нужна?

Плагин будет работать в WP 3.2+. Однако мы рекомендуем использовать последнюю версию.

Как изменить внешний вид всплывающего окна?

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

Можно ли включить всплывающее окно только для выбранной страницы?

Да, вы можете сделать это в настройках плагина, просто проверьте параметры «Где показывать» в настройках. Плагин создает конфликты JS в моей теме.

Я сомневаюсь, что мне делать?

При возникновении любых сомнений или вопросов, пожалуйста, прочтите наш раздел F.A.Q. Если это не поможет, вы можете связаться со службой поддержки по адресу [email protected]

.

Авторы и разработчики

«Slick Popup: Contact Form 7 Popup Plugin» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

История изменений

1,7.11

• Исправлено: проблема с пролистыванием экрана

1.7.10

• Исправлено: проблема прокрутки тела
• Исправлено: Расчетная ширина для ввода

1,7,9

• Удалить файлы V3 Redux-Framework и обновить до V4

1,7,8

1,7,7

1,7,4

• Фреймворк Codestar удален из-за проблем с совместимостью

1.7.3

• Добавлено: Bootstrap JS и CSS в активах плагина
• Добавлено: jQuery jQuery v3.3.1 в ресурсах плагина (требуется для вкладок на странице поддержки)
• Обновлено: библиотека Redux и TGM

1.7.2

• Удалено: разрешить доступ из соображений безопасности
• Прочие мелкие улучшения

1.7.1

• Протестировано и работает с WordPress 5.2
• Исправлены мелкие проблемы с намерением выхода
• Исправлены мелкие ошибки

1,7,0

• Улучшена скорость загрузки страниц меню в плагине
• Новые изображения для страницы импорта
• Исправлены мелкие ошибки
• Изменения в файле Readme

1.6,7

• Исправлены мелкие ошибки
• Изменения в файле Readme

1.6.6

• Улучшено: Меню с добавлением подсказок.
• Добавлено: Страница справки и поддержки.
• Протестировано и работает с WordPress 5.1
• Мелкие исправления ошибок

1.6.5

• Улучшено: Меню с добавлением подсказок.
• Добавлено: Перенаправление после закрытия.
• Добавлено: Автоматическое закрытие после успешной отправки формы.
• Протестировано и работает с WordPress 5.0,3
• Мелкие исправления ошибок

1.6.4

• Протестировано и работает с WordPress 5.0.1
• Мелкие исправления ошибок

1.6.3

• Добавлено: Внешний селектор
• Мелкие исправления ошибок

1.6.2

• Улучшено: гладкое всплывающее меню
• Мелкие исправления ошибок

1.6.1

1.6.0

• Улучшено: всплывающее окно удаления
• Улучшено: Импорт демонстраций
• Добавлено: поддержка фонового изображения
• Добавлено: переменная высота и ширина всплывающего окна
• Добавлено: уведомления администратора
• Мелкие исправления ошибок

1.5,2

1.5.1

1.5.0

• Импорт форм для попапа
• Удаление электронной почты удалено

1.4.4

1.4.3

• Pro Добавлена ​​функция
• Выберите определенные страницы для скрытия / отображения всплывающего окна

1.4.2

• Незначительное исправление в опциях плагина

1.4.1

• Протестировано с WP 4.7 и CF7 4.6
• Ajax Loader обновлен для совместимости с CF7 4.6

1.4,0

• Добавлено: Функции анимации (5 анимаций)
• Добавлено: Параметры для изменения стилей «Фон формы»
• Добавлено: Опции для изменения стилей «Боковой кнопки»
• Добавлено: Параметры для изменения стилей кнопки «Отправить»
• Добавлено: раздел «Импорт демонстраций» добавлен в панель опций
• Добавлено: 2 готовые формы обратной связи 7 для импорта
• Улучшено: сообщения об ошибках (not-valid-tip) контактной формы 7
• Улучшено: Возможность создания одноцветных всплывающих окон
• Улучшено: Ajax Loader всплывающего окна

1.3,6

• Ошибка: исправлена ​​проблема с положением боковой кнопки с дополнительным интервалом

1,3,5

Ошибка: исправлена ​​проблема с положением боковой кнопки «слева» (по сообщениям пользователей)

1.3.4

• Ошибка: исправлена ​​ошибка переопределения панели параметров

1.3.3

• Ошибка: Исправлена ​​ошибка при обновлении плагина

1.3.2

• Ошибка: исправлена ​​для уведомления администратора, когда контактная форма 7 неактивна

1.3.1

1.3

• Основной выпуск: Полностью изменен плагин на более современный
• Структура кода сильно изменена и улучшена

1.2.6.2

• Обновлено: теги и протестированная версия WordPress

1.2.6.1

• Исправлено: текстовый центр кнопки отправки формы

1.2.6

• Исправлено: Внешний селектор для активации всплывающего окна имел ошибку типа.

1,2,5

• Добавлено: Внешний селектор для активации всплывающего окна.Селектор по умолчанию: .popup-activator

1.2.4

• Добавлено: Уведомление о плагине Slick Popup в параметрах плагина

1.2.3

• Фиксированное расположение z-индекса боковой кнопки

1.2.2

• Лучшая палитра цветов в опциях плагина.
• Номер версии в заголовке плагина на странице настроек.

1.2.1

• Опция боковой кнопки: добавлен текст «Свяжитесь с нами»

1.2.0

1.2,0

• Боковая кнопка Улучшена для использования текста, а не изображений
• Положение боковой кнопки слева на небольших экранах

1,0

• Страница улучшенных опций
• Несколько других тестов и импровизаций

0,1

• Первая загрузка в WordPress

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

Хотите создать всплывающее окно с контактной формой 7, чтобы посетители вашего сайта могли легче связываться с вами?

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

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

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

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

Зачем создавать всплывающее окно с контактной формой 7?

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

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

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

Как заставить клиентов заполнить вашу контактную форму, прежде чем вернуться в Google, изучить свой вопрос и перейти на страницу конкурента?

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

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

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

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

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

Есть много способов, но лучшее решение — использовать OptinMonster:

OptinMonster — программное обеспечение №1 в мире для привлечения потенциальных клиентов на рынке. Мы не только упрощаем создание потрясающих и целенаправленных всплывающих окон за считанные минуты, но также упрощаем встраивание форм из самых популярных плагинов для построения форм.

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

Это всплывающее окно было создано менее чем за 10 минут и станет отличным дополнением к любому сайту WordPress.

Готовы начать? Давайте нырнем.

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

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

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

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

Шаг 1. Выберите тип кампании и шаблон

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

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

Пришло время выбрать шаблон:

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

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

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

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

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

Когда вы выбрали правильный шаблон кампании для своего сайта, вам нужно будет назвать свою кампанию, назначить ее своему веб-сайту и нажать Начать создание :

Тогда вы будете готовы разработать свою кампанию.

Шаг 2. Вставьте контактную форму 7 в свое всплывающее окно

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

Сделать это просто. Нажмите + Добавить блоки вверху меню редактора:

Затем найдите блок < HTML> и перетащите его в шаблон кампании:

Затем перейдите в панель управления WordPress, чтобы получить встраиваемый шорткод Contact Form 7. Щелкните плагин Contact Form 7 (обозначенный Contact ) в WordPress, чтобы открыть список форм.

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

Вернитесь в редактор OptinMonster и щелкните блок HTML, который вы только что добавили в свой шаблон.Это приведет к появлению инструментов редактирования с левой стороны. Вставьте шорткод контактной формы 7 в блок HTML:

Обратите внимание, что шорткод появится в вашем редакторе, а не в контактной форме:

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

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

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

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

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

Вот всплывающее окно контактной формы 7, которое мы разработали для сегодняшней демонстрации:

Он простой, элегантный и очень эффективный.

Одна вещь, которую вы, возможно, захотите сделать, — это добавить немного CSS в вашу контактную форму во всплывающем окне. Это может сделать форму более привлекательной во всплывающем окне.

Если вы не знаете CSS, не беспокойтесь. Вот код, который мы использовали в сегодняшней демонстрации для стилизации нашей формы:

Вы можете вставить это с помощью специальной функции CSS OptinMonster. В главном меню редактирования нажмите Optin Settings »Custom CSS :

.

Затем скопируйте и вставьте приведенный выше код CSS, чтобы оформить форму:

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

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

Для этого перейдите в панель управления WordPress и нажмите OptinMonster »Кампании . Затем нажмите Обновить кампании :

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

Шаг 3. Установите правила отображения

По умолчанию OptinMonster имеет два правила отображения для каждой кампании:

• Время на странице 5 секунд
• Всплывающее окно появится на любой странице вашего сайта

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

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

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

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

Вот как это настроить. Сначала перейдите к Display Rules в верхней части редактора OptinMonster:

Затем щелкните первое правило по умолчанию, чтобы открыть параметры правила отображения:

Найдите в строке поиска MonsterLinks ™.Когда оно появится в меню, нажмите на правило:

Затем нажмите Копировать код MonsterLink ™ :

Теперь у вас есть встраиваемая ссылка на всплывающее окно контактной формы. Он представлен в виде HTML:

Подпишитесь сейчас!

Но для многих конструкторов страниц, используемых с WordPress, вам не нужен HTML для вставки ссылки на кнопку или текст.Вместо этого вам нужен только URL-адрес. Вы можете просто скопировать URL-адрес из фрагмента кода выше (URL-адрес начинается с https: // ):

https://app.monstercampaigns.com/c/nujmnl2abxowuv1faou6/

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

Все, что осталось — опубликовать свою кампанию.

Шаг 4. Опубликуйте всплывающее окно контактной формы

Последний шаг — опубликовать вашу кампанию.Для этого нажмите Опубликовать вверху меню редактора:

Затем измените статус кампании с Черновик на Опубликовать :

И все!

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

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

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

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

Готовы начать? Подпишитесь на OptinMonster сегодня!

Опубликовано Натан Томпсон

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

Как создать контактную форму PopUp?

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

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

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

Нужна помощь в настройке вашего сайта WordPress?
WHSR теперь является партнером Codeable.io, чтобы помочь пользователям, которым нужны профессиональные услуги по разработке / настройке WP.

Чтобы получить бесплатное предложение, заполните эту форму запроса.

Контактные формы необходимы

Я писатель-фрилансер, я начал писать, когда был второкурсником в колледже. В первый раз, когда я получил работу, мне пришлось подать заявку как минимум на 50 вакансий на Elance. Это был ад. Вскоре после этого один из моих друзей, который знал о моем фрилансе, предложил мне работу писателем в BlogVault, провайдере резервного копирования WordPress.

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

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

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

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

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

Плагин Get A Good Contact Form — Контактная форма 7

1.Установите и активируйте плагин (ссылка ниже).

2. В панели администратора WordPress откройте «Контакт»> «Добавить». Настройте сообщение, которое вы хотите передать посетителю, в соответствии с требованиями.

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

Подробнее и загрузки

Popup Maker

На мой взгляд, плагин для создания всплывающих окон — это Popup Maker.

1. Установите и активируйте плагин (ссылка ниже).

2. Откройте Popup Maker> Добавить новый.

3. Создайте новое всплывающее окно и вставьте шорткод, который вы ранее скопировали из контактной формы 7.

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

Одна функция, которая мне очень нравится в Popup Maker, — это возможность использовать файлы cookie. Если вы выберете опцию в разделе «Настройки автоматического открытия», то откроются следующие параметры.

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

И, наконец, вы получаете всплывающую контактную форму.

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

Подробнее и загрузки

Умная комбинация

Эта комбинация плагинов (контактная форма 7 + Popup Maker) должна вам очень пригодиться.

Я дам вам два альтернативных варианта всплывающих плагинов, если они вам когда-нибудь понадобятся. Popups и PopUp от Supsystic — очень хорошие плагины для создания всплывающих окон.

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

Ваши мысли всегда приветствуются в комментариях.

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

Вы ищете простой способ показать всплывающее окно контактной формы на своем веб-сайте WordPress?

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

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

Зачем нужно всплывающее окно контактной формы?

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

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

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

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

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

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

Как создать контактную форму WordPress

Во-первых, вам нужно выбрать плагин для контактной формы WordPress.

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

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

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

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

Для начала вам необходимо установить и активировать плагин WPForms Lite. Если вам нужна помощь, ознакомьтесь с нашим пошаговым руководством по установке плагина WordPress.

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

После этого WPForms попросит вас ввести имя для вашей формы и выбрать шаблон. Идите вперед и выберите шаблон «Простая контактная форма».

Затем вы можете добавить поля в форму с помощью конструктора перетаскивания.

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

WPForms также позволяет настраивать каждое поле в контактной форме.

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

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

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

Далее вы можете перейти к параметру «Настройки уведомлений».По умолчанию уведомления отправляются на адрес электронной почты администратора, настроенный на вашем веб-сайте WordPress.

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

В строке темы электронного письма WPForms использует имя формы, которое вы ввели ранее. Однако вы можете отредактировать текст строки темы по своему усмотрению.

После этого нажмите кнопку «Подтверждения».

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

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

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

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

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

Добавьте всплывающее окно контактной формы на свой сайт WordPress

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

Мы рекомендуем использовать OptinMonster, так как это лучший плагин для генерации лидов и оптимизации конверсии для WordPress.Более 1,2 миллиона веб-сайтов используют этот мощный инструмент.

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

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

Затем установите и активируйте бесплатный плагин OptinMonster на своем веб-сайте. Для получения более подробной информации следуйте нашему руководству по установке плагина WordPress.

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

Для этого просто перейдите в OptinMonster »Настройки на панели инструментов WordPress и нажмите кнопку« Подключить существующую учетную запись ».

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

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

Вы можете начать с перехода на OptinMonster »Кампании и затем нажать кнопку« Создать свою первую кампанию ».

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

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

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

Затем введите название своей кампании и нажмите кнопку «Начать строительство».

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

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

После этого вам нужно будет ввести шорткод контактной формы WPForms в свой блок HTML.

Чтобы найти код, вернитесь к настройкам внедрения WPForms и скопируйте шорткод.

Теперь введите скопированный шорткод в свой блок HTML в OptinMonster, где написано «Добавьте сюда HTML».

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

Это нормально, и ваша контактная форма появится после публикации кампании.

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

По умолчанию OptinMonster устанавливает его, когда время на странице составляет 5 секунд, и всплывающее окно будет появляться на любой странице.

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

Мы предлагаем использовать таргетинг MonsterLink (по клику). Таким образом, ваше всплывающее окно появится, когда посетитель щелкнет ссылку или кнопку.

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

Ваш код MonsterLink в HTML будет выглядеть так:

 Подпишитесь сейчас! 
 

Однако, чтобы встроить ссылку в сообщение или страницу блога WordPress, вам просто нужен URL-адрес из кода.

https: //app.monstercampaigns.com / c / ep6f5qtakxauowbj8097 / 

Например, вы хотите добавить на свой сайт кнопку «Связаться с нами». Вы можете начать с редактирования любой страницы или сообщения и перейти в редактор WordPress. Затем нажмите значок плюса (+) вверху и добавьте блок «Кнопки».

После этого введите текст для кнопки и щелкните значок ссылки. Теперь добавьте URL-адрес MonsterLink к вашей кнопке.

Как только вы это сделаете, опубликуйте свой пост или страницу WordPress. Теперь ссылка MonsterLink будет добавлена ​​к вашей кнопке «Связаться с нами».

Затем вернитесь в свою кампанию OptinMonster, чтобы завершить настройку.

После выбора MonsterLink в качестве таргетинга и отображения его на любой странице вы можете нажать кнопку «Далее» внизу.

На следующем экране вы увидите параметры для изменения типа просмотра кампании, добавления анимации MonsterEffect и воспроизведения звука при появлении всплывающего окна. Продолжайте и нажмите кнопку «Далее», когда вас устраивают настройки.

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

Теперь вы готовы запустить свою кампанию и опубликовать всплывающее окно контактной формы. Для этого перейдите на вкладку «Опубликовать» вверху.

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

Если вас устраивает внешний вид вашей кампании, измените «Статус публикации» с «Черновик» на «Опубликовать».

Вы можете выйти из конструктора кампаний OptinMonster и проверить статус своей кампании также на панели инструментов WordPress.

Просто зайдите на OptinMonster »Campaigns и в столбце« Статус »всплывающей кампании вашей контактной формы должно быть указано« Опубликовано ».

Затем перейдите к кнопке «Связаться с нами», которую вы создали ранее с помощью MonsterLink, и просмотрите всплывающее окно контактной формы в действии.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

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

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

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

Во-первых, я покажу вам, как это сделать, используя комбинацию 100% free , состоящую из всплывающего модуля и модуля формы. Затем я также покажу вам, как это можно сделать с помощью одного плагина с платной версией Elementor (Elementor Pro).

Итак — два способа открыть контактную форму во всплывающем окне на WordPress, начиная сейчас…

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

Вот пример того, что вы будете создавать с помощью этого метода:

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

Для реализации этой функции вам понадобятся два бесплатных плагина:

• Popup Maker — этот плагин позволяет создавать всплывающее окно, в котором находится ваша контактная форма, и запускать это всплывающее окно, когда пользователь нажимает кнопку.
• WPForms ( или ваш предпочтительный плагин контактной формы ) — в этом руководстве я буду использовать WPForms для создания контактной формы, которая будет отображаться во всплывающем окне. Однако вы должны иметь возможность использовать любой плагин контактной формы, который позволяет вставлять формы с помощью шорткода.

Продолжайте, установите и активируйте оба плагина. Тогда вот как все настроить…

Шаг 1. Создайте контактную форму

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

Продолжение статьи ниже

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

Закончив работу с формой, нажмите кнопку Embed и скопируйте шорткод формы, потому что он понадобится вам на следующем шаге:

Шаг 2. Создайте всплывающее окно

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

Для этого перейдите в Popup Maker → Добавить всплывающее окно .

Затем вставьте код для вставки вашей контактной формы в текстовый редактор:

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

Однако единственное абсолютное требование здесь — это добавить код встраивания вашей формы в текстовый редактор. Изменение любых других настроек необязательно.

Продолжение статьи ниже

Когда вы закончите, убедитесь, что Publish ваше всплывающее окно.

Шаг 3. Создание кнопки для открытия всплывающего окна

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

Чтобы кнопка открывала контактную форму, вам нужно добавить очень специфический класс CSS.

Вот пример кнопки HTML:

Свяжитесь с нами!

Чтобы найти этот класс CSS — popmake-contact-form в моем примере — перейдите в Popup Maker → All Popups и посмотрите на столбец CSS Classes :

Затем перейдите к сообщению или странице, где вы хотите добавить кнопку.

Если вы используете новый редактор блоков Gutenberg, вы можете добавить HTML в блок Custom HTML . Или, если вы используете классический редактор, вы можете использовать вкладку Текст :

Продолжение статьи ниже

И все! После того, как вы опубликуете страницу, ваши посетители смогут нажать на кнопку, чтобы открыть контактную форму:

Как автоматически открывать всплывающее окно (вместо нажатия кнопки)

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

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

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

Как открыть контактную форму во всплывающем окне на WordPress с помощью Elementor Pro

Вот пример того, что вы будете создавать с помощью этого метода:

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

Elementor Pro стоит 49 долларов, но в результате использования этого метода у вас будет гораздо больше гибкости в том, как ваше всплывающее окно и форма выглядят и функционируют.

Вот как использовать эту функцию в Elementor Pro.

Шаг 1. Создайте всплывающее окно

После того, как вы установили и активировали как Elementor, так и Elementor Pro, вы можете начать работу, перейдя в Templates → Popups → Add New Popup :

Затем дайте вашему всплывающему окну имя и нажмите Create Template :

Откроется набор готовых шаблонов всплывающих окон.

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

Шаг 2. Настройте форму

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

Этот виджет позволит вам добавлять и изменять поля для сбора необходимой информации:

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

Шаг 3. Публикация всплывающего окна

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

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

Однако в этом руководстве я сосредоточусь на том, чтобы показать вам, как открывать форму, когда пользователь нажимает кнопку. Для этого подхода к запуску кнопки вам не нужно устанавливать какие-либо триггеры или условия — просто нажмите кнопку Сохранить и закрыть :

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

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

Добавьте обычный виджет Button .Затем выберите Dynamic для ссылки на виджет кнопки. В раскрывающемся списке Dynamic выберите опцию Actions> Popup :

Затем щелкните всплывающее окно , чтобы изменить его настройки:

• Действие — «Открыть всплывающее окно»
• Popup — выберите только что созданное всплывающее окно

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

И все! Должно получиться так:

Есть вопросы?

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

Есть вопросы о том, как реализовать эти методы? Дайте нам знать в комментариях, и мы постараемся помочь!

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

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

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

В этом уроке я покажу, как использовать плагин контактной формы WordPress, а также всплывающий инструмент.Хотя есть несколько способов создания всплывающих контактных форм, я собираюсь рассмотреть бесплатный метод с использованием Popup Maker и Ninja Forms.

Использование Ninja Forms

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

Перейдите в область «Плагины» и нажмите «Добавить».”

Установите и активируйте плагин« Ninja Forms ». Вы можете найти его, используя поле поиска в правой части экрана.

Ninja Forms может перенаправить вас прямо на свою панель управления. Если нет, вы можете выбрать опцию «Формы ниндзя» в левом столбце администратора.

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

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

Как видите, Ninja Forms содержит множество дополнений, которые можно перетаскивать прямо в форму. Допустим, нам нужна отметка даты сообщения. Перетащите поле «Дата» в форму.

Теперь щелкните поле даты, чтобы открыть его свойства справа.

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

Нажмите кнопку «Опубликовать» в правом верхнем углу, чтобы сделать форму активной.

Через некоторое время Ninja Forms покажет неактивную кнопку публикации. Щелкните значок «X» в правом верхнем углу, чтобы закрыть редактор.

Теперь у нас есть идеальная форма для связи. Ninja Form предоставляет шорткод для добавления формы к любому сообщению или странице на вашем веб-сайте. Скопируйте и вставьте этот код, чтобы разместить форму.

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

Использование Popup Maker

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

Откроется новое окно с функциями безопасности. Нажмите кнопку «Пропустить». Вы всегда можете установить плагины безопасности позже.

Появится панель управления Popup Maker с пустым списком всплывающих окон. Если вам понадобится доступ к ним в будущем, они будут именно здесь.

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

Введите новое всплывающее имя для функции. В этом уроке я выберу «Связаться со мной».

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

Щелкните поле редактора и нажмите кнопку «Добавить форму».

Используйте раскрывающееся окно для выбора формы.Нажмите кнопку «Вставить». Это список из вашего плагина Ninja Forms.

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

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

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

Теперь у вас есть всплывающая контактная форма.

Настройка всплывающего окна

Между Ninja Forms и Popup Maker у вас есть доступ к довольно большому количеству доступных параметров настройки. Возможно, вам придется немного поэкспериментировать с формой, например, отрегулировать время, если вы хотите, чтобы она открывалась автоматически или где вы хотите, чтобы форма отображалась на вашем сайте.

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

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

Например, вы можете настроить всплывающую контактную форму так, чтобы она открывалась на домашней странице через пять секунд. Затем используйте шорткод для Ninja Form, чтобы разместить его на странице «Свяжитесь со мной» на веб-сайте.

Могу ли я использовать любой плагин для создания всплывающих окон с Ninja Forms?

У вас есть доступ к большому количеству плагинов для создания всплывающих окон для WordPress. На этот раз я использовал только Popup Maker, потому что это один из самых простых и эффективных инструментов для этой цели. Однако есть много вещей, совместимых с Ninja Forms. Найдите тот, который лучше всего подходит для вас.

Будет ли Popup Maker работать с контактной формой 7?

Popup Maker работает с большинством популярных плагинов для создания форм. Фактически, разработчик конкретно указывает, как Contact Form 7 входит в число поддерживаемых плагинов.