Всплывающая контактная форма wordpress: Страница не найдена — WPCourses

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

Всем привет дамы и господа! Сразу переходим к делу – сегодня мы научимся с вами с помощью плагинов делать красивую всплывающую контактную форму для wordpress.

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

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

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

Приступая к работе

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

Первое, вам нужен OptinMonster решение с дополнением Canvas. Это лучший плагин для лидогенерации.

Собственно, на второе подойдет любые решения контактных форм: Contact Form 7, Gravity Forms, Ninja Forms и др.

Предпочтительнее для этой статьи мы будем использовать наш любимый плагин Gravity Forms.

Давайте создадим всплывающее окно в wordpress

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

Заходим внутрь админки, переходим во вкладку OptinMonster и создаем новый оптин (optin) нажав на кнопку, как показано на скриншоте:

Во вкладке Setup (установка) вам необходимо выбрать опцию Canvas Popup как тип будущего оптина и тогда уже нажать на кнопку «следующий шаг» (Next Step). Если вы не видите расширение Canvas, значит вы его не установили.

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

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

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

Если все в настройках устраивает, тогда нажимаем на кнопку Save and design optin и переходим к следующему шагу.

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

Выбираем WhiteBoard тему и нажимаем Открыть настройки дизайна (Open design Customizer).

Далее мы переходим в экран разделенный на две части. Справа вы увидите окно предпросмотра изменений, которые вы задаете, слева – секции с измерениями (по ширине, длине), html, CSS и эффектами (они появятся если вы установили дополнение).

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

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

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

Нажмите на вкладку html, чтобы развернуть ее. Туда вы будете вставлять html код или шорткоды.

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

<h4>У вас еще остались вопросы?</h4>
<p>Хотите узнать о наших услугах больше? Просто заполните форму ниже и мы вам ответим очень быстро. Также вы можете позвонить нам по телефону 5555-5555</p>
[gravityform name=»CanvasPopupForm» title=»false» description=»false»]

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

Для каждого правила CSS необходимо использовать префикс, на скриншоте ниже он выделен.

Вот пример CSS кода, который мы использовали в нашем случае:

html div#om-lku3gv5wny-canvas #om-canvas-whiteboard-theme-optin-wrap {
background:#fff;
border:10px solid #F5F5F5;
color:#111;
}

html div#om-lku3gv5wny-canvas .gfield {
list-style:none;
}

html div#om-lku3gv5wny-canvas input[type=text]{
width:420px;
}

html div#om-lku3gv5wny-canvas input[type=submit] {
background:#ff6600;
color:#FFFFFF;
padding:5px;
width:420px;
margin-left:40px;
}

html div#om-lku3gv5wny-canvas textarea {
height:80px;
width:420px;
}

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

После того, как вы закончите редактирование стилей, нажмите на кнопку сохранить в верхней части «настройщика». Вы снова вернетесь на вкладку дизайна. Вам следует нажать на кнопку Manage Output Settings, чтобы завершить общий процесс настройки формы. Далее включаете флажок OPTIN на сайте.

Мы расскажем как открыть всплывающее контактное окно по нажатию ссылки на следующем шаге.

Сохраните как только завершите настройки.

Шаг 2: Открытие контактной формы по ссылке

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

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

Вот эта ссылка для вставки:

<a href=»#» class=»manual-optin-trigger» data-optin-slug=»lku3gv5wny-canvas»>Click me!</a>

Уникальным идентификатором формы является вот этот фрагмент: 
data-optin-slug=»lku3gv5wny-canvas» 

На этом все! Теперь вы без проблем можете создать красивую контактную всплывающую форму для wordpress на своем блоге. Спасибо за внимание.

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

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

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

Причины использования

Рассмотрим, для чего нужна такая форма

1. Экономия свободного места на сайте. Контактная форма может быть размещена где угодно: в подвале или шапке, в основном контенте страницы, в виде плавающей кнопки и т.д.
2. Эффективное появление. Анимация возникновения нового окна выглядит интересно и необычно
3. Доступность. Оставить записи в этой форме можно с любого места сайта, пользователям не нужно возвращаться на главную страницу.

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

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

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

Contact Form 7

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

1. Выберите опции меню «Плагины», а затем «Добавить новый»
2. Вбейте в поисковую строку наименование плагина и нажмите на клавиатуре Enter
3. Щелкните по кнопке «Установить»
4. Активируйте плагин

Easy FancyBox

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

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

Настроить параметры дополнения Easy FancyBox можно через медиафайлы. Воспользуйтесь опциями меню «Настройки» -> «Медиафайлы».

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

Но это еще не все. Поставьте галочку напротив пункта «Inline content»

И обязательно щелкните по кнопке «Сохранить изменения»

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

Совет: если вы хотите, чтобы форма всегда была открыта, тогда снимите в настройках Easy FancyBox галочку напротив опции «Close FancyBox when overlay is clicked», выполняющей функцию закрытия окна при клике мышкой за его пределами.

Пошаговая инструкция

Ну вот, со «скучной» предварительной подготовкой покончено, теперь перейдем к самой «вкусной» части – как, собственно, разрабатывается всплывающая форма обратной связи wordpress.

Обработка окна формы

С чего начнем? Конечно же, с предварительной настройки самой формы. Выберите в правом меню пункт «Contact Form 7», а потом опцию «Добавить новую».

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

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

Выведение формы

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

Теперь щелкните по кнопке «Добавить виджет»

Вставьте в поле ввода «Содержимое» следующий программный код:

Вот так будет выглядеть получившийся результат:

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

Дополнительно форму можно отредактировать: добавить или убрать поля ввода, ввести начальный и/или конечный текст до и после формы, преобразовать текст в заголовок или вывести его отдельным блоком, использовать различные стили, плэйсхолдеры и т.д. Были бы время и желание!

Стилизация ссылки

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

1 способ – использование дополнительных стилей темы.

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

