Комментариев нет

Привет всем!
Хочу поделиться с вами готовой формой обратной связи для сайта, работающей на PHP, jQuery и имеющую некоторые бонусы, такие как встроенная защита от спама и запрет нажатия кнопки. Никаких особых умений вам не потребуется, достаточно будет знания основ html верстки и элементарной логики.

Форма обратной связи

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

Давайте сразу рассмотрим все поля, которые будут вам доступны в этой форме.

Структура полей формы обратной связи

  • имя отправителя
  • почтовый адрес
  • телефон
  • компания отправителя
  • сайт отправителя
  • продукт (направление)
  • список необходимых услуг
  • дополнительная информация
  • антиспам / защита от роботов

Особенности и возможности

  • блокировка кнопки «отправить» до выполнения необходиых условий
  • простой селектор для проверки и защиты от роботов
  • дополнительная кнопка «очистить все поля»

Что входит в форму обратной связи?

  • HTML разметка (создание макета)
  • Стилизация полей формы на CSS/SCSS
  • jQuery + js
  • PHP обработчик

Создание HTML разметки

И так, давайте посмотрим на разметку формы:

<form class="form" method="post" action="/feedback.php">
    <div class="form-row">
        <div class="form-group col-6">
            <label for="name">Представьтесь, пожалуйста: <span style="color: red">*</span></label>
            <input type="text" name="name" id="name" onkeyup="checkParams()" placeholder="Как к вам обращаться?" required />
        </div>
        <div class="form-group col-6">
            <label for="mail">Укажите ваш email: <span style="color: red">*</span></label>
            <input type="email" name="mail" id="email" onkeyup="checkParams()" placeholder="Email" required />
        </div>
    </div>
    <div class="form-group">
        <label for="phone">Укажите ваш телефон: <span style="color: red">*</span></label>
        <input type="tel" name="phone" id="phone" onkeyup="checkParams()" placeholder="Номер телефона +7" required />
    </div>
    <div class="form-group">
        <label for="company">Напишите, из какой вы компании: </label>
        <input type="text" name="company" placeholder="Введите название" />
    </div>
    <div class="form-group">
        <label for="website">Укажите ваш сайт: </label>
        <input type="text" name="website" placeholder="Адрес вашего сайта" pattern="(http|https)://.+" />
    </div>
    <div class="form-group">
        <label for="product">Продукт: </label>
        <input type="text" name="product" onkeyup="checkParams()" placeholder="Продукт" />
    </div>
    <div class="form-group">
        <label for="services">Выберите услугу: </label>
        <select name="services">
            <option value="none">Услуга не выбрана</option>
            <option value="1">Услуга_</option>
            <option value="2">Услуга_</option>
            <option value="3">Услуга_</option>
            <option value="4">Услуга_</option>
            <option value="5">Услуга_</option>
            <option value="6">Услуга_</option>
            <option value="7">Услуга_</option>
            <option value="8">Услуга_</option>
        </select>
    </div>
    <div class="form-group">
        <label for="message">Доп. информация:</label>
        <textarea name="message"></textarea>
    </div>
    <div>
        <select name="who">
            <option value="robot">Я Робот</option>
            <option value="man">Я человек</option>
        </select>
    </div>
    <div class="pt-3">
        <input type="submit" id="submit" class="btn" value="Отправить" disabled />
        <button type="button" class="btn" onclick="form.reset()">Очистить</button>
    </div>
    <div class="py-3">
        <small>Поля отмеченные звездочкой <span style="color: red">*</span> являются обязательными для заполнения.</small>
    </div>
</form>
  1. Здесь есть три первых поля, у которых указан id и некое js-событие onkeyup="checkParams()" (они понадобятся нам позднее). Для них будет проводиться обязательная проверка правильности ввода данных. За это отвечает атрибут required. Если вам необходимо убрать или сделать обязательным другое поле, просто удалите/добавьте этот атрибут.
  2. Несколько дополнительных полей, не являющихся обязательными.
  3. Селектор выбора предоставляемых услуг select.
  4. Поле дополнительной информации textarea.
  5. Селектор для проверки на «человечность» — Я работ | Я человек.
  6. Две кнопки: Отправить и Стереть информацию в заполненных полях.
  7. По-хорошему, здесь еще не хватает поля с галочкой, для подтверждения согласия на обработку данных, но ее добавлению, надеюсь, не вызовет у вас трудностей.

