как вставить форму подписки в сайт на elementor
Как вставить форму подписки во все записи WordPress
Инструменты WordPress и сторонние плагины, позволяют упростить и даже автоматизировать размещение формы подписки, а также разнообразить места их размещения. Как вставить форму подписки во все записи WordPress, а также на страницах и виджетах сайта пойдет речь в этой статье.
Вступление
Организация новостной или тематической рассылки сайта созданного на WordPress напрямую связана с созданием собственной базы подписчиков, а значит с размещением на сайте формы подписки. Форма подписки обеспечит возможность посетителя сайта подписаться на анонсы новых статей или тематические рассылки по событиям на сайте.
Инструменты WordPress и сторонние плагины, позволяют упростить и даже автоматизировать размещение формы подписки, а также разнообразить места их размещения. Разберем, как вставить форму подписки во все записи WordPress, а также на страницах и виджетах сайта.
Рассылка плагином WordPress
Прежде всего, определитесь, со способом рассылки писем или с каким почтовым сервисом вы будете работать. Если ожидается не много подписчиков и особенно не важно, внешнее оформление подписки, можно ограничиться инструментами рассылки WordPress. Для этого достаточно установить системный плагин WordPress под названием JetPack и активировать его модуль «Post by Email». Он включит рассылку новостей по почте и создаст форму подписки.
У плагина JetPack более 30 функциональных модулей. Форма подписки у этого плагина простая, хотя и адаптирована под любой шаблон. Стоит в очередной раз отметить, что плагин JetPack, максимально адаптирован к WordPress и форму подписки можно не только разместить непосредственно в статьях, но и настроить появление блоков подписки в отдельных разделах. Например, в статью можно вставить форму подписки JetPack в виде шорткода:
Кроме это, с этим плагином возможность подписки появляется в форме комментирования и появится виджет с подпиской JeatPack. Подробно об использовании подписки плагином JetPack читать отдельную статью ТУТ.
Почтовые плагины WordPress
Чтобы создать более красочную форму подписки можно воспользоваться одним из почтовых плагинов WordPress. У них тоже есть как достоинства, так и недостатки. Основной недостаток, конфликты с серверами хостингов. Подробно можно почитать в отдельных статьях: Плагин рассылки MailPoet Newsletters и Плагин MailPress для почтовой рассылки WordPress.
FeedBurner
Следующий вариант рассылки это сервис Feedburner. У него тоже масса недостатков, хотя инерция его былой популярности и бесплатность оставляют его «на плаву».
Сторонние почтовые сервисы
Если в ваших планах работа с подписчиками занимает не последнее место, и вы планируете вести прямой диалог с клиентами или посетителями, вам нужен сторонний почтовый сервис. Об одном таком, под названием SmartResponder я недавно писал статью: Рассылка писем на сервисе SmartResponder.
Вы уже знаете, что сервис SmartResponder прекратил свое существование с ноября 2016 года. Как альтернативу осваиваем сервис рассылки с отличными параметрами Free рассылки (2000 писем в месяц бесплатно), под названием MailChimp.
Все почтовые сервисы, включая FeedBurner, дают код формы подписки. Вашап задача, разместить код формы подписки на страницы сайта WordPress.
Вставить форму подписки во все записи WordPress
Условия задачи: На почтовом сервисе создаем и получаем форму подписки. Это код. Например:
Код формы подписки FeedBurner
Код формы подписки FeedBurner
Код формы подписки SmartResponder
Код формы подписки SmartResponder
Пора вставить форму подписки во все записи. Вставляем формы сторонних почтовиков.
Размещаем форму подписки в виджете WordPress
Это практичный способ, разместить форму подписки, сразу на все страницы сайта. В наборе виджетов, есть стандартный виджет «Текст HTML». Просто вставляете в него код формы подписки и сохраняете виджет.
Виджет с подпиской
При установке JeatPack вы можете управлять показом виджетов на нужных страницах. Можно создать отдельную страницу с рассказом о подписке и в виджете, который будет показываться только на этой странице, разместите форму подписки. Для управления виджетами есть и другие плагины, например: Плагин показа виджетов Restrict Widgets или AH Display Widgets.
Размещаем форму подписки вручную
Просто и эффективно. При написании статьи в режиме редактора «Текст» вставляете код в любое место статьи или страницы.
Форма подписки в статье
Размещаем форму подписки автоматом во все статьи
Если нужно вставить код подписки на все существующие, и все будущие статьи сайта используем следующие плагины.
Плагин Quick AdSense
Неожиданное применение плагина Quick AdSense, который по идее, предназначен для размещения рекламы. Он прекрасно работает и с кодами формы подписки.
Использование плагина Quick AdSens для вставки подписки
Плагин Header and Footer
Простой и понятный плагин. Ставите, активируете и в настройках плагина в поле «Вставить в конец статьи» вставляем код формы подписки. Страница плагина: https://ru.wordpress.org/plugins/header-footer
Плагин Global Content Blocks
Это объемный плагин, который позволяет не автоматом, а в ручном полуавтоматическом режиме, вставлять любые коды в любое место публикуемых постов, страниц. (страница плагина: https://ru.wordpress.org/plugins/global-content-blocks/ )
Размещаем подписку в модальном окне
Можно разместить подписку во всплывающем модальном окне. Для этого есть хороший плагин, хороший, потому что его постоянно обновляют и он бесплатный, Scroll Triggered Box ( https://wordpress.org/plugins/dreamgrow-scroll-triggered-box/ ). Этот плагин позволяет создавать размещать в модальном окне любую информацию, в том числе форму подписки. Появляется окно в правом нижнем углу страницы при прокручивании 65% всей страницы. Всё настраивается.
Плагин WP Insert Code
Делаю ревизию статьи и хочу добавить еще один способ вставить форму подписки СРАЗУ во все статьи сайта. Это простой плагин WP Insert Code (плагин долго не обновлялся).
Ставим плагин и получаем в его настройках 4 поля для вставки любого скрипта, в том числе формы подписки. Это:
Не сомневаясь, что вы знаете другие способы разместить форму подписки на все статьи сайта.
Еще один вариант вставить форму подписки во все записи, виджеты и даже всплывающие сайдбары сайта. Это форма подписки с использованием сервиса MailMunch.
Как подключить форму подписки к любому сервису рассылки
Обычно форма подписки уже имеет интеграции с несколькими сервисами, например, MailChimp, MailPoet, GetResponse итд.
Или сервис рассылки имеет раздел для создания формы подписки к своим Подписным листам или Сериям автоматических писем.
Если ваша форма подписки не имеет интеграции с вашим сервисом рассылки, или вам не нравится форма подписки, которую вы можете создать в вашем сервисе рассылки, то эта статья для вас.
Читайте дальше, и вы узнаете, как подключить вашу форму подписки к сервису рассылки через сервис Zapier.
Все эти сервисы работают примерно одинаково, в этой статье я буду использовать сервис Zapier, но вы можете использовать другой сервис, эта инструкция подходит для других сервисов.
Что такое Zapier
Zapier — это сервис-конструктор, который связывает между собой несколько приложений. Он проверяет триггеры в приложениях, которые вы выбрали, и если триггер сработал, совершает выбранное действие или серию действий.
Например, если Zapier видит, что сработал триггер в форме подписки на вашем сайте, он собирает данные из этой формы и передает их в сервис е-мейл рассылки.
Аналоги Zapier: Automate.io, IFTTT (IF This Then That).
Что нужно для работы Zapier
Чтобы подключить форму подписки к сервису рассылки через Zapier, нужно чтобы ваша форма подписки поддерживала функцию Веб-хуков (WebHooks).
Обычно эта функция находится в платных версиях плагинов форм:
Но есть бесплатные плагины для работы с Веб-хуками, например, плагин интеграции Contact Form 7 с Zapier.
В этом примере я буду использовать форму Elementor Pro, но вы можете использовать любую другую форму, принцип работы аналогичный.
Принцип работы Zapier
Через Zapier вы можете подключить друг к другу более 2.000 сервисов. По сути это небольшие программы, которые работают через API этих сервисов.
Когда происходит нужное событие, выбранное приложение на Zapier передает выбраному сервису какую-то команду через API этого сервиса.
В этом примере я буду подключать форму Элементора к сервису рассылки SendFox. Вы можете подключить вашу форму подписки к любому сервису, приложение для которого есть в Zapier. Например, MailChimp, BenchmarkEmails, MailerLite, SendPulse, и так далее, всего более 2.000 приложений.
Схематично такое подключение выглядит так:
В вашем случае вы можете настроить другое действие, или несколько действий.
1. Создайте триггер на событие в конструкторе Zapier
1. Кликните «Make a Zap!». Zap — это действие, которое вы хотите выполнять в ответ на какое-то событие. То есть, «если произошло А, то сделать Б».
2. Выберите приложение для получения данных из формы подписки. Наберите webhooks в строке поиска. Дайте имя Запу.
3. Выберите триггер. В поле Choose Trigger Event выберите триггер Catch Hook.
4. Скопируйте хук. Никаких настроек не требуется.
Нажмите Continue. Дальше нужно настроить форму подписки, после этого протестировать эту (первую) часть Запа.
Настройки в форме подписки
1. Настройте форму подписки на сайте. Зайдите в настройки формы подписки на вашем сайте, и выберите действие после нажатия.
2. Добавьте вебхук из Zapier. Откройте вкладку Вебхук и добавьте вебхук из Запиера.
3. Сохраните форму. Перейдите на страницу с формой, заполните поля и нажмите Отправить.
4. Протестируйте хук. Вернитесь на Zapier, нажмите одну из кнопок, чтобы Zapier протестировал хук.
Zapier должен получить вебхук и подтвердить работу первой части Запа.
Hook A — это полученные данные из формы подписки.
2. Настройте действие, которое выполняет Zapier
В этой части вы создадите действие, которое будет выполняться после триггера. Триггер — это событие в форме подписки.
1. Найдите SendFox. Найдите SendFox в списке приложений.
2. Выберите действие Create Contact. Выберите действие Добавить контакт и нажмите Continue.
3. Подключите аккаунт сервиса рассылки. Добавьте аккаунт и нажмите Continue.
4. Подберите данные из формы и выберите Список подписки.
5. Передайте данные в сервис рассылки.
Нажмите одну из кнопок.
6. Включите Zap. Если данные успешно передались, вы можете активировать Zap.
Все готово! Теперь перейдите на ваш сайт, заполните форму подписки и проверьте, что данные приходят на сервис рассылки.
Заключение
Сервисы автоматизации могут не только передавать данные из формы подписки на сервис рассылки, но и делать много разных других вещей.
Например, если температура в вашем городе поднялась выше 20 градусов, или произошло событие в Гугл Календаре, то вы получаете сообщение в мессенджер. Если вы опубликовали пост на Вордпресс сайте, то опубликовать этот пост на Фейсбуке.
Когда посетитель регистрируется на сайте, создать новую строку в Google Spreadsheet, пример настройки:
Я использую сервис SendFox потому что он продается с Life-time лицензией за 50$ за каждые 5.000 подписчиков с неограниченным количеством е-мейлов.
Надеюсь, статья была полезна. Оставляйте комментарии.
Формы — виджет Elementor Pro
Наверно не один сайт не может обойтись без формы обратной связи, формы подписки, формы заказа обратного звонка или какого либо запроса. Конечно, возможно вы используете только телефонный канал связи и социальные сети, но все же, контактные формы всегда актуальны.
При создании сайта, а особенно через конструкторы сайтов очень важно иметь форму обратной связи, не просто форму, а целый конструктор форм. Ведь согласитесь, что у всех формы разные не только дизайном, но и количеством и назначением полей. И для всего этого в конструкторе сайта Elementor внедрен виджет Формы.
Виджет «Формы» это специальный виджет который добавляет на ваш сайт (в контентную область секции) форму связи в которой может быть неограниченное кол-во полей разных типов и назначений. Данный виджет очень функциональный, имеет множество настроек и самое главное достаточное количество различных типов полей.
На рисунке показано форма сразу после размещения ее. Вполне сразу рабочая форма обратной связи. В настройках виджета мы сразу видим знакомые уже нам элементы настроек. В данном случаи это настройки для полей формы. Рассмотрим все настройки виджета формы.
Содержимое
— Поля формы
— Кнопка отправить
— Действие после отправки
— Дополнительные опции
Стиль
— Форма
— Поле
— Кнопка
Формы — виджет Elementor Pro: 102 комментария
Виджет красиво выглядит, однако показалось, что лишь для несложных форм больше подойдет. Вот сейчас использую ucalc.pro и сравниваю их по функционалу. Основное конечно то же самое, но некоторых фишек не хватает.
А что вы хотели? Сравнивать сервис и виджет это тоже самое что говорить «Сижу сравниваю Автомойку с Кёрхером….» Конечно сервис это хорошо и в некоторых случаях оправдан. Но когда нужны свои формы, со своим дизайном, внедрением в сайт итд итп, то тут без подобного виджета просто не обойтись.
Конечно если выше это не банальная реклама… скрытая под таким соусом 🙂
Вот-вот, это как некоторые сравнивают сервисы и плагины, плагины и скрипты и тому подобное. Хотя, я тоже сравнивал когда-то)) Потом лишь понял, что у каждого свои плюсы и минусы. Использовал ContactForm7 всегда, потом перебрался на stepform.io. Начал сравнивать, в итоге плюнул и понял что не сравниваемое. Под разные задачи инструменты. Это как например на Wix и на WordPress сайты сравнивать.
Можно ли как-нибудь связать форму из элементор про и woocommerce? заполнил форму элементор и появился заказ в вукоммерс?
Можно. Если организовать мост между формой элементор и вукомерс. Должно быть какое то апи. Т.е нужна програмная доработка. А так есть плагины, например https://ru.wordpress.org/plugins/buy-one-click-woocommerce/
Посоветуйте какой мост и как сделать,пожалуйста )я в этом просто только разбираюсь
Если вы не программист, то ничего не получится. Выше дал ссылку на плагин, его и используйте.
Так же вы можете написать в поддержку elementor так как данные плагины это платная версия конструктора (если у вас не варез с вирусом) и они вам по любому ответят о том, будет это сделано или нет.
Можно ли редактировать текст сообщения об успешной отправки формы или об ошибке?
Да. В грпуппе настроек Дополнительные опции, включить Пользовательские сообщения. Тогда появится возможность задать текст для формы связи.
Благодарю. Сразу не заметил)
Заметил косячок, если в группе настроек Email, в графе Email отправителя прописать не конкретный адрес, а шорт-код [field (то есть чтобы на почту приходило письмо от того адреса, который будет введён пользователем в этом пункте), то почтовые адреса Mail.ru не поддерживаются. То есть если пользователь указал свою почту с сервиса Mail.ru, например, primer@mail.ru, то письма попросту не приходят. С адресами на Яндекс и Гугл проблем нет.
Скорей всего срабатывает защита на спам. Отправитель один, заголовок другой итд. Скорей всего вам нужно воспользоваться настройкой ниже «Ответить на»
Здравствуйте! А как поменять размер чекаутов, а то по-умолчанию они маленькие.
Здравствуйте. Чекбоксы стандартные и их не стоит менять ведь каждое устройство отображает их по своемому. Можно конечно изменить, но нужно все оформлять стилями.
Здравствуйте! В редактировании формы не появляются настройки где я могу отредактировать кнопку и поля формы (их содежржимое и тип). Появляется возможность только менять отступы, фон, адаптивность и т.п. В чем омжет быть причина и как мне выйти все-таки на редактирование формы.
Спасибо.
Если элементор был вместе с темой, то у вас бесплатная версия конструктора и там нет виджета формы, а если есть то упрощенный, наверно это как раз ваш случай.
Так же возможно у вас это даже не виджет, а плагин, который просто напросто редактируется не из элементора, а просто как другие плагины.
Спасибо за ответ. У нас не PRO версия, наверное в этом проблема.
В версии не про, вообще нет виджета формы. Поэтому смотрите как реализован вывод. Если это из темы, то смотреть настройки темы, если это шокодом, то скорей всего плагин форм, который найдете с списке плагинов.
Здравствуйте, у меня elementor pro, можно ли сделать так, что бы создать несколько форм на отдельно странице, а отправку сделать одной кнопкой в низу всей странице? ну как анкету заполнить.
Например:
Текст
Форма
Виджет
Форма
Виджет
Кнопка отправки ( что бы обе формы отправились одной кнопкой )
Есть такая возможность? и как это сделать?
Спасибо за внимание
Здравствуйте. Такой возможности нет. Если только написать вручную js скрипт, который будет отправлять по очереди.
Здравствуйте! А если поля формы имеют type HTML, то шорткода у них нет. Каким образом можно осуществить отправку данных этих полей на email?
Для интеграции с CRM были нужны определенные значения атрибута name у инпутов. Поэтому они были сделаны через HTML.
Если нужны просто данные введенное в поле, то можно через js копировать данные в поле созданное в форме штатным способом, но при этом скрытое стилями.
Здравствуйте, создал слайд и поставил в навигации стрелки, но вместо стрелок почему то отображается прямоугольники, с чем это может быть связано и как сделать стрелки?
Вот фото этих квадратов http://joxi.ru/V2Vj0vJHdPo3Y2
Здравствуйте. В виджете формы нет никаких слайдов.
Это уже не про виджет формы, а про виджет слайды
В статье про виджет слайды и нужно задавать вопрос. Иконки пропадают в нескольких случаях это или конфликт с темой или что то сломали самостоятельно. У меня много сайтов на элементоре про (офф версия) и проблем таких не было никогда.
Можно сделать калькулятор в Елементоре? если нет, то подскажите нормальный плагин калькулятора
Нет. У элементора нет задачи делать калькуляторы. Вы можете выбрать любой плагин калькулятора https://ru.wordpress.org/plugins/tags/calculator/
Здравствуйте! Можно ли сделать, чтобы заявки приходили под номерами (в письме отображался номер заявки по порядку заявок)
Здравствуйте. Нет, нельзя. В виджете формы нет учета отправляемых форм.
здравствуйте, есть возможность кнопку «отправить» разместить справа или слева, а не внизу. Спасибо
Здравствуйте. Да, конечно можно. Об этом выше в описании виджета и написано
Выравнивание — выравнивание кнопки (Лево, Центр, Право, По ширине).
Здравствуйте. Как можно считать данные из полей формы до нажатия кнопки «отправить», что бы вывести для пользователя сумму заказа? PHP отключен (пытался выводить через html поле), уже долго голову ломаю, подскажите пожалуйста кто сталкивался.
Здравствуйте, а где в Елементоре искать список тех, кто эту форму заполнял?
Здравствуйте. Нигде, только письмо на почту. В данном виджете не реализована запись в бд вордпреса.
Здравствуйте. Я «чайник», и ломаю голову, как настроить форму только на отправку сообщения на свою почту… Может быть подскажете, что куда пипать? Всё вроде перерыл, но ничего подобного не нашёл… ПАМАГИТЕ.
Здравствуйте. Чем именно помочь? Есть виджет, есть его параметры. Что именно не нашли и не понятно. Пишите подробнее.
Здравствуйте, подскажите как в поле телефон сделать шаблоне заполнение, в виде
+7 (___) ___-__-__
Я не знаю как настроить именно только на сообщение. Что, и в каком поле прописывать?
Может быть, вы поможете с подробной пошаговой инструкцией? Если конечно не трудно…
Шаблонное заполнение
+7 (___) ___-__-__
По умолчанию нельзя использовать маску. Необходимо подключать маску вручную через js библиотеку.
Подскажите пожалуйста как это осуществить?
В рамках комментариев это невозможно расписать. Воспользуйтесь обычными статьями по добавлению маски к полю. Думаю любая пойдет с учетом того, что у вас вордпресс. Или попробовать воспользоваться плагинами, например https://ru.wordpress.org/plugins/masks-form-fields/
Подскажите пожалуйста можно ли как то сделать последовательность полей?
Например: Выбрав в выпадающем меню пункт автомобили — появлялось в другом выпадающем меню список автомобилей, выбрав дом — появлялся список домов. Как можно это осуществить?
Стандартными методами нельзя. Но можно написать js код, который все будет обрабатывать. Соответственно нужны знания. И совет, смотрите именно в сторону js кода, а не плагинов форм итд. Если осилите простые коды в js, то жизнь с формами станет легче. Можно делать любые калькуляторы, условия, заполнения итд и все это поверх форм elementor
Здравствуйте. Подскажите пожалуйста как добавить в форму utm метки. Ну что бы письмо приходило на майл и было видно из какого источника заказчик перешел на сайт
Здравствуйте.
Если в поле формы указан файл, который можно приложить к сообщению, то в письме он представлен в виде ссылки на файл, который лежит на хостинге.
Можно ли сделать так, чтобы файл был в явном виде приложен к письму?
Здравствуйте. Без смены виджета формы, добиться того что желаете не получится.
Здравствуйте. После отправки формы на сайте, сообщения на почту приходят, но отсутствует сам текст сообщения. В чем может быть проблема?
Выглядит это так:
Message:
Date: 11.03.2020
Time: 12:33
Page URL: 123
User Agent: 123
Remote IP: 123
Powered by: Elementor
Здравствуйте. Посмотрите в свойствах виджета, в группе свойств Email, что там указано. Как минимум должно быть указано [all-fields]
Возможно вы просто стерли.
Здравствуйте. Подскажи как можно сделать авторизацию пользователей? (тоесть при заполнении например емайл, необходимо подтвердить емайл и что бы было перенаправление на другую страницу)
Здравствуйте. У данного виджета нет такой возможности, виджет не резиновый!!
Точнее сделать то можно, что бы и письмо отправлял и прочее, но авторизации не будет. Но думаю данный плагин вам поможет https://ru.wordpress.org/plugins/user-verification/
Если нужно именно с данной формой, то можно сделать подобие проверки
Т.е сначала формируем письмо с данными, но отправляем все это клиенту и подставляем в ссылку подтверждения. А вот ссылка подтверждения идет уже на страницу в которой заполняются поля по ссылке и письмо уже отправляется вам. Но тут опять, никакой регистрации, только проверка то что это реально человек и кликнул по ссылке отправил повторно.
Про данную возможность почитайте статью
https://blog.web5x.ru/dinamicheski-zapros-get/
т.е не просто почитать, а применить ее, предварительно сильно вникнув в возможность!
Я уже думал об этом и решил, что если ни чего не получится то так и сделаю. Просто посмотрел по инструкции на официальном сайте, это можно сделать прямо в форме, написано вот так — «После добавления виджета формы в свой раздел перейдите в раздел действия после отправки > > добавить действие и добавьте электронную почту» это понятно, потом заполнить стандартные поля «и там написано что нужно заполнить поле «Reply-to» и «Сс»,но почему то у меня нет таких полей. Может где то необходимо открыть эти поля и что, подскажите пожалуйста.