1. Щелкнув в правом меню «Внешний вид», а затем по опции «Редактор». В открывшемся окне в самом конце пропишите исходный код и нажмите на кнопку «Обновить файл»
2. Выбрав «Внешний вид» -> «Настроить» -> «Дополнительные стили». Сюда также можно добавить ваши CSS-стили
   

Сам программный код выглядит так:

Получилась такая кнопка:

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

2 способ – использование изображения в виде кнопки. Сначала загрузите на сайт необходимую картинку (любую по вкусу, не обязательно в виде кнопки, — это не имеет особого значения). Для этого щелкните на «Медиафайлы» -> «Добавить новый» и выберите нужный рисунок. Справа от изображения появится постоянная ссылка на файл (в данном примере http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), скопируйте ее и добавьте в код (кавычки не удалять):

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

На моем сайте отобразилась кнопка, приведенная на скриншоте ниже:

А вот так будет выглядеть кнопка, если оставить дополнительный стиль, описанный в первом способе:

Добавление в меню

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

Сначала нужно разобраться, куда именно необходимо вставить этот код. Зайдите в «Редактор» через «Внешний вид» и среди шаблонов выберите «Заголовок (header.php)»

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

Ниже вставьте ваш код как раз перед закрывающим тегом.

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

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

В этом уроке, я хочу использовать две формы обратной связи: самописную на Ajax и Contact Form 7 на плагине.

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

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

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

Навигация по странице:

Не бойтесь нажимать, вы перейдете сразу к просмотру нужной информации

За все время работы WEB – программистом я создал и повидал не одну сотню всплывающих форм: как самописных так и на базе готовых модальных окон типа fancybox, lightbox и тому подобное. По этому, опираясь на свой опыт я вывел для себя самый удобный и простой вид всплывающих модальных окон, белая форма на полупрозрачном черном фоне, им я с вами и хочу поделиться.

Форма обратной связи в модальном окне

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

Если вы хотите просмотреть код и скопировать его к себе на сайт нажимайте по очереди вкладки Html, CSS, Javascript ниже:

Всплывающая форма Html код

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

Уроки разработки из собственного опыта

Автор: Николаенко Максим · Опубликовано Февраль 7, 2013 · Обновлено Август 4, 2019

Недавно один из посетителей задал вопрос, как создать всплывающую контактную форму? Предлагаю вам создать такую форму при помощи двух плагинов Contact Form 7 и Easy FancyBox.

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

После создания формы необходимо создать страницу и вставить в нее шорткод формы:

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

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

Опубликовано: 2021-09-20

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

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

В этом уроке я собираюсь показать, как использовать плагин контактной формы WordPress, а также всплывающий инструмент. Хотя есть несколько способов создания всплывающих контактных форм, я собираюсь рассмотреть бесплатный метод с использованием Popup Maker и 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 работать с Contact Form 7?

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

Много возможностей

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

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

Что бы вы поместили во всплывающее окно для своего веб-сайта? У вас есть контактная или другая целевая страница для посетителей?

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

Делаем всплывающие окна разными способами

Как сделать всплывающее окно контактной формы 5 вариантов
1) Делаем всплывающее видео или картинку в модальном окне
2) Контактная форма в BeTheme с помощью шорткода
3) Плагин Easy Modal делаем всплывающую форму (или что угодно всплвывающее) при нажатии на ссылку
4) Делаем всплывающую форму (или что угодно всплвывающее) при нажатии на Кнопку
5) Тоже но на картинку

И бонусом как все это дело разместить в Slider Revolution чтоб всплывало из слайдера

Если видео отображается не правильно перейдите по ссылке https://www.youtube.com/embed/eElziEx5Gwo
чуть не забыл шорткод.. 

Еще один вариант

Как сделать всплывающее окно. Настройки Popup Maker

Popup Maker ™ — лучший плагин для создания всплывающих окон, который может предложить WordPress. https://ru.wordpress.org/plugins/popup-maker/

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

Настройте каждый элемент ваших всплывающих окон, включая вид и положение на экране.

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

Если видео не отображается пройдите по ссылке https://www.youtube.com/embed/9HNlh95kXcs

Небольшая дописка))

Плагин обновился и теперь некоторые настройки переехали в другое место, в видео они с боку (выбор темы попапа) а в новом плагине они тут.

Если вы новичок в создании сайтов пройдите курс https://e-integrate.ru/wpm/start/  и попробуйте протестировать его уроки бесплатно.

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

Привет всем! Всплывающая контактная форма для Blogger — на любителя. Совсем забыл про русский сервис freeforms, с помощью которого можно создать всплывающею форму для связи с автором или установить её на отдельную статическую страницу  блога. Хотя в закладки этот сервис я добавил примерно год назад и вот сегодня freeforms попался мне на глаза. Естественно, спешу сразу поведать о сервисе всему миру, то есть, вам.

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

FreeForms — контактная форма для вашего сайта или блога совершенно бесплатно. Вы можете просто скопировать готовый код и вставить его на любой сайт или блог, чтобы получать сообщения с вашего личного сайта, блога. Проводить опросы и анкетирование, сделать доску объявлений или новостную ленту. Сообщения можно получать через web, по электронной почте или скачивать в виде текстового или Excel-файла.

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

Простая контактная форма для Blogger

А это уже всплывающая, открывается поверх блога, очень удобно:

Всплывающая форма для связи

Как видите можно выбрать из двух вариантов установки формы в ваш блог.

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

Для этого необходимо зайти на сайт freeforms (сервис перестал существовать) и указать свою электронную почту, куда будут приходить письма от ваших читателей, придумать свой пароль:

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

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

Получить код

Здесь все просто и понятно, ведь сервис наш родной, русский. Нажмите на «Редактировать форму»:

Свойства формы

