Хотите узнать, как создать Контактная форма в Элементоре?
Страница контактов - одна из важнейших страниц веб-сайта. Часто используется как параметр, одобрен ли веб-сайт. Elementor поставляется с собственным виджетом - виджетом формы - чтобы вы могли добавить форму на страницу. Эта статья покажет вам, как это сделать.
Сам виджет формы доступен только в Elementor Pro. Это означает, что вам нужно перейти на профессиональную версию, если вы все еще используете бесплатную версию. Вы можете не только использовать виджет формы для создания Контактная форма, но вы также можете использовать его для создания других типов форм, включая форму регистрации по электронной почте, форму регистрации пользователя, форма загрузки файлаИ т.д. ...
Как создать контактную форму в Elementor
Когда вы создаете Контактная форма Используя виджет «Форма» Elementor, вы можете установить место, куда будут отправляться данные формы. Будь то в вашей учетной записи электронной почты или в менеджере отправки форм по умолчанию Elementor.
В этой статье мы сразу перейдем к добавлению виджета Form в поле редактирования Elementor. Просто добавьте виджет формы с панели виджетов в поле редактирования следующим образом:
Как видите, виджет формы автоматически создает форму, состоящую из трех полей.
Читайте также: Как добавить ценовую сетку в Elementor
Чтобы отредактировать существующее поле, вы можете просто открыть его. Вы можете изменить тип поля, переопределить метку и местозаполнитель по умолчанию и установить его как обязательное поле, если хотите.
Чтобы удалить существующее поле, вы можете просто нажать на X поля, которое вы хотите удалить.
Чтобы добавить новое поле, вы можете просто нажать на кнопку ДОБАВИТЬ ЭЛЕМЕНТ. Сам виджет формы поддерживает двадцать типов полей.
Определение действия формы
Как мы упоминали ранее, вы можете отправить данные формы (отправки) на свою учетную запись электронной почты или во встроенную отправку формы Elementor. Чтобы задать пункт назначения, вы можете открыть блок После отправки действий под вкладкой Содержание из панели настроек.
Смотрите также: Как создать округлое изображение в Elementor
Выберите действие, которое вы хотите определить в доступном поле (вы можете добавить несколько действий). В этом примере мы выбираем Электронная почта.
Если вы также установите действие формы по электронной почте, вы можете открыть блок Электронная почта для определения адреса электронной почты для получения данных формы. Как видите, вы также можете установить тему, если хотите.
По умолчанию Elementor включает содержимое всех полей формы. Если вы хотите включить только контент из определенных полей, вы можете вставить шорткоды предпочитаемых вами полей в это поле. Сообщение.
Например, настройка ниже отправит только содержимое поля сообщения.
Чтобы получить шорткод поля, вы можете щелкнуть вкладку РАСШИРЕННЫЙ в связанном поле блока Поля формы.
Определение сообщений
Когда данные формы будут успешно отправлены, ваши посетители увидят сообщение об успешном завершении под формой. Точно так же они также увидят сообщение об ошибке, если данные формы не будут отправлены.
См. Также: Как создать раздел члена команды с помощью Elementor
Вы можете переопределить эти сообщения по умолчанию, а также два других сообщения из блока Дополнительные параметры под вкладкой Содержание из панели настроек. Активируйте Пользовательские сообщения , чтобы переопределить сообщения по умолчанию.
Настройка формы
Как только вы закончите выполнение основных настроек в вкладка Content на панели настроек вы можете переключиться на Стиль чтобы настроить форму. Здесь вы можете открыть пять блоков.
форма для заполнения
Вы можете открыть этот блок, чтобы определить расстояние между столбцами и строками формы, расстояние между метками, типографику (семейство шрифтов, размер шрифта, стиль шрифта и т. Д.) Метки формы и цвет текста последней.
- Поиск
Вы можете открыть этот блок, чтобы определить типографику текста поля, а также цвет, цвет фона полей формы, размер, цвет границы и радиус границы полей формы.
- Кнопки
Вы можете открыть этот блок, чтобы настроить кнопку отправки. Вы можете установить такие вещи, как типографика текста кнопки, а также цвет, цвет фона, радиус границы, размер границы, цвет границы и заливка текста. Установить размер кнопки можно из блока кнопки под вкладка Content.
- Сообщения
Вы можете открыть этот блок, чтобы определить типографику, а также цвет текста сообщений.
- Шаги
Вы можете открыть этот блок только в том случае, если хотите создать многоступенчатую форму.
После того, как вы закончите настройку формы и страницы, вы можете опубликовать свою страницу.
Возможная ошибка
Одна из распространенных ошибок, когда вы устанавливаете действие формы на Электронная почта в том, что форма не отправляется. Вместо этого вы увидите следующее сообщение.
Elementor и большинство плагинов контактных форм, включая Contact Form 7, используют стандартную функцию доставки почты WordPress, которая называется wp_mail. Эта функция зависит от функции Отправить почту который зависит от функционирования PHP.
Читайте также: Как добавить слайдер отзывов в Elementor
К сожалению, все поставщикивеб хостинг не активируйте функцию Отправить почту PHP. В таком случае ваша форма не будет отправлена. Вместо этого вы получите сообщение об ошибке, подобное приведенному выше.
Чтобы решить эту проблему, вы можете установить и настроить специальную службу доставки почты на своем WordPress. В качестве альтернативы, если возможно, вы можете попросить своего хостинг-провайдера включить эту функцию. Отправить почту PHP.
В конце
Elementor - один из наиболее полных плагинов для построения страниц. Он поставляется с рядом элементов дизайна (называемых виджетами), чтобы вы могли легко добавлять элементы на страницу, включая контактную форму.
Хотя вы можете использовать виджет «Форма» для создания контактной формы с нуля со своим собственным дизайном, Elementor также предлагает шаблоны форм, которые вы можете использовать. Вы можете даже создать контактную страницу (в комплекте с контактной формой, конечно) из шаблона.
Получите Elementor Pro прямо сейчас!
Заключение
Вот! Вот и все, что касается этой статьи, в которой показано, как создать контактную форму в Elementor. Если у вас есть вопросы о том, как туда добраться fдайте нам знать в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
