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

Содержание
  1. Делаем форму обратной связи WordPress: плагин Contact Form 7, функции в темах и самописный код
  2. Форма обратной связи WordPress плагином Contact Form 7
  3. Добавить капчу reCaptcha
  4. Создание формы
  5. Настройка отправки письма
  6. Вставка формы на сайт
  7. Сделать поля горизонтально в строчку
  8. Всплывающая форма обратной связи
  9. Как добавить в elementor
  10. Используем настройку темы
  11. Feedback через виджеты
  12. Обратная связь без плагина
  13. Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker
  14. Установка Contact Form 7
  15. Установка Popup Maker
  16. Плагином Easy Fancy box в форме ссылки
  17. Popup в Elementor по кнопке
  18. Как создается всплывающая форма обратной связи WordPress
  19. Шаг 1. Установите плагины WPForms и OptinMonster
  20. Шаг 2. Создайте контактную форму, используя WPForms
  21. Шаг 3. Создание всплывающего окна WordPress с помощью OptinMonster
  22. Do you have any questions?
  23. Шаг 4. Публикация всплывающей формы
  24. Шаг 5. Добавление ссылки для запуска всплывающей контактной формы
  25. Всплывающая форма обратной связи для WordPress
  26. 1. Для чего нужна всплывающая форма обратной связи?
  27. 2. Устанавливаем Contact Form 7
  28. 3. Устанавливаем Easy FancyBox
  29. 4. Настраиваем всплывающее окно для формы
  30. 5. Выводим форму обратной связи во всплывающее окно.
  31. 6. Редактируем фрагмент кода вывода формы обратной связи.
  32. 7. Стилизация кнопки
  33. Читайте также:
  34. Подписаться на рассылку
  35. 131 комментарий

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

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

Форма обратной связи WordPress плагином Contact Form 7

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

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

Добавить капчу reCaptcha

Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.

Настроим reCaptcha от гугла, заходим в раздел интеграция, и нажимаем на ссылку google.com/recaptcha. Должны иметь аккаунт в Google.

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

Копируем данные для капчи, оба ключа.

Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.

Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.

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

Заходим в настройки и создаем новую форму. Стираем стандартную разметку.

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

Появиться всплывающее окно, настраиваем по потребностям.

Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.

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

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

Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] помещаем под остальными элементами.

Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.

В результате получился такой код.

Настройка отправки письма

Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.

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

Вставка формы на сайт

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

Идем в любую запись и вставляем.

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

Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.

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

Сделать поля горизонтально в строчку

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

Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.

Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.

Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.

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

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

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

Как добавить в elementor

Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.

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

Используем настройку темы

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

Feedback через виджеты

Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.

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

Обратная связь без плагина

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

Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали тут.

Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.

В гутенберге в любой текстовый блок вставляете строку.

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

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

Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.

Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.

Теперь загружаем вторую часть кода в function.php.

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

Такое письмо приходит на почту с обратной связи.

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

Источник

Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

Читайте также:  Как сделать пельмени в мультиварке редмонд

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

Установка Contact Form 7

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

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

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

Переместил получившийся шорткод между тегами label, должно получится так.

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

Делаем по аналогии, что получилось.

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

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

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

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

Установка Popup Maker

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

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

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

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

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

Не забываем нажать на опубликовать.

В запись загрузил изображение с помощью медиафалов.

Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.

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

Переходим обратно в Визуально и нажимаем предварительный просмотр.

Открывается новая страница в браузере.

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

Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.

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

Для более простого понимания процесса советую посмотреть авторское пошаговое видео.

Плагином Easy Fancy box в форме ссылки

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

Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.

Настройки fancybox

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

Вставка кода в виджет

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

Пример исполнения

Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

Показ формы связи через elementor

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

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

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

Источник

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

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

Для создания формы потребуется:

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

Установите и активирйте оба плагина. Для активации OptinMonster необходимо создать учетную запись в системе OptinMonster.

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

На следующей странице выберите шаблон Simple contact form и задайте ей имя.

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

Сохраните внесенные изменения. После этого созданная форма будет готова к работе. Затем перейдите на вкладку Embed и скопируйте код формы.

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

Чтобы создать модальное всплывающее окно, в административной панели WordPress перейдите в раздел OptinMonster > Create New Campaign.

На следующей странице введите название кампании.

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

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

Do you have any questions?

Want to ask more about our service? Simply fill out the form and we’ll get back to you as soon as possible.

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

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

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

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

Создайте новую страницу в WordPress. Затем перейдите в текстовый редактор WordPress и добавьте приведенный ниже код. Не забудьте вставить ваш ключ.

Источник

Всплывающая форма обратной связи для 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) Сохранить и проверить 🙂

Отлично! Рада что у Вас всё получилось! 🙂

Здравствуйте, Александр!
Спасибо, что сообщили мне! Там этот глюк недавно начался именно с адресами mail.ru. На почтовые ящик на яндекс и gmail оповещения доходили.
В последнее время mail.ru много обновлений у себя делает чтобы улучшить свои спам-фильтры. Я пока не придумала как решить эту проблему. Работаю над этим. В любом случае спасибо Вам 🙂

Для вывода шорткода в шаблоне php используется специальная функция. Более подробно я об этом писала в этой статье: Вставка шоткода в шаблон WordPress или почему не работает шоткод в файлах темы?
вывод шоткода в шаблоне wordpress

Юлия подскажите в чем может быть проблема. Создал 4 формы с разными идентификаторами и текстом внутри, установил их на лендинг в начале, в середине и в конце на кнопку Заказать. Но почему-то во всех случаях открывается только одна нижняя форма (та, которую создавал первой). Думал закеширован браузер, но нет проверил и на других

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

Читайте также:  Как сделать пену для торта пивная кружка

А не подскажете как можно разместить эту выпадающую форму при нажатии на кнопку в меню?

Здравствуйте, Рубен! Думаю я напишу небольшую статью с инструкцией со скриншотами на этой неделе, так как Вы уже не первый кто об этом спрашивает 🙂
Если хотите отправлю ссылку Вам на почту?!

Алексей, давайте я в ближайшее время напишу статью по этой теме и сообщу Вам о ней по e-mail?! Там в двух словах не объяснишь 🙂

Спасибо, буду ждать

Юлия, здравствуйте!

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

Плагин: FancyBox. К сожалению, Easy FancyBox у меня не работает.

Здравствуйте, Владислав!
Пришлите, пожалуйста, ссылку на Ваш сайт. Если через настройки не получается скрыть стрелки, то можно попробовать это сделать при помощи CSS.

Почему-то не получилось ответить на Ваш комментарий. Публикую ссылку на сайт отдельно: evviva-russia.ru

Всё работает быстро и выглядит красиво.Что скажете о таком решении, Юлия? Очень интересно Ваше мнение. Спасибо.

Здравствуйте, Владислав! Вы молодец что сами во всём разобрались. Рада что у Вас всё получилось! Жаль что фрагмент кода не удалось опубликовать. Может скриншот получится прислать?
По поводу проблемы с ответом на комментарии. Спасибо что указали на этот глюк! Видимо он появился после очередного обновления. Обязательно исправлю.

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

А нет разобрался, все отлично работает. Ура ура ура. Спасибо большое, за информацию.

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

Юлия, тот самый кусочек кода. Кнопка не картинка, а шорткод, созданный при помощи 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 нужно было в файле в самом низу вставить код, без каких либо изменений (оставив даже Ваше описание к каждой строке?) Спасибо

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

Не совсем понятен вопрос. Для того, что бы привязать всплывающую форму к кнопке на сайте, должна быть возможность задать кнопке fancybox-inline. Я в Page Builder вставляю кнопки ссылками, а потом их стилизую. Например, для всплывающей формы нужно вставить первую строку кода из фрагмента, который вставляется в виджет «Текст». А остальной код можно вставить вставить в любом месте на странице, в футере, сайдбаре, и т.д.

SiteOrigin Призыв к действию — URL назначения:#contact_form_pop_up
Классы кнопки:.fancybox-inline
Что касается встроить в меню:но это для примера, так у меня.
Идем в header.php (если понимаете что делаете) между вставляем:ВАШ ТЕКСТ

Юлия здравствуйте! Во первых спасибо за такую полезную и нужную статью.

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

[contact-form-7 title=»заказать газгольдер»]

Источник

Оцените статью
Как сделать своими руками
Adblock
detector