Для того, чтобы настроить форму нужно нажать «Свойства формы» и приступайте к изменению внешнего вида. Что можно изменить — Название формы; Заголовок формы; Текст на кнопке; Размер шрифта; Цвет текста; Шрифт заголовка; Цвет заголовка; Цвет фона; Толщина границы; Радиус углов границы; Цвет границы. После всех изменений нажмите «Сохранить форму». Далее, чтобы добавить поля для своей формы вам нужно опять нажать «Редактировать форму» (Вы можете или сначала добавлять поля, а затем настраивать и вносить изменения в форму). Затем нажмите Добавить поле и в выпадающем списке выбрать то, что вам нужно, например, поле для ввода E-Mail. Обратите внимание, поля можно перетаскивать мышкой:

Добавить поле

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

Код для вставки

Теперь определитесь, какую форму будете устанавливать — на отдельную статическую страницу блога или всплывающею.

Установка контактной формы на отдельную статическую страницу Blogger

Зайдите в панель управления Blogger — Страницы — Создать страницу — Пустая страница и в режиме HTML вставьте первый код. Все, опубликуйте страницу, ссылку на форму можете вставить в меню. Вот что получается на странице:

Контактная форма на статической странице

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

Зайдите в панель управления Blogger — Дизайн — Добавить гаджет HTML/JavaScript на боковой панели блога, дайте название и в его поле вставьте второй код. Сохраните гаджет.

Отправить сообщение

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

С уважением, Сергей

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

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

Jetpack — это бесплатный плагин для WordPress от создателей сети WordPress.com. Он содержит большой набор модулей, включая статистику, подписки, уведомления, кнопки «поделиться», и конечно же контактные формы. Если ваш блог или сайт работает на WordPress.com (а не WordPress.org), то модуль для работы с контактными формами у вас уже установлен и дополнительно настраивать его не нужно. Если вы не видите разницу между WordPress.com и WordPress.org, советуем обратиться к нашей статье.

Активация Jetpack и модуля «Контактные формы»

Если вы ещё не установили плагин Jetpack, то вы можете скачать архив плагина с сайта WordPress.org или установить плагин автоматически через административную панель WordPress. После активации Jetpack для полноценной работы вам необходимо связать его с вашим аккаунтом WordPress.com.

Подключение к WordPress.com

Если у вас нет аккаунта в сети WordPress.com (не путать с аккаунтом от вашего сайта WordPress), то вы можете его создать. После успешного подключения вам станут доступны все модули плагина Jetpack, некоторые из них будут активированы по умолчанию.

Чтобы деактивировать модуль Jetpack, щёлкните по кнопке «Learn More» (узнать больше) и рядом с ней появится кнопка «Deactivate» (деактивировать). Чтобы активировать модуль, щёлкните по его кнопке «Activate» (активировать). Убедитесь в том, что модуль «Contact Form» (контактная форма) находится в активном состоянии:

Модуль «Контактные формы»

Создание контактной формы

Контактные формы Jetpack можно размещать как в записях, так и на страницах. В качестве примера мы создадим новую страницу и назовём её «Контакты». В редакторе страницы вы заметите новую кнопку для работы с контактными формами:

Добавить новую контактную форму

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

Работа с контактной формой

Поля можно сортировать, редактировать, удалять. Чтобы добавить новое поле щёлкните по ссылке «Add a new field» (добавить новое поле). Вы можете создавать поля различных типов, включая текст, радио-кнопки, флажки (checkbox), выпадающие списки.

Во вкладке «Email notifications» (уведомления) вы можете настроить адрес электронной почты и тему письма, которое будет отправляться при заполнении новой формы. Если адрес не задавать, то Jetpack воспользуется тем, что указан в вашем профиле. В случае отсутствия темы письма, Jetpack воспользуется названием страницы, на которой размещается контактная форма.

Чтобы добавить новую форму на страницу, щёлкните по кнопке «Add this form to my post» и Jetpack добавит код для вашей формы в редактор.

Код контактной формы

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

Контактна форма в действии

При заполнении формы на указанный вами электронный адрес придёт новое письмо с содержанием всех заполненных полей. Несмотря на наличие поля для ввода адреса электронной почты в контактной форме, письмо приходит с адреса вашего сайта, например [email protected] а не с того адреса, который был указан при заполнении формы. Учитывайте это при ответе на подобные письма.

Управление сообщениями и защита от спама

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

В основном меню в административной панели WordPress перейдите в раздел «Feedbacks» (отзывы). Здесь вы найдёте все сообщения которые были присланы через контактную форму, включая те, которые Jetpack пометил как спам.

Для защиты от спама Jetpack пользуется средствами плагина Akismet. Для правильной работы антиспама, создавая поля для ввода имени, адреса электронной почты и адреса сайта, используйте предназначенные для этого соответствующие типы полей (Name, Email, Website), а не простые текстовые поля.

Если при работе с контактными формами в WordPress у вас возникли вопросы, напишите нам в комментариях или в Твиттере.

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

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

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

Представляю вашему вниманию ТОП 5 WordPress плагинов для создания обратной связи.

1. WPForms

WPForms — это молодой WordPress плагин по созданию форм обратной связи.

Плюсы

Используется визуальный редактор Drag&Drop, который делает этот плагин еще более «user-friendly» (удобный для использования).

Лайт версия не ограничивает установку плагина на безграничное кол-во доменов.

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

Минусы

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

Основная задача для WPForms сделать плагин как можно удобнее для пользователей. Так как не все знакомы с HTML/CSS для того, чтобы напрямую исправлять поля формы и т.д. Поэтому в нем и нет некоторых сложных для понимания функций, которые есть в других плагинах.

2. Gravity Forms

Gravity Forms — это премиум плагин, который предоставляет огромное кол-во функционала (какое вы только можете пожелать).

Плюсы

Мощный плагин, с неограниченным количеством функционала.

Плагин предоставляется с премиальной поддержкой, а так же с обширной документацией, FAQ и форумом для обсуждения.

Минусы

У Gravity forms отсутствует бесплатная версии и вероятнее всего это будет дорогостоящий продукт для одного сайта. В случае, если у вас несколько сайтов (мультисайтовость), то стоимость не должна быть проблемой для вас.

3. Ninja Forms

