форма обратной связи elementor pro
Формы — виджет 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» и «Сс»,но почему то у меня нет таких полей. Может где то необходимо открыть эти поля и что, подскажите пожалуйста.
Плагин Elementor – Полное руководство 2021. Самый мощный и бесплатный конструктор сайтов
Содержимое руководства
Хорошие новости … С недавних пор сделать это стало гораздо проще! Нет необходимости вручную верстать каждую страницу с нуля или нанимать студию веб дизайна.
В наши дни все, что вам действительно нужно – это плагин под названием Elementor, один из самых универсальных и доступных конструкторов страниц для WordPress. Более того, не нужно платить ни копейки чтобы начать им пользоваться!
В этом посте мы расскажем о том, как использовать Elementor, и рассмотрим некоторые из его лучших функций. К концу у вас обязательно сложится представление как этот плагин работает, из чего он состоит и всё такое.
Внимание!
Для Elementor существует множество дополнений и готовых шаблонов страниц. Лидером рынка по продаже таких наборов является темфорест , именно там покупаются шаблоны, которые вы видите на подавляющем большинстве WordPress сайтов!
Начало работы с Elementor
В рамках этого гайда мы не будет углубятся в теорию установки и активации плагинов, так как это у на есть отдельное руководство.
Elementor – это самый популярный конструктор страниц, который полностью раскрывает свой потенциал только при использование максимально легких WordPress тем. Отличным примером считается тема «Hello», а скачать её можно в официальном репозитории.
Конструктор страниц позволяет вам контролировать каждый аспект визуального оформления и макетов страниц или записей вашего сайта с помощью десятков различных элементов.
Итак, в переходим в раздел Плагины → Добавить новый, в строке поиска вводим «Elementor». Самый первый из найденных плагинов нам и потребуется. Нажимаем «Установить», а когда процесс завершиться – «Активировать».
Установка и активация плагина Elementor
🥳 Поздравляем, вы сделали первый шаг на правильном пути!
Изучение возможностей плагина
Чуть позже мы рассмотрим создание наших собственных страниц и шаблонов с помощью плагина, но сначала давайте взглянем на его основные особенности!
Одной из самых важных отличительных черт любого конструктора является простота использования. Пользователь должен воплотить свое видение в реальность без большого количества головокружительных и бешеных поисков уроков на YouTube.
К счастью, Elementor – это самый простой из когда-либо созданных конструкторов. Это интерфейсный редактор, который даём возможность видеть все вносимые на страницы изменения непосредственно на этапе создания или редактирования.
Когда вы привыкнете к перетаскиванию элементов по странице, то поймете, что он настолько интуитивно понятен, насколько это возможно в принципе!
Большинство параметров настройки, которые вы найдете, основаны на виджетах (элементах) и даже в бесплатной версии их много.
Настройки Elementor
У плагина есть несколько настроек базового уровня, которые расположены в разделе Elementor → Настройки. Тут можно выбрать с каким типом записей плагин будет работать, установить размеры контейнера которые будет использоваться по-умолчанию и так далее. На то они и базовые настройки, так как влияют сразу на весь сайт!
Базовые настройки плагина
Также есть удобный менеджер ролей, который позволяет определить, какие типы пользователей могут иметь доступ к Elementor, а какие останутся сидеть на стандартном редакторе блоков (контроль над ролями доступен только в PRO версии).
Какие виджеты (элементы) доступны в бесплатной версии?
В целом, плагин построен на методе Drag-and-drop, и содержит много различных элементов структурированных по разделам.
Структура элементов в плагине
В общей сложности вы получаете около 30 базовых элементов (все вкладки, кроме PRO), которые дают вам все необходимое для создания страниц.
Если базовых элементов недостаточно, можно получить дополнительные виджеты путем обновления до Elementor Pro.
Наконец, Elementor поддерживает виджеты, созданные сторонними разработчиками. Вы можете найти множество сторонних дополнений для плагина, которые еще больше расширяют библиотеку доступных элементов, или даже создать свой собственный виджет, используя API плагина.
Сравнение версий. А нужно ли покупать Elementor PRO?
Если вам нужен удобный, мощный бесплатный конструктор, то бесплатная версия – отличный выбор!
Но весь потенциал плагина раскрывается только с переходам на PRO версию.
Купить Elementor PRO
Давайте посмотрим на сравнительную таблицу и продолжим:
50
Одной из самых привлекательных отличительных черт является «Конструктор темы», благодаря этой опции можно создавать неограниченное сочетание шапок и подвалов сайта, а также управлять их выводом. Только подумайте, что у вас появляется возможность создать уникальный внешний вид сайта вне зависимости от установленной темы!
Чуть позже мы вернемся к PRO, а сейчас продолжим знакомство с бесплатной версией плагина Elementor
Использование бесплатной версии конструктора
Elementor работает с пользовательскими типами постов и имеет множество шаблонов, готовых для использования, но в рамках этого гайда, давайте все делать по порядку и с нуля. Вы можете ознакомиться с нашей подбокой топовых шаблонов Elementor
Шаг 0. Выбор правильной темы (шаблона) для сайта на базе Elementor
Тут важно понимать, что существуют сотни и даже тысячи полноценных шаблонов для WordPress созданных на базе Элементора, вот самые популярные из них:
Shopkeeper
Внимание!
Если в конечном итоге вы хотите получить сайт мирового уровня, то без премиальной темы не обойтись. Существует много площадок, но лидером рынка является темфорест , именно там покупаются шаблоны, которые вы видите на подавляющем большинстве WordPress сайтов!
Шаг 1. Создание новой страницы или записи
Мы будет создавать страницу, а для этого перейдите во вкладку Страницы → Добавить новую на панели инструментов. Откроется, всем уже знакомый, редактор блоков (Гутентберг). Печатаем название страницы и нажимаем синюю кнопку «Редактировать в Elementor»
Создание первой страницы в Elementor
Шаг 2. Начало работы в редакторе
Откроется редактор Elementor. Первое с чем мы будет работать это строки и столбцы, которые позволят разделить страницу на отдельные логические элементы.
Создание строк и столбцов
В качестве примера мы создали две строки, первая строка содержит один, полно-размерный столбец, а вторая – 2 столбца.
В первую строку добавим заголовок:
Заголовок – первый добавленный элемент
Вы неверное уже заметили, что не смотря на то, что страницы была создана с названием «Моя страница в Elementor» – заголовок не отображается. Добиться этого можно используя родительскую тему «Hello» и её дочернюю тему.
В functions.php дочерней темы следует добавить следующий фильтр:
Важной особенность плагина Elementor являются его глобальные настройки. Поменять цвет заголовка можно используя вкладку «Стиль».
Используем вкладку стиль для редактирования цвета заголовка
Но это крайне не рациональное использование редактора, так как эти действия нужно будет выполнять для каждого заголовка на каждой странице.
Шаг 3. Глобальные настройки
Для создания общей стилевой направленности сайта необходимо задать некоторые глобальные настройки:
Глобальная настройка стилей
В качестве примера была выбрана одна из доступных по умолчанию палитр, но её всегда можно отредактировать или создать собственную.
Шаг 4. Строки, колонки, элементы и их настройки
Даже, используя бесплатную версию плагина у вас есть тонна инструментов для воплощения вашего видения. Каждая строка, колонка и отельный элемент может быть настроен. Вот где раскрывается настоящая сила Elementor как WordPress плагина.
Сейчас нет смысла описывать все доступные строкам и элементам настройки. Но в качестве примера давайте визуально отделим шапку сайта от заголовка.
Отделяем шапку сайта от тела контента с использованием Elementor для WordPress
Не дурно, да? Но давайте двигаться дальше и разбираться с шаблонами которые доступны в бесплатной версии плагина Elementor.
Шаг 5. Шаблоны страниц в Elementor
Нажав на иконку с изображение папки 
открывается библиотека доступных и заранее сверстанных макетов, которые можно использовать при создание страниц и записей:
Библиотека шаблонов Elementor
Тут все просто – выберем понравившийся шаблон и вставляем его в тело контента. Большинство самых “вкусных” шаблонов доступно только в PRO версии.
Elementor PRO
Несмотря на то, что благодаря бесплатной версии плагина вполне можно создать сайт, PRO версия поможет максимально раскрыть весь творческий потенциал и даст доступ к эффективным маркетинговым инструментам, таким как PopUp (всплывающие окна).
Создание форм, также доступно только в Elementor PRO, а ведь благодаря им можно полностью избавиться от сторонних, жрущих тонны ресурсов, плагинов типа «Contact Form 7».
Но всё же начать стоит возможности создания шапки и подвала сайта.
Редактор тем в PRO версии
Elementor – это особый случай, который одновременно прост в использовании и невероятно универсален, во многом благодаря своему конструктору тем.
Конструктор тем меняет правила игры для всех, кто знаком с созданием собственных тем, поскольку он позволяет создавать собственные верхние и нижние колонтитулы (Header и Footer), а также другой динамический контент для вашего веб-сайта. Он позволяет вам переопределять важнейшие аспекты используемой WordPress темы!
Перейдите во вкладку Шаблоны → Theme Builder на панели инструментов, затем выберите «Header» и нажмите кнопку «Добавить новый Header».
Создание шапки сайта (Header) используя Elementor PRO
Дальше потребуется ввести название шаблона, пусть он так и называется «Header». А после нажатия большой зеленой кнопки «Создать шаблон» начинается самое интересное.
Выберите один из понравившихся шаблонов и нажмите «Опубликовать», так как к редактированию мы вернемся чуть позже.
Добавляем условия отображения для шапки сайта
Будет предположено добавить условия отображения. Нажимаем «Add Condition», а так как там по умолчанию выбрана опция «Entire Site», что означает – показывать на всех страницах сайта, то нажимаем «Save & Close». Как вы уже поняли можно создавать и совмещать различные условия отображения динамических элементов, но в рамках этого руководства это рассматриваться не будет.
Возвращаемся к редактированию страницы, которую мы создали ранее. И что мы видим? Правильно, нашу созданную шапку. Давайте дополнительно стилизуем её, а для этого нужно нажать «Редактировать Header»
Пример редактирования шапки сайта в Elementor PRO
Как видно, всё достаточно просто и на интуитивно понятном уровне. Тем же способом можно создать подвал сайта (Footer) и различные всплывающие окна, но об этом в другой раз.
Часто задаваемые вопросы
Что такое Elementor?
Elementor – это лучший и бесплатный конструктор для WordPress, который позволяет создавать красивые веб-сайты самым простым и быстрым способом.
Elementor работает со всеми темами?
Плагин работает со всеми темами, которые соответствуют стандартам WordPress.
Совместим ли он с другими плагинами WordPress?
Плагин совместим практически со всеми плагинами.
Что такое Elementor PRO
Elementor PRO расширяет набор инструментов, необходимых веб-разработчикам для создания профессиональных веб-сайтов. Он включает в себя лучший в отрасли конструктор тем, виджет визуальных форм, настраиваемый CSS и многие другие революционные функции.
Могу ли я редактировать страницы своего блога с помощью Elementor?
Да, но Вам понадобится “конструктор тем”, который входит в Elementor PRO
Могу ли я редактировать страницы WooCommerce?
Вы можете редактировать страницу товара и страницы архивов с помощью конструктора WooCommerce Elementor. Скоро появится возможность редактировать страницу оформления заказа и страницу корзины с этой функцией.
Подведем итог
С точки зрения основных выводов, надеемся, вы понимаете, почему Elementor – фантастический конструктор, который берет на себя большую часть по верстке макетов. Он обеспечивает идеальный баланс между простотой использования и широкими функциональными возможностями, что делает его одним из самых доступных конструкторов, доступных для WordPress.
Надеемся, это мини-руководство дало вам отличную отправную точку для успешного использования плагина Elementor и его PRO версии.
Если у вас есть какие-либо вопросы или комментарии, пожалуйста, поделитесь ими с нами ниже!