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

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

Помимо контактной формы, Weebly также предлагает два других элемента формы — форму RSVP и элемент опроса.

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

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

Поля формы:

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

Структура:

Базовый:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Запретить отправку спама в контактной форме Weebly

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

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

Поиск контактной формы № ID в 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_style.css».

Посмотреть демонстрацию контактной формы на сайте Weebly

Посмотреть демо

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *