Як додати контактну форму на веб-сайт або блог WordPress


Як додати контактну формуЯк власник веб-сайту, ви обов’язково повинні дізнатися, як додати контактну форму до WordPress. Ваш веб-сайт не є анонімним. Більшість людей хочуть знати та періодично спілкуватися з тим, хто стоїть за вмістом, який вони читають. Як ви думаєте, чому є авторські профілі та коментарі до блогу?


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

Ми також поговоримо про те, як змінити дизайн вашої форми та застосувати захист від спаму. Більше того, ми розглянемо форми контактів та захист персональних даних – те, що останнім часом стає все більше увагою. Нарешті, ви знайдете список плагінів, за допомогою яких можна додати контактну форму в WordPress.

Це може здатися багато, але не хвилюйтеся – ми будемо робити це просто!

Contents

Чому слід використовувати контактну форму на своєму сайті WordPress?

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

  • Захист від електронної пошти – Спам – шкідник. Ви помітите це швидко, коли у вас є веб-сайт WordPress, який використовує коментарі в блозі. Одне, що роблять спамери, – це автоматично сканувати веб-сайти на незахищені адреси електронної пошти, щоб вони могли додавати їх у свої списки розсилки. Контактні форми запобігають цьому, надаючи відвідувачам можливість зв’язатися, не публікуючи вашу адресу в Інтернеті.
  • Запитайте потрібну інформацію – Люди, які зв’язуються з вами, не завжди надсилають всю необхідну інформацію. За допомогою контактної форми ви можете спеціально запитати її заздалегідь. Це також дає можливість фільтрувати запити, наприклад за типом. Це полегшує ваше життя і зменшує багато назад і назад.
  • Інформуйте своїх клієнтів – І навпаки, контактні форми також можуть виступати першою точкою інформації. Ви можете включити інформацію для абонентів, щоб повідомити про очікуваний час відповіді та кроки, які вони можуть вжити заздалегідь для вирішення запиту. Це зменшує ймовірність отримання декількох електронних листів від однієї нетерплячої людини.

Переконані, що контактні форми корисні? Далі перейдемо до практичної частини цього підручника.

Як додати контактну форму у WordPress із контактною формою 7

Існує багато плагінів WordPress, щоб додати контактну форму на ваш сайт, як безкоштовну, так і преміальну. Про деякі з них ми поговоримо пізніше в цій статті. Для наступного підручника ми будемо використовувати Контактна форма 7.

Плагін доступний безкоштовно в каталозі WordPress і постійно його входить найпопулярніші плагіни усіх часів (насправді, на момент написання цього повідомлення це в першу чергу). На додаток до цього, він простий у використанні, має приємний список функцій та розумні додатки.

Ось чому ми обираємо його, щоб навчити вас додавати контактну форму в WordPress.

Крок 1. Встановіть плагін контактної форми 7

Встановити контактну форму 7 так само просто, як і будь-який інший плагін WordPress. Просто увійдіть у свій сайт, перейдіть на сторінку Плагіни> Додати нове і введіть його ім’я в поле пошуку.

встановіть контактну форму 7, щоб додати контактну форму в wordpress

Він повинен з’явитися в першу чергу. Натисніть на Встановити зараз завантажити його на свій сайт. Після цього натисніть Активуйте почати використовувати плагін.

Крок 2. Створіть свою нову контактну форму

Після встановлення ви знайдете новий пункт меню з назвою Контактна інформація на бічній панелі WordPress. Якщо натиснути його, ви перейдете на цей екран.

контактна форма 7 головного меню

Ви отримуєте ряд підказок щодо покращення своєї контактної форми, наприклад, використання захисту від спаму. Ми до цього питання дістанемося пізніше.

Що ще важливіше, ви знайдете список усіх контактних форм на своєму сайті. Вона включає зразок форми, який теоретично ви можете використовувати відразу. Клацніть його, щоб розпочати редагування, або натисніть на нього Додати новий у верхній частині екрана. Обидва приведуть вас сюди:

як додати контактну форму до wordpress із контактною формою 7

На початку це виглядає трохи кумедно, але не хвилюйтеся – ви зрозумієте це незабаром.

Для роботи вашій контактній формі потрібні поля. Поля – це місце, де відвідувачі вводять своє ім’я, електронну адресу або повідомлення, яке вони хочуть вам надіслати, або все, що ви хочете, щоб вони додали..