Ninja forms — это идеальное решение для создания бесплатных форм в WordPress. Может так же использоваться для формирования высоко интерактивных форм.

Плюсы

Плагин доступен бесплатно с официального сайта WordPress. Установку можно на неограниченное кол-во сайтов.

К дополнению к бесплатной версии есть премиальная, которая имеет еще больше функций (такие как: SMS уведомления, Freshbooks, Campaign Monitor и Salesforce).

Отличная поддержка со стороны сообщества, подробная документация, а так же поддержка по почте.

Минусы

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

4. Pirate Forms

Pirate — это бесплатный WordPress плагин написанный командой Themeisle. Легко настраивается и удобный для создания простых форм.

Плюсы

Абсолютно бесплатный для скачивания и последующих обновлений.

У этой плагине есть все многие функции, например такие как: CAPTCHA для проверка от ботов и SMTP, чтобы убрать вероятность попадания письма в папку «Спам».

Минусы

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

Недостаток дополнений (других плагинов), которые совместно работают.

5. Contact Form 7

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

Факт! У этого плагина больше всего загрузок из всех плагинов связанных с построением форм.

Плюсы

Основной плюс — это бесплатность и возможность установить на неограниченное количество сайтов.

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

Является отличным дополнение для создания простой формы обратной связи для блога.

Минусы

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

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

Всплывающие формы

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

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

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

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

bologer.ru

Contact Form 7

Весьма продвинутый и популярный плагин, позволяющий создавать и использовать одновременно большое количество разных форм. Настройки плагина расположены в пункте меню под названием «Contact». Список уже созданных форм можно просмотреть, нажав на ссылку «Contact Forms». Здесь указано имя формы, код вставки (шорткод) и дата создания. Каждую форму можно отредактировать, удалить или переместить. При добавлении новой формы можно выбрать язык, указать заголовок. Добавление полей осуществляется на основании большого количества имеющихся шаблонов (текст, email, radio buttons, checkbox, captcha и т.д.).

Ссылка на скачивание — http://wordpress.org/plugins/contact-form-7/

ContactMe

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

Ссылка на скачивание — http://wordpress.org/plugins/contactme

Contact Coldform

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

Ссылка на скачивание — http://wordpress.org/plugins/contact-coldform/

SimpleModal Contact Form

Достаточно простая форма, но при этом очень красивая и удобная для использования. Ключевая особенность SMCF заключается в том, что данная форма появляется во всплывающем AJAX-окне, то есть для нее не нужна отдельная страница. Вполне достаточно обычной ссылки с классом class=»smcf-link», к примеру, в сайдбаре или футере. При нажатии на ссылку появляется сама форма. Настроек здесь совсем немного – можно лишь указать email-адрес, имя отправителя, добавить или удалить поле с темой письма и т.д. Максимальное количество полей в форме – 4, три из которых (name, email, message) являются обязательными.

Ссылка на скачивание — https://wordpress.org/plugins/simplemodal-contact-form-smcf/

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

cho-cho.ru

Плагин обратной связи для WordPress

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

После скачивания распакуйте архив и скопируйте файлы на сервер в папку /wp-content/plugins/. После активации плагина переходите к его настройкам в панели администратора. Справа в меню появится пункт «Contact». Значит, плагин обратной связи WordPress установлен и запущен. Для установки стандартной формы CF7 на сайт достаточно скопировать код «форма для контакта», который вы увидите в меню Contact. Если вы хотите настроить форму по своему усмотрению, перейдите по ссылке «Добавить новую».

В результате появится несколько полей:

1. Название формы;
2. Форма обратной связи;
3. Почтовые настройки;
4. Дополнительная форма обратной связи;
5. Сервисные сообщения;
6. Дополнительные настройки.

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

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

Как вариант, можете еще испробовать плагин Cforms, он более сложен, но и функций у него больше.

Как создать форму обратной связи WordPress без плагина

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

Для начала нужно создать отдельный файл *.php (например, contact.php или mail.php). После создания лучше поместить его в папку с темой шаблона, тогда можно будет его редактировать из админки.

Вот код, который нужно вставить в созданный вами файл php:

Для своего блога вам нужно будет изменить url в первой строке и в строке address, и по желанию название полей Имя, Тема, Текст. Также по своему усмотрению вы можете изменить текстовые сообщения, которые будет видеть пользователь после отправки, либо если сообщение не отправлено.

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

Для этого можно использовать такой код:

Здесь самое важное указать правильный путь к тому файлу php, который вы создали (в нашем случае, это contact.php). В данном коде по своему желанию и вкусу можете менять названия полей, и их ширину.

Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.

pro-wordpress.ru

Что необходимо для создания обратной связи на 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.

Похожие статьи

wordpresslib.ru

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

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

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

УСТАНОВКА ПЛАГИНА CONTACT FORM 7 ДЛЯ WORDPRESS

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

В админке сайта переходим в раздел Плагины — Добавить новый и в строку поиска вводим название плагина — «contact form 7″. Первый найденный плагин формы обратной связи — нужный нам вариант.

Жмем кнопку Установить и активируем плагин. После установки в меню появится новый раздел Contact Form 7 с несколькими пунктами.

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

Можем попробовать заполнить форму и отправить ее, письмо будет доставлено на адрес email, указанный в настройках профиля администратора. Обратите внимание, плагин Contact Form 7 не просто предлагает обычную стандартную форму обратной связи. Нет, плагин позволяет гибко ее настраивать. К тому же, форма отправляется без перезагрузки страницы, что является дополнительным плюсом. Ну и, конечно же, валидация полей формы, возможность указать обязательные для заполнения поля — это еще один огромный плюс.

НАСТРОЙКА ФОРМЫ ОБРАТНОЙ СВЯЗИ ДЛЯ WORDPRESS

Ну что же, мы использовали уже готовую форму. А как насчет ее изменения? Возможно ли это и легко ли сделать это? Ответ — да — на оба вопроса. К примеру, я хочу убрать из формы поле Тема, как это сделать? Перейдем к редактированию формы в меню плагина Формы и увидим следующую картину.

