Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке
[vc_message color=”alert-success”]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью:
Как сделать форму обратной связи во всплывающем окне для WordPress[/vc_message]
Будет много кода, но он будет весь рабочий, понятный и очень простой.
- Сделаем всплывающую форму с куки.
- Сделаем всплывающее окно после успешной отправки.
Изначально думал, сделать несколько разных форм, но потом решил сделать одну, а в нее включить всё, что можно. И если нужна будет какая-то упрощенная форма, то можно будет просто использовать свои настройки и не включать все возможности.
[UPD] Форму я брал с одного из рабочих сайтов, и чтобы было в ней меньше кода, взял код подписной формы. Думаю, переименовать поля в форме и добавить textarea не составит труда, поэтому из подписной формы не сложно будет сделать форму обратной связи или любую другую форму, я же оставлю код таким как он есть, иначе нужно менять еще и тексты в форме и менять стили, а мне уже лень (делаю уже, надеюсь, последний, 17-ый апдейт этого кода).
Рекомендую изучить три статьи, ссылки на которые я указал выше, весь код будет взят из них и собран в этой статье с минимальными разъяснениями.
Форма обратной связи с всплывающим окном о подтверждении отправления.
В head подключаем нужные шрифты с Google Fonts, Bootstrap и FontAwesome (при необходимости, это не обязательно)
Основной HTML будет такого вида (все элементы и классы не являются обязательными у вас может быть совсем другой код, мой код взят из фрагмента рабочего сайта и немного упрощен для примера, но могут присутствовать лишние элементы):
CSS стили
Стили также взяты с рабочего примера, и не являются обязательными, используйте свои классы и стили, создавайте уникальный красивый дизайн.
JavaScript код
Обязательно подключаем jQuery :
Если вы хотите использовать в форме куки, то нужно обязательно подключить jquery.cookie.min.js .
Скачать скрипт jquery.cookie.min.js можно здесь.
Про пример использования куки почитайте здесь.
Ниже функция для всплывающего окна.
Если куки не нужны, тогда добавьте этот код под основным кодом скрипта.
Если вы хотите использовать куки, тогда подключайте код ниже, но не забудьте подключить скрипт jquery.cookie.min.js
Рабочий пример:
Готовая HTML-страница c формой обратной связи с использованием куки:
Рекомендую к прочтению:
Комментарии (9) к “Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке”
Добрый день. Спасибо за красивую форму, не разобрался как выводить ее ( кнопка или ссылка для вывода формы.) Спасибо
Denis Creative
В данной статье поп-ап выводится автоматически через время после загрузки страницы.
В этой статье есть пример попапа с вызовом по клику на кнопке Делаем попап без плагина fancybox.
Если быстро, то надо добавить кнопку
при нажатии на кнопку показываем попап
чтобы при нажатии на область вне попап-окна, попап скрывался нужно после строки
По идее, должно работать.
Артём
Добрый день. Подскажите пожалуйста как сделать что бы форма выскакивала только один раз.
Мне дали скрипт но я не могу его применить к данной форме.
Denis Creative
Не знаю, это не мой скрипт. С этим лучше обратиться к фрилансерам или сюда https://stackoverflow.com/
Евгений
В HTML почти не разбираюсь, но взял за основу Ваш код, чтобы сделать всплывающее окно на главной странице у себя в офисе.
Благодаря комментариям в коде понял что куда. Супер получилось. Спасибо.
sterd
Скажите пожалуйста, а где именно прописать в коде свой Е_майл куда должно прейти уведомление, что клиент заполнил и отправил форму обратной связи.
Denis Creative
Вы правы, нужно будет добавить в статью код для файла mail.php .
А пока вы можете найти его в статье Уникальная форма обратной связи с ajax на php.
Sergio
А почему не отправляется ваша форма после нажатия кнопки “Subscribe” и не отображается “Блогодарственное окно”
Форма заявки и обратной связи для сайта
В этой статье вы узнаете, как создать всплывающую форму обратной связи для обычного сайта на html ина движке wordpress. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.
К примеру, посетитель зашел на ваш сайт, просмотрел необходимую ему информацию, вроде бы уже готов заказать ваш товар или услугу, но вот звонить в другой город и тратить большие деньги ему совсем не хочется. Вот в такие моменты и приходит на помощь всплывающая форма обратной связи.
Для чего нужна форма обратной связи на сайте?
Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.
Ещё один плюс в пользу формы обратной связи – возможность сохранить свой е-мейл в тайне от спамеров.
В современном мире спам, это настоящий бич, который заставляет прятать е-мейл от посторонних глаз за семью печатями. Спам боты круглосуточно рыскают по сайтам в поисках новых электронных адресов для отправки на них спама. Если он найдёт е-мейл владельца сайта, то на этот адрес начнут сыпаться кучи нежелательной корреспонденции. В скором времени, на нём будет невозможно найти действительно нужную почту.
В форме обратной связи такой проблемы нет. Для отправки сообщения нужно заполнить специальное поле для отсеивания ботов. Это позволяет полностью избавиться от нежелательных писем.
Для создания формы обратной связи можете воспользоваться инструкцией и исходным кодом по созданию формы обартной связи или использовать готовый платный скрипт наподобие JivoSite, CallBackKiller и прочие.
Такие формы используются в качестве виджета обратного звонка с сайта, когда клиент хочет что бы ему позвонили.
СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML
Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.
Вставляем в нужное место на сайте следующий код:
Онлайн заявка
По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.
Вставили код и получилось вот так:
Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):
Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.
Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.
Выглядит это вот так:
Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.
Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.
Подключаем скрипт перед закрывающимся тегом . Не забудьте поменять путь к файлу на свой.
Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.
Для этого перед закрывающимся тегом вставьте следующий скрипт:
Как работает этот скрипт?
- Производит проверку введенного e-mail.
- Указывает поля, с которыми будет работать.
- Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
- Обрабатывает введенную информации и инициирует отправку уведомления на почту.
- Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.
Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.
Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.
ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА
Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.
Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой. Далее создаем кнопку, при клике на которую будет вызываться форма.
И придаем ей стили.
Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».
Без этого всплывающая форма не будет открываться на сайте. После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне.
Для этого нужно заменить стили #inline со старых на новые.
В итоге получаем вот такую кнопку.
При нажатии на которую открывается всплывающее окно с обратной связью.
Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.
Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.
Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:
Скачать исходные файлы форм обратной связи.
Ключевые слова статьи: добавить форму обратной связи на сайт, верстка формы обратной связи, форма обратной связи html, форма обратной связи php, форма обратной связи почта, добавить форму обратной связи, css форма обратной связи, форма обратный звонок, виджет обратный звонок.
Размещенная на сайте информация не является публичной офертой в соответствии со ст. 437 ГК РФ
Всплывающая форма обратной связи для WordPress
Приветствую вас дорогой читатель, меня зовут Юлия Гусарь, я фронтенд разработчик и в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте WordPress.
1. Для чего нужна всплывающая форма обратной связи?
Прежде всего, всплывающая форма позволяет вам сэкономить место на вашем сайте, за счет чего вы можете разместить такую форму где-нибудь в шапке вашего сайта, в подвале, в сайдбаре, либо же в тексте самой страницы, либо сделать её плавающей кнопкой сбоку.
Во вторых, всплывающий эффект достаточно интересно выглядит;
В третьих, пользователи Вашего сайта могут получать доступ к такой форме обратной связи практически с любой страницы Вашего сайта.
Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:
Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.
Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.
Вы можете использовать любой другой плагин формы обратной связи который позволяет выполнять вывод этой формы с помощью шорт-кода.
2. Устанавливаем Contact Form 7
Давайте перейдем в административную часть нашего сайта, и займемся установкой данных плагинов.
Копируем название плагина Contact Form 7
Переходим в меню «Плагины» => «Добавить новый». Дальше вы можете либо скачать этот плагин с сайта разработчика, и затем загрузить его при помощи кнопки «Загрузить плагин»
Либо сразу в строку поиска ввести название плагина и нажать Enter.
Нажимаем на кнопку «Установить» и теперь активируем его.
3. Устанавливаем Easy FancyBox
Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox
4. Настраиваем всплывающее окно для формы
Для того чтобы получить доступ к настройкам плагина Easy FancyBox
Нам нужно перейти к стандартным настройкам медиафайлов WordPress.
Заходим в пункт меню «Настройки» => «Медиафайлы».
Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.
Нам необходимо снять эту галочку, так как если на Вашем сайте стоит какой-либо плагин, который так или иначе связан с созданием каких-то всплывающих эффектов, например «WooCommerсе», плагин галереи, плагин для открытия изображений во всплывающих окнах и т.д. то ваши изображения будут открываться во всплывающем окне дважды
Теперь нам необходимо установит галочку возле пункта «Inline content»
И теперь нажимаем на кнопку «Сохранить изменения».
В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.
5. Выводим форму обратной связи во всплывающее окно.
Теперь нам нужно определиться где мы будем выводить нашу форму обратной связи.
Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»
И в поле «Текст» вставляем следующий фрагмент кода:
Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.
Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться
6. Редактируем фрагмент кода вывода формы обратной связи.
Вставляем этот шоткод в код виджета вместо [ВАШ ШОТКОД] Вместо ОТПРАВИТЬ СООБЩЕНИЕ вы можете написать любой другой текст. Это текст высветится на кнопке, по щелчку на которой будет открываться всплывающая форма обратной связи. Сохраняем настройки, переходим на наш сайт, обновляем страниц, и нажимаем на нашу ссылку. Вот что у меня получилось:
По умолчанию стили этой формы не очень интересные, их можно будет потом исправить, так же можно будет отредактировать форму. Как редактировать форму, добавлять в нее новые поля, добавлять плэйсхолдеры, применять для нее различные стили – это я вам расскажу и покажу в отдельной статье. Вы моете добавить какой-то текст прямо перед нашей формой, либо после формы, для этого просто переходите обратно в виджеты и прямо перед шорт-кодом впишете какой-то текст. Этот текст Вы также можете обернуть в отдельный блок, либо в заголовок, либо как-то еще, и таким образом этот текст появится, перед Вашей формой обратной связи.
7. Стилизация кнопки
Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили:
Посмотрим, что у нас получилось:
Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.
Я надеюсь, что помогла Вам научится создавать формы обратной связи во всплывающем окне. Буду очень рада видеть ваши комментарии.
Также я подготовила для вас видеоинструкцию, в которой показываю как создать всплывающую форму на wordpress.
В следующей статье я расскажу вам как создавать более сложные формы обратной связи, добавлять на них простую и эффективную защиту от спама, дам вам несколько готовых заготовок для стилизации вашей формы обратной связи и еще много чего полезного и интересного.
Желаю вам успехов в создании такой формы и до встречи в следующих статьях.
С уважением Юлия Гусарь
Читайте также:
Подписаться на рассылку
131 комментарий
Юля, ты просто лучшая из всех тех кого я читал. Спасибо за такую классную информацию .-)
Спасибо, Вячеслав! Рада что данная статья была для Вас полезна!
Юлия, добрый день. Сделал все как у вас прописано, но после вставки стилей кнопки, кнопка не появилась. Тема Sydney на ВордПресс. В чем может быть проблема? Работаю в этой теме через Пейдж билдер.
Здравствуйте! Нужно более детально смотреть и анализировать Ваш сайт!
Да, доступно так то написано.
Все сделал кнопка появилась, настройки в фансибокс сменил
но при нажатии на Написать мне ничего не открывается
Здравствуйте! Если сайт тестовый, то можно попробовать сменить тему и посмотреть будет ли всплывающая форма работать с другой темой. Вероятнее всего Ваша тема конфликтует с плагином fancybox
Сделала, все по вашим рекомендациям, все работает спасибо.е
У меня есть картинка кнопки и я хочу, чтоб нажимая на эту кнопку появлялась всплывающее окно, пыталась вставить в коде вместо Отправить сообщения картинку, но у меня не получилось.
А у Вас сайт на локальном компьютере или на хостинге в интернете? Ссылку можете дать на страницу с этой кнопкой?
Хочу посмотреть что именно не получилось. Скорее всего либо путь к картинке указан не правильно или тег вставки картинки не так или не там прописан.
Не смогу помочь пока не увижу проблему 🙂
Спасибо большое за статью Юлия! Все получилось .Заранее прощу прощение за замечание , но у Вас дважды отобразился одинаковый текст и скрины на этой странице.
Вопрос : Как сделать , чтобы при нажатии на пункт меню появлялась всплывающая форма ?
Александр, спасибо Вам большое за замечание! Я исправила текст 🙂
По поводу Вашего вопроса. Для того чтобы сделать всплывающую форму по нажатию на меню нужно:
1) Перейти во «Внешний вид» => «Меню» и в самом верху нажать на кнопку «Настройки экрана»
2) В открывшейся панели нужно поставить галочку возле пункта «Классы CSS»
3) Создать новый пункт меню как произвольную ссылку и в качестве ссылки указать идентификатор всплывающей формы. Например: #contact_form_pop_up
4) При редактировании этого пункта меню в появившемся поле «Классы CSS» указать класс «fancybox-inline»
5) Сохранить и проверить 🙂
Юлия я все сделал как вы написали ( вот скриншоты: ), но при нажатии на пункт меню «Заказать звонок» у меня постоянно крутится индикатор загрузки Может я еще что то не сделал или нужно какой-нибудь код загрузить ? Заранее большое спасибо !
Юлия спасибо за ответ . Я всё сделал как вы написали (вот скриншоты:), но при нажатии на пункт меню «Заказать звонок» у меня постоянно крутится индикатор загрузки Может я ещё что то не сделал? Заранее большое спасибо !
Извините что не сразу ответила! Попробуйте в поле URL при создании ссылки указать не «http://#contact-form-pop-up» а просто «#contact-form-pop-up» .
Сам блок с идентификатором «contact-form-pop-up», в котором у Вас шорткод формы стоит, у Вас на этой же странице выводится? В какой части страницы Вы вставляли этот блок?
Добрый день Юлия. Я поставил URL «#contact-form-pop-up» теперь при нажатии на пункт меню «Заказать замер» на странице где есть кнопка с всплывающей формой выводится всплывающая форма http://joxi.ru/5md7W87tvMglZr , а на других страницах где нет кнопки с всплывающей формой выводится страница на которой я нахожусь при нажатии на кнопку «Заказать замер» http://joxi.ru/eAO74V7t4RVgLA Я вставлял шорт код для кнопки на главной странице , она там выводится при нажатии на кнопку и при нажатии на пункт меню . А на других выводится страница во всплывающей форме
Юлия я решил проблему. Вставил код на каждую страницу сайта и теперь на каждой странице открывается всплывающая форма . Большое спасибо за помощь !
Отлично! Рада что у Вас всё получилось! 🙂
Юлия у Вас баг при отправке комментариев. Если поставить галочку в чек боксе « Сообщите мне об ответе на мой комментарий по электронной почте» , то уведомления об ответе не приходят на указанный электронный адрес. Простите за замечание, но это профессиональное (т.к. я работаю тестировщиком)
Здравствуйте, Александр!
Спасибо, что сообщили мне! Там этот глюк недавно начался именно с адресами mail.ru. На почтовые ящик на яндекс и gmail оповещения доходили.
В последнее время mail.ru много обновлений у себя делает чтобы улучшить свои спам-фильтры. Я пока не придумала как решить эту проблему. Работаю над этим. В любом случае спасибо Вам 🙂
это конечно интересно, а как прикрепить шорткод к обычной ссылке в тексте, тупо шорткод не понимает, выводится также как и шорткод [………..], через php, но как, у меня сайт тогда нарушается, все ломается
Для вывода шорткода в шаблоне php используется специальная функция. Более подробно я об этом писала в этой статье: Вставка шоткода в шаблон WordPress или почему не работает шоткод в файлах темы?
вывод шоткода в шаблоне wordpress
Юлия подскажите в чем может быть проблема. Создал 4 формы с разными идентификаторами и текстом внутри, установил их на лендинг в начале, в середине и в конце на кнопку Заказать. Но почему-то во всех случаях открывается только одна нижняя форма (та, которую создавал первой). Думал закеширован браузер, но нет проверил и на других
Здравствуйте!
Для всплывающих окон тоже нужно задавать разные идентификаторы. Вот статья с решением данной проблемы:
Как сделать несколько всплывающих окон на сайте.
Доброго дня, Юлия!
А не подскажете как можно разместить эту выпадающую форму при нажатии на кнопку в меню?
Здравствуйте, Рубен! Думаю я напишу небольшую статью с инструкцией со скриншотами на этой неделе, так как Вы уже не первый кто об этом спрашивает 🙂
Если хотите отправлю ссылку Вам на почту?!
Здравствуйте, Юлия
Спасибо за отличный материал!
Вы написали « либо сделать её плавающей кнопкой сбоку.» , подскажите, пожалуйста, как это можно реализовать.
Заранее спасибо
Алексей, давайте я в ближайшее время напишу статью по этой теме и сообщу Вам о ней по e-mail?! Там в двух словах не объяснишь 🙂
Спасибо, буду ждать
Юлия, здравствуйте!
Спасибо Вам за замечательные статьи.
Подскажите, пожалуйста. Я сделал несколько форм обратной связи на одной странице. Все открываются как надо, каждая через свою ссылку. Однако, по бокам в форме появляются стрелки навигации, которые переключают все формы как галерею между собой, а это мне не нужно. Мне думалось, что можно отключить настройки навигации в меню управления плагином, но к сожалению, данная настройка не работает (флажок снял, но стрелки навигации так и остались). Уповаю на Вашу помощь.
Плагин: FancyBox. К сожалению, Easy FancyBox у меня не работает.
Заранее благодарю за ответ.
Здравствуйте, Владислав!
Пришлите, пожалуйста, ссылку на Ваш сайт. Если через настройки не получается скрыть стрелки, то можно попробовать это сделать при помощи CSS.
Почему-то не получилось ответить на Ваш комментарий. Публикую ссылку на сайт отдельно: evviva-russia.ru
Юлия, большое Вам спасибо в любом случае!
Разобрался в проблеме сам. Ошибка была в коде. Я изначально по ошибке добавил во все свои кнопки-шорткоды атрибут rel=»fancybox», поэтому все модальные окна с формами обратной связи автоматом группировались в галерею и при открытии листались между собой. Убрав данный атрибут, формы стали независимы друг от друга. Всё стало нормально.
Информация для Вас. Заметил, что не могу отвечать на комментарии в этой ветке. Текстовое окно, которое появляется после нажатия на кнопку «Ответить», куда необходимо писать комментарий, неактивно. Использую браузер Mozilla Firefox, все модули обновлены. В чём может быть проблема?
Для читателей (с Вашего позволения).
Нигде не нашёл информации о том, как вставить кнопку на форму обратной связи не в виде картинки, а в виде шорткода (кнопка-шорткод). Решил задачу следующим образом. У меня установлен плагин Shortcodes Ultimate (не реклама). В нём есть функция создания кнопки через шорткоды. Поскольку попытка сгруппировать два шорткода (шорткод кнопки и формы Contact Form 7 + класс FancyBox) ничего не дал, я пошёл по следующему пути (публикую код):
не получилось опубликовать код 🙁
Всё работает быстро и выглядит красиво.Что скажете о таком решении, Юлия? Очень интересно Ваше мнение. Спасибо.
Здравствуйте, Владислав! Вы молодец что сами во всём разобрались. Рада что у Вас всё получилось! Жаль что фрагмент кода не удалось опубликовать. Может скриншот получится прислать?
По поводу проблемы с ответом на комментарии. Спасибо что указали на этот глюк! Видимо он появился после очередного обновления. Обязательно исправлю.
Добрый день! Почему то после активаци не появились настройки в медиафайлах, не знаете, из-за чего это может быть?
А нет разобрался, все отлично работает. Ура ура ура. Спасибо большое, за информацию.
«В следующей статье я расскажу вам как создавать более сложные формы обратной связи, добавлять на них простую и эффективную защиту от спама, дам вам несколько готовых заготовок для стилизации вашей формы обратной связи и еще много чего полезного и интересного» — Большая просьба ссылку на следующую статью, очень хорошо пишете!)))
Юлия, тот самый кусочек кода. Кнопка не картинка, а шорткод, созданный при помощи Shortcodes Ultimate. При нажатии на неё во всплывающем окне выходит форма обратной связи. Что скажете о таком решении?
Здравствуйте, Владислав!
К сожалению картинка не отобразилась, поэтому я не совсем поняла о каком именно решении идёт речь. Можете мне эту картинку на почту выслать?
Здравствуйте. Очень понравилась статья. Как в принципе и весь сайт))) Очень легко, подробно и интересно написано. На своем сайте хочу добавить всплывающее окно, которое бы появлялось бы при нажатии на пункт верхнего меню. Но что-то никак не получается. Видела подобные вопросы в комментариях. Перечитала несколько раз. Но .. Код вставляла не в виджет, а на страницу. Если зайти на нее и нажать ссылку — то все появляется.. А так хотелось бы чтобы всплывающее окно работало по нажатию на кнопку меню.
Вопрос выше уже не актуален)) нашла вашу статью //impuls-web.ru/vsplyvayushhaya-forma-v-menyu-sajta-wordpress/ жаль не попалась статья сразу
Рада что Вы со всем разобрались! 🙂
Юль, спасибо, ты супер. Благодаря твоему сайту разобрался с всплывающим окном в меню. Нигде больше инфы не нашел. СПАСИБИЩЕЕЕЕЕЕЕЕЕ
Дима, и Вам спасибо за комментарий! Очень рада что данная информация была для Вас полезной 🙂
Спасибо. Уже три блога прочитала по такому же способу настройки формы обратной связи, но не получалось. Только у вас написано правильно.
Рада что статья была Вам полезной!
Здравствуйте. Полезная статья.
Но ей бы цены не было, если бы Вы рассказали как реализовать это решение без участия плагинов. А то во первых, не все плагины корректно работают из-за конфликта скриптов, а во вторых люди что-то делают, но не понимают что и как работает.
Здравствуйте! Спасибо за комментарий! При решении данной задачи без использования плагинов проблема конфликтов скриптов никуда не денется. Оно ведь всё равно на скриптах работать будет.
Спасибо Вам за ответ, Юлия. Но конфликт скриптов это конечно не главное. Важнее сам предмет. Возможность управлять кодом. А когда за дело берётся человек умеющий объяснять, то это очень ценно. К тому же у каждого опытного веб разработчика есть свои коронные приёмы. А пользователи выбирают лучшие решения. У Вас очень хорошие уроки, и было бы очень интересно увидеть и новые, в частности формы без плагинов. Потому что, они дают возможность изучить сам код php или js.
Здравствуйте! Спасибо! Я Вас поняла. Как нибудь сделаю статью на эту тему.
Здравствуйте, я все сделала как написано, но надпись «Отправить сообщение» не становится кнопкой. В чем причина?
Здравствуйте, Сауле! Нужно более детально смотреть Ваш сайт.
Здравствуйте, Юлия! делаю стилизацию кнопки, прописываю данные вами стили, но ничего не меняется… Может быть из того. что вы прописали что-то просто для справки написано?
Здравствуйте, Сергей!
В какой файл и в каком месте Вы прописываете данные стили? Если можно пришлите скриншот.
Здравствуйте, спасибо за статью, очень помогла!
Есть два вопроса. Первый — это шрифт. Он так и остался чермы, хотя все остальные стили применились. Может ли Фэнсибокс задавать свой родительский шрифт? Или он прописан где-то в другом месте?
И еще, подскажите, пожалуйста, как убрать из всплывающего окна название формы? У меня во всплывающем окне вверху есть надпись «Название формы» и нигде не могу найти, где ее убрать
Здравствуйте! Нужно смотреть Ваш сайт. Чтобы наглядно увидеть проблему.
Здравствуйте! Делал всплывающее окно, как в статье. Все работало прекрасно.
Вышел WordPress 4.7.2, всплывающее окно появляется, но вместо формы ее шорткод.
Пробовал откатить вордпресс на предыдущую версию, и плагин контакт форм 7 — не помогло.
Помогите пожалуйста!
Здравствуйте, Илья! Странное явление! А Вы сам шорткод где выводите? В виджете, на странице или в коде?
Подскажите пожалуста другие способы появления стиля кнопки, всё сделал как в статье не чего не поменялось
Здравствуйте! Вот статья с онлайн-генераторами стилей для кнопок //impuls-web.ru/tri-luchshih-onlajn-generatora-css-stilej-dlya-knopok/
Возможно этот вариант Вам больше подойдёт
Здравствуйте Юлия, спасибо Вам за Ваш труд, все очень доступно и понятно. Делаю Лендинг по Вашей статье //impuls-web.ru/sozdanie-landing-page-na-wordpress/ дошел до контакт формы, посмотрел видео тут, сделал вроде все как у Вас. Надпись на сайте появилась, но кнопкой не получилась. Ссылка есть, сама форма работает. Но стилизации не происходит, кэш очистил, все ровно не появилось. С чем это может быть связано? спасибо (p/s нужно было в файле в самом низу вставить код, без каких либо изменений (оставив даже Ваше описание к каждой строке?) Спасибо
Здравствуйте! Не совсем понятно, у вас в форме обратной связи нет кнопки? А стилизация не работает, так как скорее всего у вас отличаются классы элементов формы. Дайте ссылку на страницу, что бы я могла посмотреть.
Как привязать кнопку плагина Page Builder siteorigin к всплывающей форме обратной связи, рассмотренной в этом обучении. Думаю что можно их совместить, но не знаю как..
Не совсем понятен вопрос. Для того, что бы привязать всплывающую форму к кнопке на сайте, должна быть возможность задать кнопке fancybox-inline. Я в Page Builder вставляю кнопки ссылками, а потом их стилизую. Например, для всплывающей формы нужно вставить первую строку кода из фрагмента, который вставляется в виджет «Текст». А остальной код можно вставить вставить в любом месте на странице, в футере, сайдбаре, и т.д.
SiteOrigin Призыв к действию — URL назначения:#contact_form_pop_up
Классы кнопки:.fancybox-inline
Что касается встроить в меню:но это для примера, так у меня.
Идем в header.php (если понимаете что делаете) между вставляем:ВАШ ТЕКСТ
Юлия здравствуйте! Во первых спасибо за такую полезную и нужную статью.
А во вторых))) у меня возникла проблема, но не с самой формой, а именно со стилями. Мне нужно чтобы на странице выводилось несколько всплывающих форм. Одна размером побольше кнопка, а остальные кнопочки поменьше. Большая кнопка встала, сделала остальные кнопки меньшим размером, прописала стили, якоря изменила для них (вы писали в другой статье об этом) но вот сами кнопки не появляются(( только ссылка Заказать(( Как быть в чем может быть причина? Не подскажете?
Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker
В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.
Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:
- Они постоянно обновляются
- Профессиональные разработчики
- У инструментов есть интеграция друг с другом
- На русском языке
Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.
Установка Contact Form 7
В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.
Contact form 7 в поиске
После активации в меню появится новый раздел в WordPress, заходим и нажимаем Добавить новую, появится стандартная текстовая область с уже заполненными строками.
Стандартный код
Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.
Заготовка под обратную связь
Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.
Пример создания поля Имя
- Выбираем Текст
- Если обязательно для заполнения то отмечаем галочкой
- Уникальный идентификатор, оставляем без изменения
- Значение, которое отображается по умолчанию, что нужно ввести
- Если отметить чекбокс, то название поля будет внутри
- Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
- Находим вставить тег
Переместил получившийся шорткод между тегами label, должно получится так.
Код поле добавления имени
Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.
Панель инструментов
Делаем по аналогии, что получилось.
Готовый код
Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.
Сохранение настроек
Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.
Вкладка Письмо
- Вкладка письмо
- Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
- Тема отображается когда письмо придёт на почту
- Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
- В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress
Нажимаем внизу сохранить, и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название, копируем в отдельный документ шорткод и нажимаем еще раз на Сохранить.
Копируем шорткод
Первый этап преодолели, можете добавлять свои поля, их в панели много, только не забывайте потом прописывать во вкладке Письмо.
Установка Popup Maker
Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.
Popup Maker
Переходим в левой панели в одноименный раздел и нажимаем Добавить всплывающее окно. Заполняем имя всплывающего окна, название можно не прописывать, иначе оно появится на сайте. Помещаем в текстовое поле шорткод скопированный после создания формы обратной связи.
Название и добавление кода
Спускаемся ниже и видим меню настройки всплывающего окна. Выбираем пункт Триггеры, находим кнопку Добавить новый.
Триггер
Обычно обратная связь появляется по нажатию кнопки, поэтому из списка выбираем параметр Открыть и на Добавить. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.
Появится новое окно, задаем класс обязательно с точкой, введу .osnova. Для триггера основанного на нажатии куки не нужны, выбираем Добавить или обновить если создаете не в первый раз.
Прописываем класс
Походите по другим разделам, настройте внешний вид, анимацию и другие параметры появления, в статье разбирать не будем.
Остальные параметры
Не забываем нажать на опубликовать.
Публикуем
После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.
В запись загрузил изображение с помощью медиафалов.
Редактор WordPress
Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.
Добавляем class к элементу
Как вы понимаете класс можно прописать к любой части текста к ссылке, картинке, целому абзацу и т.д.
Переходим обратно в Визуально и нажимаем предварительный просмотр.
Вкладка визуально
Открывается новая страница в браузере.
Предварительный просмотр
Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.
Рабочая всплывающая форма
Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.
В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать «Редактировать как HTML», а дальше по старой схеме.
Редактирование HTML в Gutenberg
Для более простого понимания процесса советую посмотреть авторское пошаговое видео.
Плагином Easy Fancy box в форме ссылки
В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.
Fancy box
Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.
Настройки fancybox
Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.
Вставка кода в виджет
По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.
Пример исполнения
Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.
Popup в Elementor по кнопке
Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.
Вносим ID в тригеры
Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.
Выводим параметры элемента в elementor
Переходим в предвариетльный просмотр, кликаем по кнопке , появляется всплывающее окно с обратной связью.
Показ формы связи через elementor
Открывается, заполняем обратную связь и смотрим приходит ли письмо на почту. Конечно, во всех разобранных методах нужны визуальные настройки формы, но при базовых знаниях CSS сделать не составит труда.
На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:
- Устанавливаем оба плагина WordPress
- В Contact form 7 создаем новую форму, настраиваем ее по инструкции в новый попап Popupmaker
- Настраиваем отображение окна
- Привязываем класс к любому элементы на сайте
- Проверяем работу
Наконец решили проблему как создать всплывающую форму обратной связи на WordPress, пишите свои вопросы в комментариях, удачи.
Появился еще один плагин всплывающих окон My Popup WordPress. Читайте его подробный обзор.