Контактна форма 7 створює ті, у яких є трохи HTML плюс спеціальні теги. Все між позначає одне поле вашої контактної форми плюс текстовий опис, що належить до неї. Фактичні поля створюються залежно від квадратних дужок.

Чи означає це, що для створення контактної форми вам потрібно вивчити мови програмування? На щастя, плагін постачається з інструментами для автоматичного їх створення.

Крок 3. Налаштуйте форму

На даний момент форма за замовчуванням, яку ми маємо в задньому кінці, виглядатиме так на сторінці.

Конфігурація контактної форми
Приклад форми “додати контактну форму у WordPress”

Це все стандартно. Скажімо, ви хочете додати спадне меню, щоб вибрати мета контакту з вами. Таким чином, ви зможете одразу побачити повідомлення, яким надавати пріоритет.

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

Клацніть спадне меню на панелі інструментів зверху. Ви перейдете до цього меню:

контактна форма 7 створити спадне меню

Ось як заповнити різні поля:

  • Тип поля – Виберіть, чи потрібно в полі подати контактну форму чи ні.
  • Ім’я – Це позначає ім’я, яке використовується в тегу. Він не відображатиметься для відвідувачів, але полегшує вам запам’ятати мету тегу, а також налаштувати електронний лист, надісланий у ваш обліковий запис пізніше.
  • Параметри – Введіть параметри, доступні для відвідувачів, використовуючи спадне меню. Поставте по одному на рядок. Також у вас є можливість дозволити кілька виборів і використовувати порожній елемент за замовчуванням.
  • Атрибут Id / Class – У цьому місці ви можете призначити полю клас CSS або id. Це дуже корисно для користувацького стилю. Про це ми поговоримо пізніше.

Ось як ми це заповнили:

заповнену форму контакту генератора тегів форми 7

Коли ви задоволені, натисніть на Вставити тег ввести його у форму.

додайте теги форм у спадне меню до контактної форми 7

Майте на увазі, що зрозумівши, як працюють теги, ви також можете їх створити або внести зміни в текстове поле. Наприклад, щоб нове спадне меню було не обов’язковим полем, ви можете просто видалити зірочку після виберіть. Чим більше ви використовуєте плагін, тим краще розумієте, як він працює.

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

додати html-код для формування тегів у контактній формі 7

Крок 4. Відредагуйте налаштування електронної пошти

Далі ви повинні налаштувати електронний лист, надісланий вам із контактної форми. Не дивно, що ви робите це під Пошта вкладку вгорі.

налаштувати контактну форму 7 налаштувань пошти

Ви знайдете поля, попередньо заповнені аналогічними тегами, як контактні форми раніше. Він також надає доступні теги поля, включаючи нові, які ви створили раніше (якщо ви зберегли форму). Ви можете використовувати їх для налаштування того, як ви отримуватимете повідомлення від своєї контактної форми.

Ось що означає кожне поле:

  • До – електронна адреса, на яку будуть надсилатися повідомлення. Зазвичай ви можете залишити це так, як є.
  • З – Відправник електронного листа. За замовчуванням воно встановлюється на ім’я особи за допомогою вашої контактної форми.
  • Додаткові заголовки – Місце для додаткових полів заголовка повідомлень. Стандартні налаштування надсилають вашу відповідь на електронну пошту особи, яка звертається до вас, а не на електронну пошту, з якої вона надходила (тобто ваш сайт) під час натискання. Відповісти. Можливо також помістити адресатів до CC або BCC.
  • Тіло повідомлення – Тіло електронного листа, яке ви отримаєте.
  • Виключіть рядки з порожніми поштовими тегами з виводу – Якщо ви перевірите це, якщо будь-який із використаних тегів порожній, плагін виключить їх із повідомлення.
  • Використовуйте тип вмісту HTML – За замовчуванням повідомлення надсилається звичайним текстом. Поставте цей прапорець, щоб натомість використовувати HTML.
  • Додаток до файлів – Якщо ваша форма дозволяє завантажувати файли, тут містяться теги для цих файлів. Ви також можете використовувати його додайте файли, розміщені на вашому сервері.
  • Пошта (2) – Додатковий шаблон пошти, який часто використовується як автовідповідач. Поставте прапорець, щоб активувати.

Стандартні варіанти досить непогані. Єдине, що нам потрібно змінити для нашого прикладу – це тема теми.

налаштуйте фільтр у своїй поштовій програмі

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

Крок 5. Додайте повідомлення форми

Далі йде Повідомлення вкладка. Ви можете налаштувати повідомлення, з якими можуть зіткнутися відвідувачі під час використання форми.