Для того, чтобы убрать тему, достаточно убрать 2 соответствующие строки, обведенные рамкой на скриншоте. Здесь интересна вторая строка: [text your-subject]. Как вы уже догадались, это ни что иное, как шорткод, который и разворачивается в поле формы. В данном случае это поле типа text со значение атрибута name — your-subject.

Если, к примеру, речь идет о текстовой области ниже, то ее шорткод выглядит так: [textarea your-message]. Здесь textarea — это тег textarea формы, а your-message — имя данного элемента формы. Все просто.

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

Ну а если все же возникнут сложности, тогда вам поможет документация к плагину, где можно найти множество примеров.

Итак, давайте в качестве примера удалим тему сообщения и добавим список с вариантами выбора темы сообщения. Для создания выпадающего списка кликнем по кнопке drop-down menu. В открывшемся модальном окне заполняем форму. Ключевым является поле Options, в которое мы вводим варианты для выпадающего списка. Каждый вариант с новой строки. Прочие поля формы должны быть интуитивно понятны. Например, если мы отметим чекбокс в поле Field type (Required field), то тем самым сделаем создаваемое поле формы обязательным для заполнения. Чекбокс Allow multiple selections позволяет создать список с возможностью выбора нескольких вариантов, а чекбокс Insert a blank item as the first option создаст первым пустой вариант в списке. Поля Id и Class говорят сами за себя — это поля для добавления атрибутов id и class, позволяющих в дальнейшем оформить поле.

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

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

Давайте попробуем заполнить и отправить форму. Форма отправляется, но oops… в полученном письме нет выбранного варианта темы. Как так? Как исправить это недоразумение? Не волнуйтесь, исправляется это просто. Идем в редактирование формы и переключаемся на вкладку Письмо.

В этой вкладке настраивается формат письма, который приходит на email из формы обратной связи. На скриншоте в первой обведенной области мы видим список шорткодов (имен полей формы), которые используются в нашей форме обратной связи. Именно значения этих полей и подставляются в шаблон письма. Мы видим на второй отмеченной области, что для поля Тема осталось имя из прежнего поля. Также в поле Message Body указан прежний шорткод. Давайте заменим их соответствующим тегом из списка выше — [menu-236]. К слову, здесь же можем изменить и email получателя, он записан в поле To. Также можем изменить и прочие настройки ниже, все они подписаны и понятны.

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

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

ЗАЩИТА ФОРМЫ ОБРАТНОЙ СВЯЗИ

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

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

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

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

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

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

webformyself.com

Обратная связь WordPress с плагином

к менюНа сегодняшний день репозиторий wordpress.org просто кишит всякого рода плагинами для создания форм обратной связи на Вордпрес и порой сделать выбор очень трудно даже опытному программисту. Хотя я свой выбор сделал, о нем дальше и поговорим 🙂

Обзор плагинов контактных форм обратной связи wordpress

Contact Form 7

Очень популярный плагин для создания обратной связи у wordpress. На сегодня имеет больше 1 миллиона активных инсталов и это число постоянно растет. Новые версии плагина выходят довольно часто, из последних обширных нововведений версия 4.2, которая получила новый дизайн админки, а также дополнительные настройки Contact Form 7.

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

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

к менюСсылка на плагин: Получить ссылку на (CF7)

Custom Contact Forms

Довольно функциональный плагин, позволяет создавать сложные формы. Благодаря ему обратная связь wordpress приобретает новый окрас. Имеет более 75 000 активных инсталов, а также умеет делать:

• неограниченное число произвольных форм;
• обязательные / необязательные поля;
• редиректы на другие страницы после отправки данных;
• капчу и простую проверку на спам.

к менюСсылка на плагин: Получить ссылку на (Custom Contact Forms)

Contact Form Plugin by vCita

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

Форма обратной связи wordpress на этом плагине делается легко и рассчитанная на пользователей без знаний ПХП.

На сегодняшний день плагин имеет около 10 000 активных установок.

Ссылка на плагин: Получить ссылку на (Contact Form Plugin by vCita)

help-wp.ru

Зачем нужна форма обратной связи

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

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

Где найти готовые шаблоны или заготовки

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

Форма для возможности обратной связи представляется одной из важных частей wordpress сайта. Без нее упускается возможность всегда быть на связи с посетителями и клиентами. Помимо этого без этой примочки возрастает вероятность потери потенциальных покупателей.

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

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

1. Contact form 7
2. Fast Secure Contact From.
3. Contact Form by Contact ME
4. FormCraft
5. Visual Form Builder
6. NForms
7. Gravity Forms
8. Mapped Contact Form Pro WordPress
9. Ninja Forms
10. Ninja Kick

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

Contact form 7

Cf7 сегодня это самый востребованный плагин для вордпресс.

Преимуществами у него являются:

1. AJAX-отправка сообщений.
2. Встроенная капча.
3. Специальный спам-фильтр.
4. Позволяет загружать файлы.

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

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

Fast Secure Contact From

Fast Secure Contact From это нестандартная разработка, имеющая высокую популярность. В основном он используется владельцами блогов для создания и добавления контактной формы на сайты.

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

Положительными сторонами плагина являются:

1. Не дает регистрировать профиль простым пользователям.
2. Предоставляет возможность формирования графика, онлайн-встреч.
3. Поддерживает несколько адресов электронной почты.

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

Contact Form by Contact ME

Contact Form by Contact ME – это доступный конструктор, имеющий в своем арсенале стандартный набор основных функций. Он работает только после прохождения регистрации на сайте. Эта процедура проста и бесплатна. Разработчики считают, что он лучше других раскрученных плагинов, даже CF7.

Этот конструктор имеет множество нужных функций:

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

Отталкивает владельцев веб-ресурсов по большей степени от использования такой разработки, только наличие регистрации на сайте Contact me.

FormCraft