Вроде все. Едем дальше.

Оформление формы CSS/SCSS

Все поля формы стилизованы при помощи CSS flexbox (Flexible Box Layout Module) и разбиты на группы дополнительными классами. Разумеется, вы можете создать свои собственные стили. Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.

.form {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        display: block;
        padding: 12px 15px;
        line-height: 1.5;
        width: 100%;
        font-size: 16px;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        background-clip: padding-box;
        background-color: #fff;
        box-shadow: 0 1px 0 0 rgba(255, 255, 255, .05), inset 0 1px 2px 0 rgba(0, 0, 0, .05);

        &:focus {
            outline: none;
        }
    }

    .form-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .form-group:nth-child(1) {
            input {
                width: 95%;
            }
        }
    }

    .col-6 {
        position: relative;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .pt-3 {
        padding-top: 1rem;
    }

    .form-group {
        margin-bottom: 1rem;

        label {
            line-height: 1.7;
            letter-spacing: .3px;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 900;
        }

        textarea {
            min-height: 110px;
            resize: vertical;
        }
    }
}

Настройка PHP кода

Теперь переходим к обработчику формы, где все действия начинаются с зависимости от выбранного селектора — Бот/Человек.

<?

if ($_POST['who'] == 'robot') {
    header('Refresh: 5; URL=https://www.site.ru');
    echo ('<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body><h1 style="color:red">Ошибка!</h1>
    <p><b>Не отправлено,</b> так как вы являетесь роботом!<br>
    Через 5 секунд вы вернетесь на главную страницу.</body></p>');
} elseif ($_POST['mail'] == true) {
    $mail = $_POST['mail'];
    if ($_POST['name'] == true) {
        $name = $_POST['name'];
    } else {
        $name = 'Отправитель';
    };

    if ($_POST['phone'] == true) {
        $phone = $_POST['phone'];
    } else {
        $phone = 'Телефон';
    };

    if ($_POST['company'] == true) {
        $company = $_POST['company'];
    } else {
        $company = 'Компания';
    };

    if ($_POST['site'] == 'http://') {
        $site = $_POST['website'];
    } else {
        $site = 'Сайт отправителя';
    };

    if ($_POST['product'] !== true) {
        $product = $_POST['product'];
    } else {
        $product = 'Продукт';
    };

    if ($_POST['services'] == none) {
        $ser = 'Услуга не выбрана';
    } elseif ($_POST['services'] == 1) {
        $ser = 'Услуга_';
    } elseif ($_POST['services'] == 2) {
        $ser = 'Услуга_';
    } elseif ($_POST['services'] == 3) {
        $ser = 'Услуга_';
    } elseif ($_POST['services'] == 4) {
        $ser = 'Услуга_';
    } elseif ($_POST['services'] == 5) {
        $ser = 'Услуга_';
    } elseif ($_POST['services'] == 6) {
        $ser = 'Услуга_';
    } elseif ($_POST['services'] == 7) {
        $ser = 'Услуга_';
    } else {
        $ser = 'Услуга_последняя';
    }

    if ($_POST['message'] == true) {
        $question = $_POST['message'];
    } else {
        $message = 'Доп. информация';
    };

    $mess = '
    Отправитель: ' . $name . '
    E-mail:' . $mail . '
    Телефон:' . $phone . '
    Из компании: ' . $company . '
    Сайт отправителя: ' . $site . '
    Продукт: ' . $product . '
    Необходимые услуги: ' . $ser . '
    Доп. информация: ' . $message;

    $email = 'почтовый_адрес_вашего_сайта';
    $headers = "From: $email\r\nReply-To: $email" . "\r\n" . "MIME-Version: 1.0\r\nContent-type: text/plain; charset=utf-8";

    mail('адрес_доставки_писем', 'Форма обратной связи', $mess, $headers);
    header('Refresh: 5; URL=http://www.site.ru');
    echo ('<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body><h1>Ваше сообщение отправлено!</h1>
    <p>Наши специалисты свяжутся с вами в ближайшее время.<br>
    Через 5 секунд вы вернетесь на главную страницу.</body>');
    $title = 'Сообщение отправелно';
} else {
    header('Refresh: 5; URL=http://www.site.ru');
    echo ('<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body><h1 class="red">Ошибка отправки сообщения!</h1><p>Проверьте правильность заполненных данных.<br>
    Через 5 секунд вы вернетесь на главную страницу.');
    $title = 'Ошибка!';

};

echo ('<br/><br/>');

?>

<?
include $_SERVER['DOCUMENT_ROOT'] . '/inc/inter';
include $_SERVER['DOCUMENT_ROOT'] . '/inc/footer'; ?>

Что здесь есть?

  • header('Refresh: 5; URL=https://www.site.ru'); — после заполнения формы ботом, отправляет на страничку с уведомлением и через 5 секунд возвращает на указанную в поле.
  • mail, name, phone, ... — настройка соответствия html полей. Здесь вам необходимо указать все соответствующие имена name="" в форме обратной связи. Таким образом, в поле services вам необходимо указать точно такой же порядок опций, что и в html разметке.
  • $mess — это тело сообщения, которое будет приходить в письме. Вы можете поменять их местами, изменить названия или просто удалить/закомментировать не нужные.
  • $headers — обязательная строка, указывающая кодировку письма. Если вы случайно сотрете или измените charset=utf-8, то все ваши слова превратятся в иероглифы.
  • header — после успешного нажатия на кнопку, посетитель будет отправлен на страничку уведомления и через 5 секунд произойдет перенаправление на указанную страничку. Или же else { он получит увдомление об ошибке.

Здесь все. Едем дальше.

Дополнительные плюшки на js и jQuery

Ранее мы рассмотрели html шаблон формы, в котором видели добавленные id и функции у трех обязательных полей. Пришло время разобраться, для чего они были добавлены.

Посмотрите на js-код. Это блокиратор кнопки, который при disabled не дает посетителю нажать ее, прежде чем необходимые вам поля будут заполнены.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script>
    function checkParams() {
        var name = $('#name').val();
        var email = $('#email').val();
        var phone = $('#phone').val();

        if (name.length != 0 && email.length >= 6 && phone.length >= 10) {
            $('#submit').removeAttr('disabled');
        } else {
            $('#submit').attr('disabled', 'disabled');
        }
    }
</script>

Мы вставляем id в необходимые поля и disabled в кнопку для того, чтобы привязать их к данному скрипту. Вы можете изменить их названия и количество, добавив/убрав нужные var-строки. Но, если вы добавите или уберете их, не забудьте изменить условия в строке if (name.length != 0 && email.length >= 6 && phone.length >= 10) {.

Как работает эта строка?

Все завязано на количестве символов в указанном поле, т.е. ее длине length.

  • if (name.length != 0 — указывает на то, что поле не должно быть пустым. Читается как — «если в поле число символов не равно нулю, то…»
  • && — объединяет условия (и)
  • email.length >= 6 — кол-во символов должно быть больше или равно 6. Почему шесть? Я указал это число потому, что минимальный почтовый адрес состоит из 6 символов. Проверим? @bk.ru — 6 символов.
  • phone.length >= 10 — больше или равно десяти символам. Почему 10, а не 11 ? При заполнении этого поля, посетитель может указать свой телефон как с +7, так и через 8. Поэтому лучше указывать 10.

На этом все. Подключайте форму, тестируйте и пользуйтесь.

Если у вас остались вопросы, пишите в комментариях и не поскупитесь на оценку статьи. Заранее спасибо 🙂

Автор: Андрей Шарапов
Источник: madeas.ru

Возможно Вас также заинтересует…