налаштування повідомлень форми для форми контакту 7

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

Крок 6. Налаштуйте додаткові налаштування

Нарешті, ви переходите до додаткових налаштувань.

контактна форма 7 додаткових налаштувань

За замовчуванням вони порожні. Ви можете робити різні речі – від обмеження можливості лише зареєстрованим людям подавати контактну форму, щоб встановити форму в демонстраційний режим для цілей тестування. Це не важливо для наших цілей, але ви можете знайти всі різні варіанти в документація.

Крок 7. Додайте форму на свій веб-сайт

Тепер, коли ви закінчили налаштування форми, саме час перенести її на свій сайт. Перше, що вам потрібно зробити, це зберегти форму за допомогою однойменної кнопки.

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

Після збереження форми на екрані з’явиться короткий код:

контактну форму 7 короткий код, щоб додати контактну форму до wordpress

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

контактна форма 7 короткого коду в редакторі wordpress

Коли ви тепер публікуєте сторінку та переходите до передової:

Контактна форма 7 форми на сторінці

Там. Помітьте спадне меню, яке ми створили раніше. Тепер це частина контактної форми за потребою.

Просте, правда? Крім того, ви можете використовувати той самий метод, щоб розмістити форму в будь-якому іншому місці.

Крок 8. Включіть контактну форму в бічну панель (необов’язково)

Немає нічого простішого, ніж розмістити контактну форму на бічній панелі. Просто зайдіть Зовнішній вигляд> Віджети. Додайте текстовий віджет у ту місце, де ви хочете, щоб контактна форма з’явилася та вставила короткий код.

додати контактну форму у віджет wordpress

Не забудьте зберегти віджет! Коли ви повернетесь до переднього сайту свого веб-сайту, це:

контактна форма у віджеті WordPress

Ви тільки що освоїли основи додавання контактної форми в WordPress. Ми ще не в кінці. Є ще маса справ, щоб покращити форми.

Контактні форми в WordPress – Наступні кроки

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

Зміна дизайну форми

В ідеалі не потрібно змінювати стиль вашої контактної форми. Це, мабуть, у нашому випадку, оскільки контактна форма 7 використовує стандартний HTML-код, наприклад етикетка або введення [type = "текст"] для створення полів форм.

У хороших темах WordPress вони визначені у таблиці стилів. Отже, контактна форма, швидше за все, автоматично підходить під дизайн вашого сайту. Ви можете бачити це на прикладі веб-сайту вище. У випадку, якщо вам все-таки потрібно внести корективи, у вас є кілька варіантів.

Як уже згадувалося, форми контактної форми 7 мають стандартну розмітку HTML. Ви можете просто змінити пов’язаний CSS і, таким чином, виглядати форми. Пам’ятайте, що це також має наслідки для інших полів введення на вашому сайті, які мають ту саму розмітку.

Крім того, кожна форма, створена за допомогою Контактної форми 7, постачається з кодом для додатків. Ви можете знайти код за допомогою інструментів для розробників у своєму браузері.

змінити дизайн контактної форми через css

Наприклад, ви можете внести зміни до стилю всієї форми за допомогою .wpc7-форма Клас CSS Майте на увазі, що це має наслідки для всіх форм, створених за допомогою Контактної форми 7, але залишає інші поля введення на вашому веб-сайті недоторканими.

Якщо ви хочете отримати ще більш конкретні форми та змінити стиль лише для певних форм, вам пощастить. Як видно із скріншоту, наведеного вище, кожна форма контакту 7 отримує свій ідентифікатор CSS.

Ви можете використовувати це для націлювання елементів на основі форми. Крім того, можна надати елементам ваших форм власні CSS-класи та ідентифікатори.

додати клас css та id до контактної форми 7 форми

З ними ви можете націлити їх ще конкретніше.

Коротше кажучи, що б ви не хотіли змінити дизайн своїх форм, у вас є всі інструменти для цього.

Реалізація захисту від спаму

Спам – велика тема, коли мова йде про Інтернет та веб-сайти загалом. Якщо ви залишите свою адресу електронної пошти незахищеною на своєму сайті, там є багато автоматичних програм, які підберуть їх і почнуть надсилати вам непотрібні пропозиції, рибальські листи та ще гірше.

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

На щастя, Контактна форма 7 пропонує прості способи запобігти цьому. Один з них простий: включіть у свою форму вікторину, на яку боти не можуть відповісти, як просте рівняння.

контактна форма 7 захисту від спаму за допомогою тесту

