Форма зворотнього зв'язку що потрібно. Веб-дизайн і пошукова оптимізація

Від автора: вітаю вас, друзі. Дана стаття буде продовженням, в якій ми реалізовували відправку даних форми на сервер без перезавантаження сторінки. Тут ми продовжимо цю тему і дізнаємося, як прийняти дані на сервері і реалізувати відправку форми на електронну пошту (email). Отже, давайте налаштуємо форму зворотного зв'язку і додамо можливість її відправки на email.

Вихідні файли поточної статті ви можете завантажити за.

У цьому уроці ми зробимо все максимально просто і своїми силами. Зокрема, для відправки листів ми скористаємося спеціальною функцією PHP під назвою mail (), яка раніше часто використовувалася для відправки листів.

Почнемо з синтаксису функції mail. Ця функція має три обов'язкових параметра і два опціональних (не обов'язково). Обов'язкові параметри:

to - email одержувача (також можна вказати кілька адрес, перерахувавши їх через кому);

subject - тема листа;

message - текст листа.

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

Давайте спробуємо відправити лист, використовуючи дану функцію. Зробимо це в файлі mail.php, в якому ми приймаємо дані з форми. Новий код даного файлу буде таким:

Ваше повідомлення відправлено

Помилка!

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

Як бачимо, код працює, у відповідь ми отримуємо повідомлення про те, що лист надіслано. Оскільки ми працюємо на локальному сервері, тут листи реально не відправляються функцією mail (), вони зберігаються у вигляді текстового файлу в спеціальній папці. В Open Server це папка \\ userdata \\ temp \\ email \\. Відкриємо цю папку і переконаємося, що лист там є, приблизно так воно буде виглядати:

Відмінно! Залишилося кілька моментів, які не завадить поправити в JS скрипті. Наприклад, необхідно виводити повідомлення не простим текстом, а саме кодом HTML, а також очищати поля форми після відправки повідомлення. Підсумковий JS код буде таким:

$ (Function () ($ ( "# recall"). Submit (function (e) (e.preventDefault (); var data \u003d $ (this) .serialize (); $ .ajax ((url: "mail.php ", type:" POST ", data: data, beforeSend: function () ($ (" # submit "). next (). text (" Відправляю ... ");), success: function (res) ($ ( "#recall"). find ( "input"). val ( ""); $ ( "# submit"). next (). html (res);), error: function () (alert ( "Помилка! ");)));));));

Важко зараз уявити сайт без форми для зворотного зв'язку.

Тому якщо на вашому ресурсі контактного розділу немає - варто його встановити. Розберемося, як це зробити.

Рішення для організації зворотного зв'язку

Природно, що зараз існує кілька способів організації зворотного зв'язку на сайті: від універсальних скриптів на php до плагінів і модулів для CMS. Тобто, необхідність писати код вручну, як бачите, немає.

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

• вдатися до послуг безкоштовних онлайн-сервісів, які автоматично генерують код HTML форми зв'язку. Але при цьому файл обробки php потрібно буде писати і ставити самостійно. Ось один з ресурсів для цих цілей
• Звернутися по допомогу безкоштовних онлайн-сервісів, що генерують код HTML і надають обробники даних на php, які найчастіше розміщуються на серверах цих сервісів. Один із прикладів подібних ресурсів
• Знайти в Інтернеті безкоштовні скрипти для установки форми зворотного зв'язку. Цей варіант можна застосовувати для людей, які знають на певному рівні HTML і PHP, адже скрипт в будь-якому випадку доведеться адаптувати конкретно під свій сайт.

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

Проста установка форм зворотного зв'язку в HTML

Розглянемо одну з популярних програм для написання і установки HTML-форм зворотного зв'язку з капчі. Широкий їх вибір представлений, наприклад, на цьому сайті. Сайт російськомовний, визначитися з вибором буде просто, а сама установка займе не більше трьох хвилин.

Але для початку слід не забути внести поправки в стандартний файл config.php - потрібно змінити кодування і написати вірний електронну адресу одержувача.