Плагин FormCraft изначально создавался и поддерживался только как премиум приложение. Не так давно его создатели сделали и бесплатную версию – FromBuilder, доступную каждому интернет-пользователю.

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

Visual Form Builder

Еще один конструктор Visual Form Builder – разработка, которая позволяет создавать и осуществлять контроль над всеми формами из одного места. При помощи всего одного клика вы сможете управлять полями, антиспамом и реорганизовывать ранее созданные формы. Звучит заманчиво, правда?

Плюсами этого плагина являются:

• Возможность смены порядка элементов обычным перетаскиванием.
• Способность экспортировать данные в файл CSV.
• Отправка контролируемых сообщений с подтверждением.
• Возможность указания множества url адресов.

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

nForms

nForms напоминает достаточно простой шаблон, с Ajax отправкой. Созданная форма будет отображаться с помощью специального шорткода или виджета. Это довольно интересный вариант, но подходит не для любого сайта (нужно сопоставлять результат с вашим макетом). Это приложение предоставляет вам больше, чем просто контактная форма. Заинтересовались? Тогда проведите эксперимент, быть может, такая форма станет своеобразной фишкой вашего сайта.

Gravity Forms

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

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

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

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

Mapped Contact Form Pro WordPress

Дополнение Mapped Contact применяет немного измененный процесс для отображения формы на сайте. Это отличное решение для крупной компании или сети фирм, потому что может обозначать филиалы на карте гугл. Получается, что это довольно полезный плагин, вы согласны?

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

Ninja Forms

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

Положительными сторонами такой разработки можно назвать:

1. Достаточно широкий функционал.
2. Присутствие удобного переключателя для возможности предпросмотра и теста конструкций.

Отрицательными сторонами будут:

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

Ninja Kick

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

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

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

Пошаговое руководство по созданию формы обратной связи

Теперь давайте посмотрим, как именно создаются эти формы на примере приложения CF7:

1. Для начала необходимо скачать и установить нужный плагин, активировать его в разделе администрирования. Перейти на новую вкладку и нажать «Добавить новую форму».
2. Следующим шагом будет создание имени для продукта. Главное, не забывайте сохранять все свои изменения. После этого перед вами появиться шорткод (вот пример «[contact-form-7 404 «Не найдено»]»).
3. После установки кода можно настроить поля, которые будут выводиться на сайте. Специальная область, которая называется «Шаблон формы», содержит в себе шаблоны полей. Если их не трогать, то по умолчанию, они будут следующие: Имя, адрес электронной почты, Тема сообщения и само сообщение, а также кнопка «Отправить».

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

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

Вот и разобрались с тем, как сделать форму через приложение Contact Form 7. Несложно, правда?

Имею желание еще сказать пару слов, о защите вашего почтового ящика от наплыва спамеров: «Чтобы к вам на электронку не приходил спам, нелишним будет добавить в форму обратной связи капчу. Она устанавливается с помощью функции «генерации тега». А для ее функционирования потребуется дополнение Really Simple CAPTCHA. Закончив настраивать дополнение, вы сможете забыть о проблеме со спамом.

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

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

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

1. FL.ru
2. Weblancer.ru

В заключение статьи давайте подведем итоги:

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

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

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

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

Ну все, пока-пока.

С уважением, Елена Изотова.

blogizotovoy.ru

Как сделать форму обратной связи для WordPress без плагинов?

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

6) Скачиваем этот файл и закачиваем его на блог через программу FTP в папку вашей темы оформления. Если что, вот ее адрес: httpdocs (или public_html, www, domains) /wp-content/themes/(папка вашей темы). Теперь переходим в админке во «внешний вид» «редактор» в файл mail.php и в строчке $address= „[email protected]“; меняем емайл на свой и сохраняем файл. Теперь просто создаем новую страницу и вставляем в нее этот код и сохраняем запись.

<h3>Форма обратной связи</h3>
<form name=»MyForm» action=»/wp-content/themes/cloudy/mail.php» method=»post»>
<p><input class=»input» name=»name» type=»text» style=»width:25%» /> Ваше имя</p>
<p><input class=»input» name=»email» type=»text» style=»width:25%» /> Электронная почта</p>
<p><input class=»input» name=»sub» type=»text» style=»width:25%» /> Тема сообщения</p>
<p>Текст сообщения:<br /><textarea name=»body» cols=»1″ rows=»5″ style=»width:76%» /></textarea></p>
<p><input value=»Отправить» type=»submit» /></p>
</form>

7) Скачиваем этот файл и закачиваем его на блог через программу FTP в вашу папку темы оформления, как и в предыдущем примере. Заходим во «внешний вид» «редактор» в файл mailpost.php в строке $address = «[email protected]»; меняем емайл на свой и сохраняем файл. Теперь создайте новую страницу и вставьте в нее этот код и сохраните запись.

<form name=»MyForm» action=»/wp-content/themes/lime/mailpost.php» method=»post»>
<p><input class=»input» name=»name» type=»text» style=»width:31%» value=»Ваше имя» onfocus=»if (this.value==this.defaultValue) this.value=»;» onblur=»if (this.value==») this.value=this.defaultValue;» /></p>
<p><input class=»input» name=»email» type=»text» style=»width:31%» value=»Эл. почта» onfocus=»if (this.value==this.defaultValue) this.value=»;» onblur=»if (this.value==») this.value=this.defaultValue;» /></p>
<p><input class=»input» name=»sub» type=»text» style=»width:31%» value=»Тема» onfocus=»if (this.value==this.defaultValue) this.value=»;» onblur=»if (this.value==») this.value=this.defaultValue;» /></p>
<p><textarea name=»body» cols=»1″ rows=»5″ style=»width:98%» onfocus=»if (this.value==’Текст сообщения’){this.value=»};» onblur=»if (this.value==»){this.value=’Текст сообщения’}» >Текст сообщения</textarea></p>
<p><input value=»Отправить сообщение автору блога» type=»submit» /></p>
</form>

