TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Добавить и настроить контактную форму на сайте Weebly

20

Есть много простых способов добавить формы на ваш сайт Weebly. Вы можете использовать элемент «Контактная форма» Weebly по умолчанию, подключать формы из Центра приложений и встраивать коды форм от третьих лиц. Являясь встроенным элементом, элемент «Контактная форма» Weebly по умолчанию легко интегрируется и легко управляет полученными отправленными формами через панель управления. или приложения для iPhone / Android. В этой статье мы обсудим особенности элемента «Контактная форма» по умолчанию и способы его настройки. Помимо контактной формы, Weebly также предлагает два других элемента формы – форму RSVP и элемент опроса.

По теме: Как добавить контактную форму на сайты WordPress?

«Контактная форма» – это один из элементов перетаскивания, сгруппированных в группе «Базовая» в редакторе сайта Weebly. После того, как вы добавите контактную форму в область содержимого и нажмете на нее, вы увидите, что столбец элементов в редакторе Weebly автоматически изменится на поля формы. Все поля формы подразделяются на следующие три категории:

Поля формы:

  • Краткое текстовое поле
  • Большое текстовое поле
  • Кнопки опций
  • Выпадающий список
  • Флажки
  • Загрузка файла для пользователя Pro
  • Имя, электронная почта, адрес и номер телефона

Состав:

  • Разделитель и распорка

Базовый:

  • Заголовок, текст, изображение и код для встраивания

Добавить и настроить контактную форму на сайте Weebly

Поля перетаскивания в Weebly Form

Как и обычные элементы, вы можете перетащить каждое поле и добавить в форму. При щелчке по элементу формы отобразятся три варианта: «Просмотр записей», «Параметры формы» и «Сохранить».

Параметры формы

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

Добавить и настроить контактную форму на сайте Weebly

Параметры контактной формы Weebly

Доступны следующие параметры настройки:

  • Имя формы – введите имя для вашей формы. Если у вас есть несколько форм на вашем сайте, вы можете использовать имена форм, чтобы легко просматривать отправленные материалы на основе имени формы.
  • Отправка по электронной почте – это идентификатор электронной почты, по которому вы будете получать мгновенное уведомление всякий раз, когда будет отправлена ​​форма.
  • Сообщение с подтверждением после отправки – опция подтверждения позволяет отображать автоматический ответ пользователю после отправки формы. Вы можете установить текстовое подтверждающее сообщение или связать любую веб-страницу. Текстовое сообщение будет отображаться в области формы после отправки. Вы можете подключить любую внешнюю веб-страницу или свой собственный сайт или страницу магазина в опции ссылки, которая будет отображаться после отправки.
  • Интервал – используется для регулировки расстояния между верхним и нижним полями элемента формы.
  • Кнопка отправки – используется для выравнивания кнопки отправки влево, по центру или справа по ширине формы. Также вы можете ввести любой произвольный текст, например «Контакт», вместо отправки в кнопочном элементе.

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

Настройка на уровне поля

Если щелкнуть любое поле формы, появится всплывающее окно, применимое к этому полю. Вы можете изменить имя поля, сделать его необязательным или обязательным, добавить инструкции по заполнению и настроить интервал поля в форме. При создании обязательного поля вверху имени поля будет отображаться звездочка, указывающая на пользователя, которое является обязательным полем. Отсутствие заполнения обязательных полей не позволит отправить форму и отобразить сообщение «Пожалуйста, исправьте выделенные поля», а поле будет выделено красным цветом.

Добавить и настроить контактную форму на сайте Weebly

Инструкция и обязательное поле

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

Некоторые поля, такие как «Кнопки параметров», «Флажки» и «Выпадающее окно», будут иметь дополнительные параметры, как показано на рисунке ниже. Вы можете ввести любое количество настраиваемых параметров для выбора пользователя или выбрать его из списка предопределенных параметров. Предустановленные параметры имеют длинный список вариантов, таких как Сравнение, Пол, Штаты США, Как долго, Как часто, Месяцы года, Дни недели и т.д.

Добавить и настроить контактную форму на сайте Weebly

Использование кнопок выбора в контактной форме Weebly