Папку з виправленими файлами потрібно скопіювати в кореневу папку сайту, але перед цим обмеживши її індексацію у файлі Robots.txt ( Disallow: / sendmail-zakaz).

По суті, це все - якщо дії виконані правильно, готова форма буде виглядати так:

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

Після того, як всі необхідні параметри внесені, слід ввести перевірочну капчу і натиснути на кнопку «Генерувати», а після - «Отримати код».

Отриманий код потрібно просто скопіювати на обрану сторінку сайту.

Можна зробити просту контактну форму власноруч. Для цього потрібно створити файл form.php і зберегти в ньому наступний код:

Для функціонування форми потрібен файл-обробник. Назвемо його mail.php і збережемо в такий код:

Форма зворотнього зв'язку в Joomla

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

Отже, для настройки компонента заходимо в адміністративну панель і вибираємо вкладку «Компоненти / Контакти / Категорії контактів».

Відкриється сторінка, на якій не буде жодної категорії. Щоб створити її, натиснемо на кнопку «Новий».

Система запропонує заповнити поля «Тема» і «Псевдонім». Зробивши це, потрібно поставити галочку «Так» в рядку «Опубліковано».

Налаштування потрібно зберегти, натиснувши однойменну кнопку в правому верхньому кутку вікна. Категорія є, залишилося створити сторінку з контактною формою. Для цього потрібно зайти у вкладку «Контакти» і натиснути на кнопку «Новий» у правому верхньому куті.

Заповнюємо відкрилося діалогове вікно. Обов'язково заповнюємо рядок «Назва», рядок «Ім'я користувача» ,. Ставимо галочку «Так» в рядку «Опубліковано» і вказуємо категорію даного контакту. Перейшовши трохи нижче, виявимо вікно «Зв'язок з користувачем», де потрібно вказати контактну особу-одержувач повідомлень.

Обов'язково заповнюється і поле «Інформація», де необхідно вказати положення форми на сайті і електронну адресу одержувача. Інші пункти меню заповнювати можна за бажанням.

Форма зворотнього зв'язку налаштована, залишилося розташувати її на сайті. Для цих цілей треба перейти на адміністративну панель і, вибравши вкладку «Меню», визначитися з місцем відображення пункту.

У цьому меню створюємо новий пункт. Для цього натискаємо кнопку «Створити» і в меню вибираємо «Контакти / Сторінка контакту».

Відкриється сторінка, на якій потрібно задати назву пункту меню, прописати його псевдонім, включити його відображення і в поле основних параметрів «Виберіть контакт» вказати контактні дані, до яких буде прив'язаний цей пункт меню. Зберігаємо налаштування.

Переходимо на сайт, знаходимо пункт «Контакти» і натискаємо на нього. Має відкритися наступна сторінка:

Зворотній зв'язок для WordPress

У цій системі форму зворотного зв'язку можна створити, також вдавшись до допомоги плагінів. Найпопулярніший і функціональний - плагін Contact Form 7.

Після цього потрібно пройти у вкладку «Сторінки / Додати нову», і, включивши режим HTML, вставити раніше скопійований код форми зворотного зв'язку

Ви знаєте, що до 80% користувачів залишають ваш сайт, що не заповнивши заявку тому, що форма зворотного зв'язку на вашому сайті далека від ідеалу? Або ви впевнені в тому, що ваша форма заявок ідеальна і має максимальну конверсію?

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

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

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

Для чого потрібна форма зворотного зв'язку

Не тільки для здійснення замовлення / покупки. За допомогою форми зворотного зв'язку ви з'ясовуєте у користувачів, що їм подобається / не подобається, які є «косяки» в роботі компанії і навіть отримуєте готові поради щодо її поліпшення. Розмова з користувачами - це:

а) підвищення лояльності до вашої компанії;

б) можливість швидко відреагувати на запит, знизити негатив і зберегти клієнта;

в) можливість поліпшити продукт або сервіс;

г) спосіб збільшити продажі.

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

