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

Додайте та налаштуйте контактну форму на веб -сайті Weebly

2

Існує багато простих способів додавання форм на ваш сайт Weebly. Ви можете використовувати елемент Weebly "Форма контакту" за умовчанням, підключати форми з App Center та вставляти коди форм від третіх сторін. Будучи рідним елементом, елемент "Контактна форма" за умовчанням легко інтегрувати та легко керувати отриманими формами за допомогою інформаційної панелі. або додатки для iPhone/ Android. У цій статті ми обговоримо особливості елемента "Форма контакту" за умовчанням та способи його налаштування. Крім форми контакту, Weebly також пропонує два інші елементи форми – RSVP форму та елемент опитування.

Пов’язані: Як додати контактну форму на сайти WordPress?

“Форма контакту" – це один із елементів перетягування, згрупованих у групі “Основні” у редакторі сайту Weebly. Після того, як ви додасте контактну форму у область вмісту та клацнете на ній, ви побачите, що стовпець елементів у редакторі Weebly автоматично змінюється на поля форми. Усі поля форм поділяються на три категорії:

Поля форми:

  • Коротке текстове поле
  • Велике текстове поле
  • Кнопки опцій
  • Випадаюче вікно
  • Прапорці
  • Завантаження файлів для користувача Pro
  • Ім’я, електронна адреса, адреса та номер телефону

Структура:

  • Розділювач і пробіл

Основні:

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

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Поля перетягування у формі Weebly

Як і звичайні елементи, ви можете перетягнути кожне поле та додати до форми. Натискання елемента форми покаже три варіанти Перегляд записів, параметри форми та збереження.

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

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

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Варіанти контактної форми Weebly

Доступні такі параметри налаштування:

  • Назва форми – введіть назву для форми. Якщо у вас є кілька форм на вашому сайті, ви можете легко використовувати їх імена, щоб легко переглядати подані матеріали на основі назви форми.
  • Надсилання електронною поштою – це ідентифікатор електронної пошти, на який ви будете отримувати миттєве сповіщення, коли надходить форма.
  • Повідомлення про підтвердження після надсилання – опція підтвердження дозволяє відображати автоматичну відповідь користувачеві після надсилання форми. Ви можете встановити текстове повідомлення -підтвердження або зв’язати будь -яку веб -сторінку. Після надсилання текстове повідомлення відображатиметься в області форми. Ви можете підключити будь -яку зовнішню веб -сторінку або свій власний веб -сайт або сторінку магазину за допомогою параметра посилання, яке відображатиметься після надсилання.
  • Інтервал – використовується для регулювання інтервалів верхнього та нижнього полів елемента форми.
  • Кнопка "Надіслати" – використовується для вирівнювання кнопки подання вліво, по центру або правому відносно ширини форми. Також ви можете ввести будь -який безкоштовний текст, наприклад "Контакт", замість того, щоб надіслати на елементі кнопки.

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

Налаштування рівня поля

Якщо натиснути всередині будь -якого поля форми, з’явиться спливаюче вікно, придатне для цього поля. Ви можете змінити назву поля, зробити його необов’язковим або обов’язковим, додати інструкції щодо заповнення та налаштувати інтервали між полями у формі. Створення обов’язкового поля відображатиметься зірочкою над назвою поля, що вказуватиме на користувача, яке є обов’язковим. Якщо не заповнити обов’язкові поля, це не дозволить надіслати форму та відобразити повідомлення «Будь ласка, виправте виділені поля», а поле буде виділено червоним кольором.

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Інструкція та обов’язкове поле

Інструкції допоможуть користувачам дізнатися, як заповнити це конкретне поле, а повідомлення довідки відображатиметься кожного разу, коли подана інформація зосереджена.

Деякі з полів, таких як “Кнопки опцій”, “Прапорці” та “Випадаюче поле” матимуть додаткові параметри, як показано на малюнку нижче. Ви можете ввести стільки налаштованих параметрів для вибору користувача або вибрати його зі списку попередньо визначених опцій. Попередньо визначені варіанти мають довгий список варіантів, таких як Порівняння, Стать, США, Як довго, як часто, Місяці в році, Дні тижня тощо.

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Використання кнопок опцій у контактній формі Weebly

Параметри форми для користувача Pro

Користувачі Pro матимуть такі додаткові можливості форми:

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

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Завантаження файлу у формі Weebly

Перегляд записів у формі

Записи у формі можна переглядати різними способами, а відповідна відповідь може бути надіслана відповідному заявнику.

  • Натисніть на форму, щоб побачити кнопку «Переглянути записи», натиснувши на яку, відкриється нове вікно з усіма надісланими формами.
  • Ви також отримуватимете сповіщення електронною поштою кожного разу, коли буде подано форму.
  • Перегляньте подані форми прямо з інформаційної панелі.

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Переглянути записи контактної форми на інформаційній панелі Weebly

Налаштування хитрощів для контактної форми Weebly

Регулювання розміру контактної форми

Розмір форми Weebly неможливо налаштувати за замовчуванням. Щоб змінити розмір, розмістіть елементи "Пробіл" біля елемента форми та відрегулюйте ширину форми.

Зменшення подання спам -форм

Однією з найбільших проблем із контактною формою Weebly є надсилання спаму – спамери та боти надсилатимуть записи зі спамом та заповнять вашу поштову скриньку. Оскільки Weebly не пропонує CAPTCHA для форми контакту, обробка надсилання спаму буде дратівливим завданням для власників сайтів. Існує два способи зменшення спаму без зміни коду:

  1. Додайте «прапорці» до форми контакту та зробіть це обов’язковим полем. Ви можете зробити "Заголовок поля" "Я не робот" і додати один "Параметри опцій" як "Я людина". Це змусить користувачів поставити прапорець, а форму неможливо надіслати без її перевірки.
  2. Подібним чином скористайтесь кнопками опцій та змініть назву заголовка поля на щось на зразок «перевірка CAPTCHA» або «перевірка людини» та зробіть це обов’язковим полем. Додайте одну опцію, наприклад "Я людина, а не робот", або будь -який потрібний вам текст. Тепер користувачеві необхідно скористатися опцією вибору, щоб надіслати контактну форму.

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Додайте вручну Captcha у контактну форму Weebly

В обох вищевказаних варіантах автоматичні боти не зможуть встановити прапорець або кнопку опції, тим самим зупиняючи записи спаму.

Додайте та налаштуйте контактну форму на веб -сайті Weebly

Запобігання надсилання спаму у формі Weebly Contact

Зміна кольору фону контактної форми Weebly

Багато користувачів надіслали нам електронного листа та попросили спосіб змінити колір фону контактної форми Weebly, і ось як це зробити. Кожна контактна форма матиме форму #id після публікації сайту. Клацніть правою кнопкою миші на контактній формі на опублікованому веб -сайті та натисніть на опцію «Перевірити» або «Перевірити елемент» та дізнайтеся номер #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>

Якщо у вас є кілька форм, ви можете налаштувати їх різними кольорами фону або додати всі ідентифікатори форми, наприклад #ID1, ID2, і мати однакові стилі для всіх форм. Якщо у вас є більше форм, додайте CSS у розділі «Налаштування> SEO> Код заголовка» або у файлі «main.less».

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі