Баннер мобильный (3) Пройти тест

Форма обратной связи для сайта: что это и как сделать

Пошаговая инструкция, как написать код для формы обратной связи, настроить стили и интерактивность элемента

Инструкция

3 марта 2024

Поделиться

Скопировано
Форма обратной связи для сайта: что это и как сделать

Содержание

    Формы используются на сайтах, в мобильных приложениях, умных телевизорах и в любых сервисах, которые получают информацию от пользователя. В этой статье сделаем собственную форму для обратной связи и разберемся с тем, как она работает.

    Что такое форма и зачем она нужна

    Форма — веб-страница или ее часть, позволяющая пользователю отправить свои данные на сайт. Она представляет собой онлайн-анкету. В ней есть вопросы с разными вариантами ответов и полями для ввода информации. Данные этой анкеты отправляются на сервер для обработки или просматриваются администрацией сайта.

    Чаще всего формы применяются для авторизации на сайтах и в приложениях. В них обычно просят ввести логин и пароль или другие данные для входа, например адрес электронной почты. Эта информация обрабатывается на сервере и проверяется. Если все верно, то пользователю разрешают войти на сайт.

    Пример формы обратной связи
    Форма авторизации на сайте Skillfactory

    Еще один вид веб-форм — регистрации на мероприятия. Они позволяют организаторам узнать количество потенциальных посетителей, а участникам — получить уведомление о начале и изменениях. К примеру, во время регистрации на вебинар пользователь укажет адрес своей электронной почты, на которую автоматически отправятся приглашение, ссылка для входа и запись в онлайн-календаре.

    В этой статье мы реализуем форму обратной связи. С ее помощью пользователи сайта могут оставить отзыв, задать вопрос администрации или предложить улучшения. Такие формы часто встречаются в онлайн-магазинах или на сайтах, предоставляющих услуги.

    Верстка формы

    Создание любой формы начинается с HTML-верстки страницы. На этом этапе задаем общую структуру онлайн-анкеты и поля, которые пользователь потом сможет заполнить. Мы сделаем форму оценки товара. В ней должны быть поля для имени клиента, адреса электронной почты, кнопка выбора оценки и место для короткого отзыва.

    На страницу форма добавляется с помощью парного тега <form>. Он сообщает браузеру, что в следующем блоке пользователь сможет указать свои данные, которые потом отправятся на сервер.

      <form>
            <!-- Тут будет код формы -->
        </form>

    В качестве атрибута тега обычно указывается action и ссылка на скрипт для обработки данных. Можно не указывать ссылку, но после отправки данных страница будет просто перезагружаться. С помощью атрибута method можно выбрать тип отправки данных. Доступны следующие варианты:

    • post — данные отправятся на сервер в любом объеме. Этот способ подходит для больших форм или заполнения баз данных.
    • get — в этом случае данные запишутся в адрес. К примеру, form.com/form?name=Ivan&age=30&city=Moscow. В адрес помещается только 3 тыс. символов, поэтому этот способ плохо подходит для больших форм. А еще этот метод уязвим, с его помощью нельзя отправлять пароли, номера телефонов и другие конфиденциальные данные — другие пользователи смогут прочитать эту информацию в адресной строке. Например, это может выглядеть так: form.com/form?login=IvanSuperCute&password=qwerty.
     <form action="" method="get">
            <!-- Тут будет код формы -->
        </form>

    В форму нужно поместить поля для ввода данных. Это делается с помощью тегов label и input. Первый понадобится для создания подписи к элементу, а input — для самого элемента. Создадим поле для ввода имени и разберемся с тем, как оно работает:

     <form action="" method="get">
            <label>
                Ваше имя:
                <input
                    type="text"
                    name="name"
                    placeholder="Иван Иванов">
            </label>
        </form>
    Пример формы для имени пользователя
    Поле для ввода имени пользователя

    В label мы помещаем текст, который пользователь увидит перед полем ввода, а само поле задаем с помощью input. Тип поля устанавливается с помощью атрибута type. У него есть следующие значения:

    • text — ввод одной строки;
    • url — поле для ввода URL-адреса;
    • number — число;
    • password — ввод пароля, автоматически заменяющий символы на звездочки;
    • email — поле для ввода адреса электронной почты с автоматической проверкой корректности;
    • tel — номер телефона.

    Это не все значения атрибута type. Полный список можно посмотреть в документации MDN Web Docs

    Теперь создадим второе поле, в котором попросим пользователя указать адрес электронной почты. Будем использовать теги label и input, а в качестве значения атрибута type укажем email:

     <form action="" method="get">
            <label>
                Ваше имя:
                <input
                    type="text"
                    name="name">
            </label>
    
            <label>
                Электронная почта:
                <input
                    type="email"
                    name="email">
            </label>
        </form>
    форма для ввода электронной почты на сайте
    Если в поле электронной почты ввести неправильный тип данных, то браузер сообщит об этом

    Из получившейся формы мы можем узнать имя пользователя и адрес электронной почты для ответа. Теперь добавим текстовое поле для комментария, чтобы клиент смог оставить отзыв. В HTML для этого используют тег <textarea>. Обернем его в <label> с заголовком поля:

    <form action="" method="get">
        <label>
            Ваше имя:
            <input
                type="text"
                name="name">
        </label>
    
        <label>
            Электронная почта:
            <input
                type="email"
                name="email">
        </label>
    
        <label>
            Отзыв:
            <textarea name="comment"></textarea>
        </label>
    </form>
    Пример формы на сайте для отзыва
    Поле отзывы вмещает в себя больше текста, чем стандартное

    Форма почти готова, осталось только добавить кнопку для отправки данных. Сделаем ее с помощью тега <button> и атрибута submit. Введите текст, по которому пользователь сразу поймет назначение кнопки.

    <form action="" method="get">
        <label>
            Ваше имя:
            <input
                type="text"
                name="name">
        </label>
    
        <label>
            Электронная почта:
            <input
                type="email"
                name="email">
        </label>
    
        <label>
            Отзыв:
            <textarea name="comment"></textarea>
        </label>
    
        <button type="submit">
            Отправить
        </button>
    </form>
    обратная связь на сайте с кнопкой
    С помощью кнопки данные можно будет отправить данные

    Хорошим тоном считается подсказывать пользователю, какие данные для ввода от него требуются. К примеру, в поле имя он может ввести и фамилию, а в базе данных она не нужна. Подсказки можно реализовать с помощью атрибута placeholder. В него необходимо поместить текст, который будет виден в поле ввода. Добавим плейсхолдеры ко всем текстовым полям ввода формы:

    <form action="" method="get">
    
        <label>
            Ваше имя:
            <input type="text" name="name" placeholder="Иван Иванов">
        </label>
           
        <label>
            Электронная почта:
            <input type="email" name="email" placeholder="example@email.com">
        </label>
    
        <label>
            Отзыв:
            <textarea name="comment" placeholder="Что вам понравилось?"></textarea>
        </label>
    
        <button type="submit">
            Отправить
        </button>
    
    </form>
    Пример верстки плейсхолдера для формы обратной связи на сайте
    Плейсхолдеры в полях формы упрощают процесс ее заполнения

    Стилизация формы

    Если вы повторяете за нами, то, скорее всего, форма в вашем браузере выглядит иначе. Не переживайте, вы все делаете правильно, но не используете CSS-стили. HTML создает только каркас формы и описывает элементы, используемые на странице. Для добавления шрифтов, цветов и дизайна необходимо подключить стили.

    Форма обратной связи для сайта верстка без стилей
    Так в браузере выглядит форма без стилей

    Для этого в папке проекта надо создать файл style.css, а в теге <head> HTML-документа добавить строчку <link rel=»stylesheet» href=»style.css»>. С ее помощью браузер поймет, где описаны стили конкретной страницы. В сам файл style.css вставьте следующий код и сохраните:

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 50px;
        background-color: #18191C;
        color: #f694ff;
        font-family: "Roboto", sans-serif;
    }
    
    form div {
        margin-top: 1rem;
    }
     
    label, input, textarea, button, select{
        font-size: 1.3rem;
        line-height: 1.2
    }
     
    form {
        width: 30em;
        max-width: 90%;
        margin: 0 auto;
    }
     
    label {
        margin-bottom: 0.4rem;
        display: block;
    }
     
    input, textarea {
        padding: 0.4rem;
        width: 100%;
    }
     
    button {
        margin-top: 2rem;
        background: #f694ff;
        color: #fff;
        border: none;
        padding: 0.6rem;
    }

    К формам можно применять любые CSS-свойства, выбирая в качестве селекторов HTML-теги. Кроме того, стили позволяют реализовывать анимации и поведение элементов при наведении на них курсора или указателя клавиатуры.

    Как оживить форму?

    Мы получили форму обратной связи, с помощью которой пользователь может оставить свой отзыв. Если попробовать ее заполнить и нажать на кнопку «Отправить», то ничего не произойдет. Для отправки формы надо реализовать скрипт, который будет собирать данные полей и вносить их базу данных или пересылать на почту.

    Это можно сделать практически на любом языке программирования. Обычно используют тот язык, на котором реализован весь бэкенд веб-сайта. Так разработчикам не придется возиться с дополнительными интеграциями. В этой статье мы напишем скрипт на PHP. Вот его код:

    <?php
    // Получаем данные из полей ввода
    $name = $_POST['name'];
    $email = $_POST['email'];
    $comment = $_POST['comment'];
    $to = 'example@admin.com';
    $header = 'Отзыв от пользователя'
    
    // Собираем все данные в письмо
    $message = "Имя пользователя: $name \nЭлектронная почта: $email \nОтзыв: $comment";
    
    // Отправляем письмо
    $send = mail($to, $header, $message, "Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
    ?>

    Скрипт надо загрузить на сервер с установленным PHP и открыть доступ к чтению файлов. Теперь надо в верстке формы добавить ссылку на скрипт и указать метод обработки данных:

    <form action="http://example.com/scripts/form/script.php" method="post">
    
    </form>

    Теперь если пользователь нажмет кнопку «Отправить», то все введенные данные отправятся в виде письма администратору.

    Инструкция

    Поделиться

    Скопировано
    3 комментария
    Комментарии
    • Kir Romus

      Здравствуйте! Подскажите код (или готовый плагин) простейшей формы обратной связи (без отправки на почту) только на html+PHP (или вообще на чистом html и JS если можно) с сохранением сообщений на отдельную страницу сайта. [имя_сайта.ru/заявки/заявки_дата.html] Спасибо!

    • Аня

      Спасибо, полезно!

    Больше комментариев