Правило №1. Максимально спрощуйте форму

Яку з цих форм ви заповніть охочіше?

або таку

Залишайте тільки найважливіші поля. Відвідувачі більшості сайтів не люблять заповнювати велику кількість полів

Якщо правило спрощення форми виконали, то варто очікувати збільшення конверсії на 30-60%.

Порада. Приберіть все зайве, залиште 2-3 поля або навіть 1. Зазвичай це «Ім'я», «номер телефону або e-mail». Якщо у вас інтернет-магазин і ви робите форму для замовлення, то полів буде трохи більше: «Ім'я», «№ телефону або E-mail», «Варіант доставки», «Кількість товару», «Адреса». Дивіться, для яких цілей ви робите форму зворотного зв'язку, і максимально спрощуйте її.

Правило №2. Форма повинна бути помітна

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

Правило №3. Мінімум «обов'язкових полів»

Одне обов'язкове поле - телефон

Часто на сайтах компаній можна спостерігати не тільки перевантажену зайвими полями форму, а й обов'язковість заповнення цих полів. Формулювання «обов'язкове поле» присутній на 99% сайтів. Хочете збільшити конверсію? Приберіть обов'язкове заповнення всіх полів, крім телефону. Якщо людина захоче, він сам заповнить ті поля, які вважає потрібними, але основне поле - номер телефону, яке дозволить передзвонити клієнтові й уточнити всю іншу інформацію. Головне не забудьте скласти правильні скрипти для менеджерів.

В яких випадках конверсія з форм падає:

• Падіння конверсії на 3%, якщо ви просите заповнити поле із зазначенням віку
• Падіння конверсії на10%, якщо необхідно ввести ПІБ
• Падіння конверсії на2%, якщо вас цікавить, в якому населеному пункті живе відвідувач
• Падіння конверсії на4%, якщо необхідно заповнити адресу проживання

Якщо поля про доставку, адресу та ПІБ присутні в інтернет магазині, то користувач звичайно ж їх заповнює і на конверсію це не впливає. Але якщо ви хочете, щоб він заповнив дані, щоб відправити вам заявку, то конверсія безумовно буде падати.

Правило №4. Посилання в формі (умови звернення)

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

Приклад такої форми:

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

Правило №5. Згода на обробку даних

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

Правило №6. Випадаючих списків бути не повинно

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

Правило №7. Приберіть каптчу з форми

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

У студії artcell ми якраз використовуємо таку технологію. Як можете помітити каптчі в наших формах немає і СПАМ ми не отримуємо.

Правило №8. Автоуведомленіе про те, що форма відправлена

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

Правило №9. Повідомлення по sms

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

То яка вона - ідеальна форма зворотного зв'язку?

Виділена в рамку або кольором, що дозволяє її зробити більш помітною на тлі решти інформації на сайті

Мінімум полів для заповнення

Одне або два обов'язкових поля

Відсутність полів з випадають списками

Наявність чекбокса для згоди на обробку одержуваних даних

Посилання сюди і доп.условій відразу в формі без зайвих переходів на інші сторінки сайту

відсутність каптчі

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

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

Форма зворотнього зв'язку для сайту, Яку я вам покажу - заснована на використанні технології Ajax. Але не хвилюйтеся, знати цього вам не треба, все вже готово, залишиться тільки встановити цю форму і налаштувати під себе!

Хлопці - скрипт дуже давно застарів. У кого-то працює, у кого то немає. А мені розбиратися і вже тим більше оновлювати - лінь. Тому тестируйте на свій розсуд.

Форма зворотнього зв'язку php з відправкою на пошту

ця форма зворотного зв'язку на сайт дуже функціональна сама по собі, до неї підключено кілька плагінів, які створюють привабливий зовнішній вигляд і перевіряють валідність (читай правильність) введених вами даних. Ці плагіни працюють на великому і могутньому! А називаються так:

1. JQTransform - плагін який дозволяє зробити нашу форму зворотного зв'язку красивою!

2. formValidator - а цей плагін перевіряє форму контактів на правильність введеної інформації і в разі чого виводить підказки!

Для повноцінної роботи цієї форми буде використаний клас - PHPMailer. Вважається одним з кращих!

Замітка для найрозумніших:

Форму зворотного зв'язку для сайту можна зробити на HTML! Але працювати вона почне лише за допомогою PHP! І ніяк інакше!

Це я для тих, хто шукає форму зворотного зв'язку тільки на HTML. Зробити зробите, але працювати вона не буде!

Тому, ваш повинен підтримувати PHP, а для цієї форми контактів, PHP повинен бути не нижче п'ятої версії. Сподіваюся, зрозуміло викладаю? Тим більше, зараз, будь-яка нормальна хостинг підтримує ці умови!

Цю форму зворотного зв'язку я відкопав на сайті www.tutorialzine.com посилання веде безпосередньо на сторінку оригіналу, тобто сайт автора даної форми!

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

Зізнаюся чесно, ми з цієї «формочкой» провозилися два дні, так як починали спливати різні косяки, а недороблену до кінця форму зворотного зв'язку, тим більше таку красиву, викладати не хотілося! Так що якщо ви любитель все зробити самі, і в вашу світлу голову влізе думка - самому русифікувати дану форму, дам кілька порад, так як просто перекладом фраз не обмежиться:

1. Ця форма зворотного зв'язку заточена під буржуїв, від туди ж і скачав, тому вона буде надсилати вам замість нормальних російських символів - кракозябли. Розберіться з кодуванням. Та й взагалі все «тюлені» будуть пов'язані з цим!

2. Скрипт валідації спочатку не розуміє наші букв, тому їх там треба буде прописати!

3. Навіть після цих дій якщо вказати тему листа російською, лист приходить з темою - No subject (сподіваюся правильно написав), це лікується якщо вказати кодування в файлі класу PHPMailer.

4. В оригінальній формі текст в полях введення притискався до низу, а не по середині. Це глюк плагіна JQTransform.

Ну, ніби все розписав і попередив. Поїхали далі!

Добрий день, форма зворотного зв'язку має бути присутня на кожному сайті. Сьогодні я покажу приклад готової форми для вставки на будь-який сайт, в тому числі і на движок wordpress. Готовий приклад html і php коду можна буде скопіювати на свій сайт. Крім готового прикладу, існує багато плагінів, які так само користуються великою популярністю. На багатьох сайту така форма вже вбудована в тему, але іноді буває необхідність додати ще одну на іншу сторінку або замінити стару.

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

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

Готова форма зворотного зв'язку для сайту на html

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

На самому початку коду, в першому рядку, ви повинні вказати свій шлях до php файлу form.php (про нього трохи пізніше). Більше нічого змінювати не потрібно. Якщо вас не влаштовує назва форми і її поля, ви завжди можете додати нові або змінити старі. Так само можна додати свої стилі прямо суду в таблицю. Якщо такий варіант вам незручний, пропонуйте нові класи і вже потім додавайте стилі через ваш файл style.css

Хто не знає, як це можна зробити, заходимо в адмінку сайту, переходимо в редактор і відкриваємо файл style.css. У самий кінець таблиці стилів додаємо ось цей код. У підсумку повинен бути вставлений код форми на сторінку і ваші css стилі в таблицю style.css

Inp (padding: 10px; border: 1px solid # E5E5E5; width: 200px; color: # 999999; box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba (0 , 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba (0, 0, 0, 0.1) 0px 0px 8px;)

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

Php код форми

З розміткою форми визначилися, красу навели, тепер необхідно створити файл з розширенням php і додати в нього ось такий код. Файл додавайте через FTP клієнт на ваш сайт. Більшість користувачів використовують CMS, скидайте даний файл в папці з вашою темою. Адреса та назва цього файлу, ви повинні спочатку прописати в розмітці вашої форми, яку я показував вище. Я прописав повний шлях для прикладу, щоб було зрозуміло, що і куди необхідно вставити.

(