Сучасний сайт неможливо уявити без форми зворотнього зв'язку. Ця невід'ємна частина має бути присутня на будь-якому сайті, незалежно від його тематики. Контактна форма дозволяє вебмайстру повноцінно спілкуватися зі своїми відвідувачами, не публікуючи у вільному доступі своїх даних, таких як e-mail або номер телефону.

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

Які завдання вирішує контактна форма на сайті?

Тим не менш, спокій веб-власника – це не єдине завдання, з яким успішно справляється контактна форма. Їй вдається досить успішно здійснювати ще кілька функцій. Найважливішими з них можна назвати:

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

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

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

Як отримати контактну форму?

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

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

FormDesigner - ідеальне рішеннядля створення контактної форми

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

• Створення контактних форм з можливістю надсилати файл власнику сайту;
• Повідомлення про помилки під час створення форм;
• Можливість створення мультимовних форм;
• Візуальний дизайнер форм;
• Детальна статистиказа всіма заявками та багато іншого.

Робота із сервісом FormDesigner

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

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

Другий розділ «Елементи» потрібний для того, щоб можна було додавати, видаляти або просто редагувати поля для заповнення. Їх можна зробити не просто текстовими, а й цифровими і навіть із зображеннями. Також у цьому розділі можна встановити кнопки соціальних мереж.

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

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

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

Відео урок зі створення контактної форми на сайті

З цієї статті ви дізнаєтесь, як створити форму зворотного зв'язку, який надсилає дані за допомогою AJAX. Ми будемо використовувати jQuery та простий поштовий PHP-скрипт для надсилання даних форми на email.

Створення HTML-форми

Наше перше завдання – налаштувати HTML-форму. Задайте для елемента ідентифікатор ajax-contact, для атрибуту method встановіть значення post, а атрибута action — значення mailer.php .

Name: Email: Message: Send

Ми створили форму з полями для введення імені користувача, адреси електронної поштита повідомлення. Зауважте, що кожне поле форми містить атрибут required . У браузерах, що підтримують валідацію форм HTML5, його використання не дозволяє надсилання даних, якщо поля не заповнені.
Потім потрібно створити , який буде використовуватися для відображення повідомлень про помилки або про успішну відправку даних. Розмістіть цей елемент вище за тег і надайте ідентифікатор form-messages .

Тепер потрібно завантажити приклади коду та скопіювати файл style.css у каталог проекту. Також необхідно додати елемент, який вказує браузеру завантажити файл CSS.

Потрібно створити два елементи, які посилаються на бібліотеку jQueryта файл app.js. Додайте їх перед закриваючим тегом.

Важливо спочатку завантажити файл jquery-2.1.0.min.js, тому що для скрипту app.js потрібно jQuery.
Це весь HTML код, який знадобиться. Тепер розглянемо JavaScript.

Передача даних форми за допомогою AJAX

Створіть у каталозі проекту новий файлз ім'ям app.js. Він буде включати код, необхідний для відправлення даних форми за допомогою AJAX.
Скопіюйте наступний код у файл app.js.

Ми створили дві змінні form і formMessages , які посилаються на відповідні елементи HTML.
Потім потрібно створити прослуховувач, який перехоплює подію submit у формі. Це можна зробити, використовуючи метод jQuery submit.

// Встановлюємо прослуховувач для контактної форми. $(form).submit(function(event) ( // Блокуємо відправлення даних форми в браузері. event.preventDefault(); // TODO ));

Передаємо методу submit функцію, яка буде виконана, коли користувач надішле дані форми. Ми також вказали браузеру не відправляти форму, як завжди, викликавши для події метод preventDefault.
Тепер потрібно серіалізувати ці форми. Вони будуть перетворені в рядок ключ / значення для відправки за допомогою AJAX- запита. Використовуйте jQuery-методСеріялізує для серіалізації даних форми, а потім збережіть результат у змінній форміData .

// Серіалізуємо дані форми. var formData = $(form).serialize();

Тепер напишемо код, який відповідає за відправлення даних форми на сервер та обробку відповіді. Скопіюйте наступний код у файл app.js.

// Надсилання даних форми за допомогою AJAX. $.ajax(( type: "POST", url: $(form).attr("action"), data: formData ))

Для створення нового AJAX-запиту використовується jQuery-метод ajax. Ми передали об'єкт методу ajax , який включає ряд властивостей, що використовуються для налаштування запиту. Властивість type вказує метод HTTP, який буде використовуватися для надсилання запиту. У нашому випадку – це метод POST.
Властивість url - це розташування скрипта, який оброблятиме дані форми. Ми задаємо значення для цієї властивості, витягуючи атрибут actionіз форми. Значення властивості data задається за допомогою змінної formData, яку ми створили раніше.
Потім потрібно опрацювати успішну відповідь, отриману з сервера. Скопіюйте наступний код безпосередньо після закривання дужки виклику ajax. Зверніть увагу, що я навмисне залишив крапки з комою.

Done(function(response) ( // Переконуємося в тому, що div formMessages містить клас "success". $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Задаємо текст повідомлення $(formMessages).text(response); // Очищаємо форму $("#name").val(""); $("#email").val(""); ").val(""); ))

Метод done буде викликатись, якщо запит завершиться успішно. Спочатку перевіряємо, що елемент formMessage s містить клас success . Потім встановлюємо текстовий вміст елемента, використовуючи дані, що повертаються поштовим скриптом. Після цього очищаємо значення кожного поля форми.
В останньому фрагменті JavaScript-кодунам потрібно написати, що має статися, якщо сталася помилка. Скопіюйте наступний код у файл app.js.

Fail(function(data) ( // Переконуємося, що div formMessages містить клас "error". $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Встановлюємо текст повідомлення. if (data.responseText !== "") ( $(formMessages).text(data.responseText); ) else ( $(formMessages).text("Oops! An error occured and your message could not besent."); )));

Метод fail викликається, якщо поштовий скрипт повертає помилку. Спочатку перевіримо, що елемент formMessages містить клас error. Потім перевіряємо, чи AJAX повертає запит responseText . Якщо це так, використовуємо текст для встановлення вмісту елементаформа Messages. В іншому випадку використовується стандартне повідомленняпро помилку.
Це весь код HTML і JavaScript, необхідний створення контактної форми на AJAX. У наступному розділі ми створимо скрипт, який відповідає за обробку даних форми та надсилання електронної пошти.

Створення поштового PHP-скрипту

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