Тег вікторини робить це можливим. Він такий же простий у використанні, як і всі інші теги у Контактній формі 7, і ви можете знайти додаткову інформацію тут.

Крім цього, існує reCAPTCHA. Це сервіс Google для боротьби зі спамом. Вам потрібен ключ API та інтегруйте його з контактною формою 7. Знайдіть інструкції тут. Це може мати наслідки для захисту особистої інформації. Детальніше про це в наступному розділі.

Ви можете використовувати тег reCAPTCHA, щоб додати його до форми. Виробник Контактної форми 7 також має плагін Captcha, який називається Дійсно проста CAPTCHA які ви можете використовувати з тією ж метою.

Ви також маєте можливість використовувати сторонні плагіни для захисту від спаму. Найвідоміший, звичайно, Акісмет та Контактна форма 7 пропонує детальні інструкції щодо як використовувати два разом.

Є й інші, напр Контактна форма 7 Honeypot або WPBruiser. Для останнього вам потрібен а платне продовження для роботи з Контактною формою 7. Існує також більше варіантів, які ви можете легко знайти.

Важлива бічна примітка: контактні форми та GDPR

Можливо, вам відомо, що нещодавно в Європі були внесені зміни в закони про конфіденційність Інтернету. 25 травня 2018 року Загальний регламент захисту даних (GDPR) набрав чинності.

Він вніс низку змін до законів, що стосуються використання особистої інформації в Інтернеті. Це також загрожує значними штрафами для будь-кого, хто порушує правила.

Чому це важливо? Контактні форми збирають особисті дані. З цієї причини, якщо ви потрапляєте під юрисдикцію регламенту (а це робить більшість людей зараз), вам потрібно звернути увагу на деякі речі.

Перші речі перше: ми не юридична контора!

Нижче ви знайдете ряд порад щодо того, як зробити свою контактну форму GDPR сумісною. Ці поради були складені якнайкраще за нашими можливостями.

Однак ніхто тут, на веб-сайтіsesetup.org, не є юристом, і ми не граємо його по телевізору. З цієї причини, наведене нижче не замінює професійну консультацію з юридичних питань і не слід розглядати як юридичну консультацію.

Гаразд, настільки важлива частина “якщо ви потрапили в біду, будь ласка, не повертайтеся і не судіть нас”. Давайте перейдемо до підказок!

Поради щодо відповідності вашої контактної форми GDPR

Ось як створити контактні форми, орієнтовані на конфіденційність:

  1. Не збирайте дані, які вам не потрібні – Контактні форми дають вам вибір, які поля включати. Якщо є дані, які вам фактично не потрібні, припиніть їх збирати. Таким чином, якщо є порушення, ви не можете його втратити.
  2. Вимкнути будь-яке відстеження – Якщо ви використовуєте контактну форму, яка відстежує файли cookie, користувацькі агенти та / або IP-адреси користувачів, вам потрібно відключити це, щоб відповідати GDPR. Контактна форма 7, схоже, не робить жодного, тому нічого робити. Перевірте свою контактну форму, якщо ви використовуєте що-небудь інше.
  3. Отримайте абсолютну згоду – Додайте до своєї форми спосіб, щоб люди дали згоду вам збирати їхні дані. Наприклад, контактна форма 7 пропонує коробка прийому. Важливо: не встановлюйте прапорець включеним за замовчуванням. Користувачі повинні робити це самі. Також додайте повідомлення, яке говорить про те, що ви збираєте та з якою метою плюс посилання на вашу політику конфіденційності.
  4. Встановити політику конфіденційності – Якщо говорити про те, що згідно GDPR, кожен професійний веб-сайт повинен відображати політику конфіденційності, яка пояснює, які дані вони збирають та як ними користуються. Вам також потрібно надати відвідувачам можливість запитувати їх особисті дані та видаляти їх. Це більш складна тема, ніж ми можемо висвітлити тут. Щоб отримати додаткову інформацію, скористайтеся посиланням нижче.
  5. Впровадити HTTPS – Використання SSL / HTTPS шифрує обмін даними між браузером та сервером. Це важливо для контактних форм для збереження персональних даних. Зараз це також вважається загальною практикою. Ознайомтеся з нашим посібником щодо його реалізації.

З усього, що ми прочитали, вищесказаного повинно бути достатньо для того, щоб контактні форми відповідали новому закону. Звичайно, у цій темі для власників веб-сайтів є більше. Ви можете дізнатися більше тут і тут.