Кстати, если вам не нравится внешний вид формы, можете прописать к ней стили оформления.

firstprize.ru

Popup contact form — плагин для WordPress

Описание

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

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

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

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

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

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

• Перетащите виджет
• Вставьте php-код в желаемое место шаблона
• Сокращенный код страниц и сообщений

Переводчики

Скриншоты

• Передний экран.http://www.gopiplus.com/work/2012/05/18/popup-contact-form-wordpress-plugin/

• Экран администратора. http://www.gopiplus.com/work/2012/05/18/popup-contact-form-wordpress-plugin/

FAQ

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

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

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

Ответ

Обзоры

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

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

http://www.awesomescreenshot.com/image/1682816/74fc219f68e79cf23ecbae0866d608ce

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

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

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

авторов

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

1,0

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

2,0

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

3,0

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

4,0

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

4,1

Проверено до 3.5

5,0

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

5,1

1. Проверено до 3.8
2. Теперь этот плагин поддерживает локализацию (или интернационализацию). т.е. возможность перевода на другие языки.
   Плагин * .po файл (popup-contact.po) доступен в папке языков.

5,2

1. Проверено до 3.9

5,3

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

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. Text Domain.

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. Использовать в виджете сокращенный код плагина.

Открытие контактной формы со всплывающим окном

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

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

Для этого выполните следующие действия:

1. Установите плагин Contact Form и создайте свою контактную форму.
2. Создайте всплывающее окно и перейдите на вкладку Контакт .
3. Включите контактную форму здесь (выберите форму из раскрывающегося списка):

Не забывайте, что если у вас есть форма подписки, выключите кнопку включения подписки на вкладке подписки плагина Popup!

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

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

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

Вот и все, теперь вы можете создавать и вставлять всплывающие окна контактной формы в свои страницы / сообщения и виджеты WordPress. Если возникнут какие-либо проблемы, свяжитесь с нами. Будем рады ответить на все ваши вопросы. НО перед этим — проверьте две ссылки ниже!

Popup от Supsystic включает в себя множество интересных опций, доступных вам! Посмотрите другие варианты для вашего собственного сайта Примеры всплывающих окон WordPress.

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

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

Как отобразить форму обратной связи WordPress во всплывающем окне? Плагины от Supsystic

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

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

Как это сделать? Следуйте инструкции.

1. Прежде всего, вам нужно создать контактную форму . Выберите шаблон, дизайн, шрифт, количество всех полей и настройте его внешний вид. Сохраните настройки.
2. Выберите « Popup » в опции рядом с именем вашей контактной формы (над всеми настройками) и нажмите кнопку « Выберите вашу форму в любом всплывающем окне».
3. Здесь создайте новое всплывающее окно, настройте, как, когда, где и для кого вы хотите, чтобы оно отображалось, и перейдите на вкладку «Контакт» в подключаемом модуле всплывающих окон.
4. Включите контактную форму и выберите имя проекта .
5. Не забывайте, что у вас есть опция предварительного просмотра под настройками всплывающего окна. Это очень полезный вариант, если у вас много деталей и вам нужно их проверить. Очевидно, проверьте их!

Давайте посмотрим, как различные шаблоны контактных форм могут быть интегрированы в Popup

.

Если у вас есть дополнительные вопросы или вам нужна дополнительная информация — просмотрите наши основные страницы плагинов.Там вы найдете FAQ, форумы и даже видеоуроки для тех, кто только начинает знакомство с плагинами Supsystic.

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

Хотите создать всплывающую форму WordPress? Вы можете легко создать свое всплывающее окно с помощью конструктора форм и плагина всплывающих окон WordPress!

Приблизительное время чтения: 6,5 минут

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

Для начала вам понадобятся два инструмента:

• Плагин WordPress для всплывающих окон
• Плагин для создания форм WordPress

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

Для этого нужно сделать три основных шага:

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

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

Чтобы следовать этому руководству, вам понадобится плагин форм WordPress и плагин для создания всплывающих окон.Существует множество вариантов построения форм, но мы покажем вам, как использовать Formidable Forms . Полное раскрытие: это созданный нами конструктор форм перетаскивания.

Но для контактных форм это 100% бесплатное использование! Так что, если вам нравится бесплатный контент, он отлично подойдет.

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

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

Существуют ли бесплатные плагины для создания всплывающих окон?

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

Но большинство других производителей всплывающих окон не предлагают бесплатное A / B-тестирование или расширенные функции, такие как намерение выхода. Еще одно соображение: многие плагины всплывающих окон имеют неуклюжий интерфейс и полны надоедливой рекламы.

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

Для начала давайте установим эти два плагина. Вот ссылки:

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

1. Создайте контактную форму с помощью Formidable Forms

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

В админке WordPress посмотрите на боковую панель в левой части экрана. Перейдите в Formidable → Forms и нажмите Добавить новый вверху страницы.

Оттуда нажмите Создать форму в разделе «Пустая форма». Дайте вашей новой форме имя и нажмите Создать , чтобы начать создание формы.

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

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

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

Пока оставьте это открытым на отдельной вкладке в браузере. Нам это понадобится через пару минут!

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

2. Создайте всплывающее окно WordPress с помощью OptinMonster

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

Чтобы начать, нажмите кнопку Create New Campaign в разделе OptinMonster вашего администратора WordPress. Это приведет вас к конструктору всплывающих окон OptinMonster на их веб-сайте.

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

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

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

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

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

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

Настроить правила отображения всплывающих окон

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

Чтобы настроить это, щелкните вкладку Popular , а затем щелкните MonsterLink . После этого нажмите зеленую кнопку, чтобы скопировать код MonsterLink. Щелкните Сохранить в правом верхнем углу, а затем щелкните вкладку Опубликовать .

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

3. Опубликуйте всплывающую кнопку на своем сайте

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

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

Если ваша форма выглядит не так, как вы ожидали, возможно, возник конфликт. Между OptinMonster, вашей темой WordPress и Formidable Forms могут возникать ошибки CSS.

Вот еще одно преимущество использования платного всплывающего плагина — у них есть 24/7 поддержка для устранения неполадок! Команда поддержки OptinMonster сможет помочь вам настроить вещи, чтобы они выглядели великолепно.Вот как это может выглядеть для вас сейчас:

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

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

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

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

Подведение итогов

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

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

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

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

Еще не используете Formidable Forms ? Почему нет? У Formidable есть множество функций, помимо контактных форм. Получите бесплатный плагин WordPress или попробуйте Formidable с нашей 14-дневной бесплатной пробной версией без риска.

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

Вы хотите, чтобы ваша контактная форма появлялась при нажатии пользователем кнопки или ссылки контакта?

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

Простое создание всплывающего окна контактной формы в WordPress

С WordPress создать всплывающее окно контактной формы очень просто. Для начала вам достаточно иметь 2 вещи:

1. мощный всплывающий плагин
2. надежный плагин для создания форм

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

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

Чтобы узнать больше об OptinMonster, прочтите наш подробный обзор OptinMonster.

Шаг 1. Установите плагины WPForms и OptinMonster

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

Все готово? Идеально.

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

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

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

Если у вас нет контактной формы, перейдите на панель управления и нажмите WPForms »Добавить новый .

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

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

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

Теперь перейдите на вкладку Embed рядом с кнопкой сохранения и скопируйте шорткод.

Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster

Следующим шагом будет создание всплывающего окна на вашем веб-сайте. Мы создадим модальное всплывающее окно с помощью OptinMonster.Так что перейдите в панель управления WordPress и нажмите OptinMonster »Создать новую кампанию .

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

В качестве шаблона возьмем Canvas . Это пустой холст, поддерживающий все формы шорткодов. Таким образом, вы можете вставить сюда любые короткие коды HTML, CSS, JavaScript и даже WordPress.

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

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

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

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

 
 У вас есть вопросы? 
 Хотите узнать больше о наших услугах? Просто заполните форму, и мы свяжемся с вами в ближайшее время.

Вот пример того, как это можно сделать.

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

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

Шаг 4. Публикация всплывающей формы

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

Наконец, перейдите на вкладку Publish и переключите статус на live .

После этого вернитесь в панель управления WordPress и перейдите на страницу OptinMonster »Campaigns . Здесь вы увидите свою кампанию.Ниже этого нажмите ссылку Изменить параметры вывода . Он развернется, чтобы отобразить несколько параметров. Установите флажок рядом с Включить опцию кампании на сайте .

Наконец, нажмите Сохранить настройки в конце страницы.

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

Первая копия ярлыка кампании OptinMonster. Вы можете найти его прямо рядом с названием вашей кампании.

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

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

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

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

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

Доказано, что

всплывающих окон работают. У всплывающих окон более высокий рейтинг кликов, чем у других форм рекламы, и было показано, что они увеличивают количество подписок до 86%. ¹ , они могут возвращать результаты по шкале 1000% + коэффициент конверсии для форм согласия ² , и они могут улучшить подписку на электронную почту, не отгоняя зрителей ³ ! При правильном использовании всплывающие окна могут быть эффективной формой рекламы, которая побуждает читателя к взаимодействию.Если ваш интерес достиг пика, давайте обсудим, как создать быструю и простую всплывающую форму WordPress.

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

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

Шаг первый: загрузите Popup Maker

На панели инструментов WordPress перейдите в Плагины > Добавить новый и найдите Popup Maker .Найдя плагин Popup Maker, нажмите «Установить» и активируйте его.

Шаг второй: откройте Popup Maker на панели инструментов

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

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

Шаг третий: добавьте текст и форму

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

Если у вас есть всплывающий текст в том виде, в котором вы хотите, в редакторе форматированного текста, добавить любую форму ниндзя очень просто. Если одновременно установлены Popup Maker и Ninja Forms, вы увидите кнопку «Добавить форму» прямо над параметрами текстового редактора:

Нажмите «Добавить форму», чтобы увидеть список всех ваших форм ниндзя:

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

Шаг четвертый: представление всплывающей формы WordPress

Последние три действия — это установка ваших условий, триггеров и файлов cookie. Эти параметры определяют, как и когда открывается всплывающее окно, и их можно установить в правом углу панели управления и под текстовым полем:

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

… и триггер для автоматического открытия при загрузке страницы:

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

Шаг пятый: опубликуйте!

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

Вы вряд ли начали исследовать…

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

Есть ли у вас какие-либо советы или рекомендации, не перечисленные здесь? Поделитесь ими в комментариях ниже и сообщите нам, что сработало для вас!

1. https://www.smartbugmedia.com/blog/do-pop-up-ads-actually-work-heres-the-data-you-need
2. https://www.crazyegg.com/blog/opt-pop-ups/
3. http: // danzarrella.com / my-data-show-email-popups-work-and-dont-damage /

FOR ALL THINGS WORDPRESS & NINJA FORMS

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

Примечание: для этого содержимого требуется JavaScript.

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

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

Посмотрим как.

1. Загрузите плагин Popup Maker и плагин Ninja Forms

Чтобы следовать этому руководству, убедитесь, что у вас установлены и активированы следующие плагины (они оба бесплатны!):

1. Плагин Popup Maker
2. Плагин Ninja Forms

2. Подготовьте форму, которую вы хотите встроить

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

3. Вставьте формы ниндзя в свое всплывающее окно

После того, как вы создали форму, теперь вы готовы встроить ее во всплывающее окно. На панели управления WordPress перейдите в Popup Maker> Create Popup.

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

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

Установите, что заставит ваше всплывающее окно открываться (и закрываться)

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

Решите, где вы хотите показывать всплывающее окно

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

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

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

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

Теперь ваша форма WordPress получит то внимание, которого она заслуживает

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

Расскажите нам, что вы создаете с помощью Ninja Forms + Popup Maker, в разделе комментариев!

FOR ALL THINGS WORDPRESS & NINJA FORMS

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