Параметры формы для профессионального пользователя

Пользователи Pro будут иметь следующие дополнительные функции формы:

  • Загрузка файла – это профессиональное поле, которое помогает пользователю отправить форму с загруженным файлом. Это будет очень полезная функция, чтобы пользователь мог загрузить дополнительный документ или снимок экрана, что, в свою очередь, поможет вам обеспечить лучшую поддержку. 20 МБ – это максимальный размер файла, который может быть загружен в форму.
  • Добавление формы в нижний колонтитул – помимо добавления формы в область содержимого сайта, пользователи Pro могут также добавить форму в область нижнего колонтитула. Контактную форму можно добавить в нижний колонтитул, который будет отображаться на всех страницах сайта.

Добавить и настроить контактную форму на сайте Weebly

Загрузка файла в форме Weebly

Просмотр записей формы

Записи формы можно просматривать разными способами, и требуемый ответ может быть соответственно отправлен отправителю.

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

Добавить и настроить контактную форму на сайте Weebly

Просмотр записей в контактной форме в Weebly Dashboard

  • Вы также можете использовать приложение Weebly для iPhone или Android, чтобы просматривать записи в форме и отвечать на них на ходу.

Настройка приемов для контактной формы Weebly

Регулировка размера контактной формы

Размер формы Weebly по умолчанию изменить нельзя. Чтобы изменить размер, поместите элементы «Разделитель» рядом с элементом формы и отрегулируйте ширину формы.

Уменьшение количества рассылаемых форм спама

Одна из самых больших проблем с контактной формой Weebly – это отправка спама: спамеры и боты будут отправлять спам-записи и наводнять ваш почтовый ящик. Поскольку Weebly не предлагает CAPTCHA для контактной формы, обработка спама будет раздражающей задачей для владельцев сайтов. Есть два способа уменьшить количество спама без изменения кода:

  1. Добавьте «Флажки» в контактную форму и сделайте это обязательным полем. Вы можете сделать «Заголовок поля» как «Я не робот» и добавить один «Пункты опций» как «Я человек». Это заставит пользователей установить флажок, и форма не может быть отправлена, не установив его.
  2. Аналогичным образом используйте «Кнопки выбора» и измените «Заголовок поля» на что-нибудь вроде «Проверка CAPTCHA» или «Проверка человеком» и сделайте это обязательным полем. Добавьте один вариант ответа, например «Я человек, а не робот», или любой другой текст, который вам нужен. Теперь пользователю нужно выбрать опцию, чтобы отправить контактную форму.

Добавить и настроить контактную форму на сайте Weebly

Добавить ручную капчу в контактную форму Weebly

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

Добавить и настроить контактную форму на сайте Weebly

Предотвращение рассылки спама в контактной форме Weebly

Изменение цвета фона контактной формы Weebly

Многие пользователи писали нам по электронной почте и спрашивали, как изменить цвет фона контактной формы Weebly, и вот как это сделать. Каждая контактная форма будет иметь номер формы после публикации сайта. Щелкните правой кнопкой мыши контактную форму на опубликованном сайте, выберите «Проверить» или «Проверить элемент» и найдите номер формы #id для своей контактной формы, как показано на рисунке ниже. Форма #id будет иметь вид «form-1234567890123» и будет уникальной для каждой формы.

Добавить и настроить контактную форму на сайте Weebly

Поиск контактной формы № ID в Weebly

Теперь перейдите в редактор Weebly и добавьте приведенный ниже код CSS в раздел «Код заголовка» страницы, на которой у вас есть контактная форма. Не забудьте заменить форму #id своим #id.

<style> #form-632853235871630597 { background-color: beige; padding: 15px 15px 0 15px; border-radius: 10px; border: 1px solid rgba(158, 158, 158, 0.22); } </style>

Если у вас несколько форм, вы можете настроить их с разными цветами фона или добавить все формы #ID, такие как # ID1, ID2, и иметь одинаковые стили для всех форм. Если у вас есть другие формы, добавьте CSS в раздел «Настройки> SEO> Код заголовка» или в файл «main.less».

Источник записи: www.webnots.com
Leave A Reply

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