Інші великі плагіни для контактної форми для WordPress

Крім Контактної форми 7, там є ще багато плагінів для створення контактних форм у WordPress. Ось ще кілька хороших кандидатів.

Форми Jetpack (безкоштовно)

форми джетпак

Jetpack – це набір потужних плагінів, вироблених WordPress.com (див. Наше порівняння WordPress.org з WordPress.com). Сюди входить модуль для створення контактних форм. Увімкнувши його, ви можете почати вводити форми на веб-сайт WordPress прямо з редактора пошти та сторінки.

Ось деякі особливості виділення:

  • Швидкий і простий у використанні
  • Повідомлення електронною поштою, щоб повідомити про подання форми
  • Внесіть будь-які налаштування всередину редактора WordPress
  • Прекрасне рішення для створення простих форм

Використовуючи форми Jetpack, не забудьте застосувати певний тип захисту від спаму. ми говоримо з досвіду. Вищезгадане WPBruiser це безкоштовний варіант.

HappyForms (безкоштовно)

Логотип HappyFormHappyForms є відносно новим на ринку. Він інтегрується з програмою WordPress Customizer, що робить роботу по-справжньому простою. Крім цього, він має такі особливості:

  • Легкий і швидкий
  • Повністю безкоштовний у користуванні (але постачається з брендингом)
  • Дозволяє створювати форми за допомогою перетягування
  • Показує подані форми на інформаційній панелі WordPress
  • Поставляється з вбудованим захистом від спаму

Контактна форма 7 (безкоштовно)

Контактна форма 7

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

  • Швидкий і простий у використанні
  • Ви можете зробити налаштування всередині WordPress
  • Умовна логіка для контактних форм

Відмінний безкоштовний варіант.

Форми ніндзя (фремій)

Форми ніндзя

Цей плагін дозволяє створювати форми через зручний інтерфейс. Він має безкоштовну версію, але також пропонує преміум-видання з додатковими функціями, додатками, підтримкою, макетами та ін. До них належать:

  • Легко з’єднуйтесь із загальними послугами маркетингу електронної пошти
  • Можливість приймати платежі через ваші форми
  • Синхронізуйте форми з CRM на зразок Salesforce

Членство в Ninja Forms коштувало $ 99 / рік і вище.

Форми тяжкості (премія)

гравітація логотип

Gravity Forms – це, мабуть, найбільш популярне преміум-рішення. Він досить просунутий, має хороший інтерфейс користувача та чудову систему підтримки. На відміну від інших записів у цьому списку, цей плагін є лише преміум-класом, але ви отримуєте багато за свої гроші.

  • Більше 30 типів форм форм
  • Широкий діапазон доповнення
  • Завантаження файлів
  • Можливість подання користувачів відображатися на передній частині
  • Багатосторінкові форми
  • Умовна логіка та розширені обчислення

Якщо вас цікавлять гравітаційні форми, їхні плани починаються від $ 59 / рік.

Форми кальдери (фремій)

форми кальдери

Остаточний запис у цьому списку також дозволяє створювати форми з графічним інтерфейсом. Крім цього, він має такі особливості:

  • Дайте відвідувачам можливість надсилати власні повідомлення
  • Автовідповідачі
  • Функції проти спаму
  • Повністю чуйні веб-форми

Окрім безкоштовної версії, є також стартерне видання починаючи з $ 6,24 / місяць – $ 74,99 / рік.

Форми контактів WordPress в двох словах

Навчитися додавати контактну форму до WordPress – це те, що повинен робити кожен, хто має веб-сайт. Це один з найважливіших способів зв’язку з вами людьми. Контактна форма робить ваш сайт більш професійним, захищає вас від спамерів, забезпечує отримання необхідної інформації та діє як швейцар.

У цій статті ми розповіли, як додати контактну форму до WordPress за допомогою Контактної форми 7. Ми перейшли до розширеного стилю та захисту від спаму для вашої форми. Окрім цього, допис висвітлював важливу тему дотримання GDPR щодо контактних форм та поради щодо її досягнення. Нарешті, ми розглянули ряд інших відмінних плагінів, які ви можете використовувати, щоб додати контактну форму на свій сайт WordPress.

На даний момент ви знаєте все, що вам потрібно, щоб додати форму на власний веб-сайт. Сподіваємось, це призведе до великих можливостей та цікавих нових контактів.

У вас є запитання, як додати контактну форму на свій сайт? Якщо це так, повідомте нас про це в розділі коментарів нижче.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map