Як створити форму зворотного зв’язку для сайту
Адже на будь-якому сайті має бути, якась, а форма зворотного зв'язку. Це необхідно для того, щоб будь-який відвідувач міг зв'язатися з адміністратором сайту. Звичайно, на багатьох відомих двигунах вже є готове рішення у вигляді плагінів/модулів і т.п. Але навіть на WordPress движку не всі хочуть нагромаджувати свій блог великою кількістю плагінів, тому можна скористатися сервісом Main-ip.
Сервіс працює за принципом створення готової форми зворотного зв'язку. Вам потрібно лише налаштувати всі необхідні поля. Також буде можливість повністю підігнати розмір форми, її колір, колір шрифту тощо. Про це далі.
Перше, що потрібно зробити, це перейти по певній вкладці на головній сторінці сервісу Main-ip.ru. Вкладка так і називається - "Форма зворотного зв'язку":
Після переходу по вкладці вас перекине на сторінку генерації тієї самої форми зворотного зв'язку, де ви зможете її згенерувати та налаштувати так, як вам потрібно.
Давайте розберемо кожне поле, щоб при генерації ви змогли одразу знати, що і за що відповідає.
Перше - "розмір по горизонталі". Із цим думаю всім зрозуміло. Це розмір форми по горизонталі.
Увага!Ви завжди можете подивитися, як це виглядатиме у вас на сайті. Для цього просто задайте будь-які бажані значення та натисніть на кнопку "Генерувати". У результаті з'явиться знизу така форма, яка відповідає всім вашим налаштуванням і буде у вас на сайті.
Йдемо далі.Друге поле – “Назва поля введення імені”. За стандартом воно називається "Ваше ім'я". Власне, його ми так і залишимо. Бо в дане поле вводитимуть ім'я. Якщо хочеться чогось незвичайного (наприклад, якщо розважальний сайт якоїсь гри), то можетезамість "Ваше ім'я", зробити "Ваш нік". У результаті на вашому сайті користувачі якоїсь гри будуть вводити свій нік. Це щодо розважальних сайтів. Для Інтернет-магазину найкраще залишити так, як є – Ваше ім'я.
Наступне поле – “Назва поля введення e-mail”. У цьому полі відвідувачі сайту вводитимуть свій e-mail. За стандартом називається "Зворотний e-mail". Але я все ж таки порекомендував би змінити на щось більш звичайне, наприклад - "e-mail" або "Ваш e-mail". Так гадаю, буде зрозуміліше.
В інші додаткові поля можете додати щось подібне: “icq”, “skype” тощо. Власне включаємо фантазію та додаємо поля, які вам потрібні.
Після всіх додаткових полів (а їх всього 6 штук), йде поле – “Назва поля введення повідомлення”. Тут також за стандартом непогано налаштовано, просто й зрозуміло – “Повідомлення”. Думаю, кожен відвідувач вашого сайту здогадається, що у вікно потрібно буде писати своє повідомлення. На крайній випадок, можете в цьому полі написати – “Ваше повідомлення”. Ось так це виглядатиме:
Тепер залишилися налаштування самого вікна форми зворотного зв'язку. Тобто його вигляд.
Висота смужки із заголовком- це висота тієї області, де написано "Зворотній зв'язок". За стандартом коштує 20. Ви можете настроїти так, як вам буде зручно. Я поставив 33:
Колір смужки із заголовком- знову ж таки, це колір тієї смужки, де написано "Зворотній зв'язок". Підбираємо той колір, який більше вписуватиметься у ваш дизайн сайту. Хоча стандартний колір теж непоганий.
Йдемо далі. А далі в нас йде поле - "Колір тексту заголовка". Це поле відповідає за колір заголовка форми, тобто колір назви - "Зворотній зв'язок". За стандартом він іде білий(FFFFFF).
Поле - "Висота полів введення даних". Цей розмір відповідає розмір самих полів вводу. Тобто, наприклад, за розмір поля "Ваше ім'я". Стандартне значення – 20. Власне, я б його так і залишив, бо вважаю, що це оптимальний розмір. Але знову ж таки, у всіх різний дизайн, комусь краще навпаки розширити дане поле, а комусь залишити так, як є.
“Висота поля введення повідомлення”– це вже висота поля для введення повідомлення. Якщо у вас на сторінці, де розташовуватиметься форма зворотного зв'язку, вистачає місця для розширення цього вікна, то можете трохи додати висоти. А взагалі, дуже велике не варто робити. За стандартом можна сказати оптимальне.
“Колір тексту форми”– це той колір, який відображається у заголовку кожного поля. Наприклад – “Ваше ім'я”, “e-mail” тощо:
У цьому випадку для прикладу я поставив червоний. Оптимальний колір буде чорний. Ще, що забув сказати. У даному сервісі ви можете відразу ж налаштувати необхідний колір, не використовуючи жодних сторонніх програм (про яку я говорив вище). Для цього потрібно лише натиснути на поле, де вписаний HTML-код кольору. Але все-таки пораджу використати програму, про яку я говорив. Так як ви зможете більш ретельно вибрати колір, який забажаєте.
"Колір всього тіла форми"- це колір самої оболонки форми. Приклад на скріншоті:
За стандартом йде білий колір оболонки, на скріншоті, як ви бачите, я поставив сірий. Раджу все ж таки залишити білий колір, ну або дивитися по дизайну вашого сайту. Експериментуйте!
“Колір тексту полів форми”– це колір введення тексту у всі поля. За стандартом варто, можна сказати, темно-синій колір:
Я особисто звик до чорного, але вирішувати вам.
"Колір полів форми"- це колір нутрощів самих полів. Скріншот:
Як бачимо, я для прикладу поставив жовтий колір.
“Колір рамочки навколо форми”– це колір обведення кожного поля та самої форми.
Поставив червоний колір. За стандартом йде сірий.
Ну і останнє поле - "розмір шрифту". Це розмір шрифту кожного напису. За стандартом іде – 12. Радив би так і кинути. Так як це оптимальний та середній шрифт.
Всі. Всі можливі функції налаштування форми зворотного зв'язку я описав. Залишилося тепер отримати сам код та вставити його у себе на сайті. Для цього внизу натисніть на кнопку “Отримати код”.
У результаті у вас відкриється вікно, в якому буде HTML-код, який і потрібно розмістити у себе на сторінці, де ви хотіли б, щоб відображалася форма зворотного зв'язку.
