• Ютуб
  • Yandex
  • Google
  • Opera
  • Wifi
  • Как узнать свой пароль от Wi-Fi сети
    Как увеличить быстродействие компьютера
    Лучшие антивирусы 2015 года
    Как найти человека в интернете
    Как удалить вирусы с ПК
    Как установить Windows 10

    Cоздание формы обратной связи для сайта: всплывающая html wordpress php joomla битрикс почта как сделать добавить бесплатно (красивая работающая простая opencart плагин конструктор скрипт на страницу спам ajax)

    admin
    |
    |
    просмотров: 5630
    |
    Опубликовано: 26-02-2019, 17:14
    Cоздание формы обратной связи для сайта: всплывающая html wordpress php joomla битрикс почта как сделать добавить бесплатно (красивая работающая простая opencart плагин конструктор скрипт на страницу спам ajax)
    Как сделать форму обратной связи для сайта wordpress html php всплывающую с отправкой на почту? Говорят что если посетитель не нажал на кнопку контактной формы, то вы потеряли потенциального клиента навсегда.

    Именно по этой причине, вы должны уделять особое внимание разработке форм обратной связи. Даже обычная форма «связаться с нами» может привести потенциального клиента либо связаться с вами, либо приведет к тому, что клиент уйдет на другой сайт. Создание контактной страницы включает в себя ключевой процесс, и нужно соблюдать некоторые важные советы для того, чтобы убедиться, что кнопка контактной формы действительно эффективна.

    Четкие и лаконичные названия

    Заголовки предназначены, чтобы передать суть дела, поэтому следует избегать историй и сказок. Будьте ясными и точными, когда создаете название. Посетитель должен понять для чего форма, просто посмотрев на название.

    Информативное описание

    Хоть название контактной формы должно объяснить ее суть, в случае, если посетитель имеет еще какие-либо сомнения или неправильные представления, описание должно прийти к вам на помощь. Описание должного ответа, для чего нужна эта форма и что посетитель получит взамен заполнения формы.

    Никто не любит длинные формы

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

    Ниже приводятся два варианта, давайте посмотрим, какой из них вам нравится больше.

    Как вы думаете, какой из них, скорее всего, будет заполнен конечным пользователем? Конечно же, первый является явным победителем, второй вариант содержит ненужные поля, которые могут заставить посетителя сомневаться, заполнять форму или нет.
    Размещайте текстовые метки слева над полями заполнения

    Исследования eyetracking показали, что выравнивание по левому краю меток над полем работает лучше, чем справа и слева выровненные метки в соответствии с полем. Для того, чтобы сделать форму компактной и короткой, метки могут быть помещены в поле.

    Выравнивание по левому краю внутри поля
    Выравнивание по левому краю внутри поля
    Выравнивание по левому краю над полем
    Выравнивание по левому краю над полем
    Выравнивание по левому краю в соответствии с полем
    Выравнивание по левому краю в соответствии с полем
    Не используйте кнопки действия, которые могут запутать

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

    Располагайте форму над линией сгиба

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

    Помощь посетителям в заполнении формы

    Предоставьте текст справки ниже поля ввода, чтобы направлять пользователя. Таким образом, вы сообщаете информацию, а также формат, который вы ожидаете от посетителя.

    Например, в поле: Адрес электронной почты можно написать – «example@domain.com».

    Ясное указание на ошибку

    Ясно указать на ошибку важно. Стоит не просто показать ошибку, а сообщить, где именно она была сделана, так как это может раздражать посетителя, чтобы продолжить искать, где он сделал что-то не так.

    Подсветка заполняемых полей

    В то время как посетитель заполняет конкретное поле, выделите это поле, так что в случае, если посетитель отвлечется, он может быстро вернуться и возобновить, то откуда он ушел. Кроме того, это сэкономит время за счет автоматического размещения курсора в первом поле.

    Размер, шрифт и цвет фона

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

    Разграничьте обязательные и необязательные поля

    Лучший и самый простой способ провести различие между обязательными и необязательными полями использовать знак звездочки (*). Это позволит улучшить пользовательский опыт и, следовательно, коэффициент конверсии.

    Оптимизация форм под мобильную версию

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

    Избегайте длинных выпадающих меню

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

    Персонализация сообщения после отправки формы

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

    Применение простой капчи

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

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

    JotForm

    JotForm имеет много готовых шаблонов. Для создания формы просто выберите инструмент, который Вам требуется, и перетащите его на область создания, наглядно можно сразу посмотреть как выглядит Ваша форма.

    Шаблоны помогут Вам подкинуть идеи для создания собственной формы. Если вы не будете удовлетворены шаблоном и не хотите других вариантов, просто нажмите вперед и получить HTML код и вставьте его на своем сайте.

    PForm

    Первый шаг pForm предлагает выбрать один из 25 цветовых шаблонов для создания формы. Вы можете найти подходящую цветовую гамму которая подойдет к цвету Вашего сайта. Шаг 2 перед Вами редактор формы, где вы можете выбрать то, что Вам нужно иметь на своей форме.

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

    HTML Form Builder by CSS Template Heaven

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

    Reformed

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

    Проведет Вас через его параметры, спросит Вас, если Вам нужны определенные функции. Например, проверить Ваших посетители чтобы имели правильный адрес электронной почты, он будет спросит: «Проверить наличие, действующий адрес электронной почты?». После того как вы установили все, вы можете проверить свою форму или просто сохранить форму и получить код. Она также имеет способ сохранения списка форм, которые вы создали ранее.

    Accessify

    Accessify. Несмотря на то, что не так уж много пользовательского интерфейса при создании формы, к концу третьего этапа, вы сможете скопировать HTML код созданной формы и вставьте его на своем сайте.

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

    Если сайт работает на базе какой-то популярной системы управления контентом (WordPress, Joomla, Drupal и т.д.), то для таких CMS существуют различные плагины, установив которые, можно легко решить эту задачу, но лендинг не работает на CMS, в большинстве случаев он состоит из файла index.html и подключаемых к нему CSS-стилей и JS-скриптов.

    Исходя из вышесказанного следует, что готовый плагин здесь не подойдет, и придется реализовать собственное решение.

    Создание контактной формы

    Сначала нужно определиться с необходимыми полями:

    Имя отправителя.
    E-mail адрес.
    Номер телефона.
    Текст сообщения.
    Согласие с обработкой персональных данных.

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

    Еще хотелось бы на клиенте реализовать ввод номера телефона по маске, чтобы можно было вводить только цифры в определенном формате. Для это воспользуемся jQuery-плагином maskedinput. Валидация E-mail на клиенте будет производиться встроенными средствами браузера.

    Помимо этого нужно создать еще два файла, main.css — для оформления и main.js — для отправки Ajax-запроса на сервер. Еще нам понадобится лоадер (GIF-изображение, которое будет крутиться в момент отправки почты). Все файлы сгруппируем в соответствующих папках (css, js, images). Ну и, конечно, в корне создаем индексный файл index.html и обработчик handler.php, который будет принимать и обрабатывать данные из формы. Получилась следующая структура.

    Структура папок и файлов

    В index.html помещу HTML-код формы и подключу стили и скрипты:






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




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





















    Я добровольно отправляю свои данные




    Cоздание формы обратной связи для сайта: всплывающая html wordpress php joomla битрикс почта как сделать добавить бесплатно (красивая работающая простая opencart плагин конструктор скрипт на страницу спам ajax)










    В файле main.css накидаю простенькие стили для оформления:

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    }

    body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    background-color: #fff;
    }

    .container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 4px;
    background-color: #ebebeb;
    box-shadow: 0 0 3px #666;
    }

    h2, .field-block {
    margin-bottom: 20px;
    }

    .field-block label, .field-block .field {
    display: block;
    width: 100%;
    }

    .field-block label {
    margin-bottom: 8px;
    font-weight: bold;
    }

    .field-block .field {
    font-size: 16px;
    padding: 8px 12px;
    line-height: 1.5;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    .field-block .field:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    }

    .field-block textarea {
    resize: vertical;
    }

    .check-text {
    font-size: 14px;
    vertical-align: top;
    }

    .button {
    cursor: pointer;
    font-size: 16px;
    padding: 6px 12px;
    margin-bottom: 5px;
    }

    #loader {
    display: none;
    }

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

    В результате получилась вот такая форма:

    Пример простой контактной формы

    Наполняем main.js:

    Включаем маску для ввода номера телефона.
    Делаем проверку, если чекбокс согласия на обработку персональных данных не отмечен, то деактивируем кнопку и не даем отправить форму.
    Формируем Ajax-запрос для отправки пользовательских данных на сервер и получение ответа от сервера.

    Код в main.js получился такой:

    jQuery(document).ready(function($) {

    // Добавляем маску для поля с номера телефона
    $('#phone').mask('+7 (999) 999-99-99');

    // Проверяет отмечен ли чекбокс согласия
    // с обработкой персональных данных
    $('#check').on('click', function() {
    if ($("#check").prop("checked")) {
    $('#button').attr('disabled', false);
    } else {
    $('#button').attr('disabled', true);
    }
    });

    // Отправляет данные из формы на сервер и получает ответ
    $('#contactForm').on('submit', function(event) {

    event.preventDefault();

    var form = $('#contactForm'),
    button = $('#button'),
    answer = $('#answer'),
    loader = $('#loader');

    $.ajax({
    url: 'handler.php',
    type: 'POST',
    data: form.serialize(),
    beforeSend: function() {
    answer.empty();
    button.attr('disabled', true).css('margin-bottom', '20px');
    loader.fadeIn();
    },
    success: function(result) {
    loader.fadeOut(300, function() {
    answer.text(result);
    });
    form.find('.field').val('');
    button.attr('disabled', false);
    },
    error: function() {
    loader.fadeOut(300, function() {
    answer.text('Произошла ошибка! Попробуйте позже.');
    });
    button.attr('disabled', false);
    }
    });

    });

    });

    На этом клиентская часть нашей формы завершена, переходим к серверной части.
    Отправка почты на E-mail администратора

    Для того чтобы отправка почты работала корректно и не было проблем со спам-фильтрами, отправляться письма должны с реального E-mail адреса и через SMTP-серверы популярных почтовых служб (Яндекс, Mail, Google).

    Как это работает? В файле на сайте мы указываем логин и пароль от реального ящика, по этим данным перед отправкой почты происходит авторизация в системе почтовика и отправка с этого ящика на другой E-mail адрес (в данном случае E-mail администратора сайта).

    Для реализации такого функционала воспользуемся одной из нескольких PHP-библиотек, например: PHPMailer, на мой взгляд она попроще, и новичку будет легче с ней разобраться. Так как мы имеем дело с лендингом или сайт-визиткой, то у нас нет композера и вряд ли он понадобится, поэтому просто скачиваем и распаковываем архив.

    Обратите внимание, что для корректной работы библиотеки PHPMailer версия PHP должна быть 5.5 или выше.

    В корне нашего сайта создаем папку mailer и помещаем в нее папку с библиотекой, должно получиться так: site.ru/mailer/PHPMailer, на реальном сервере желательно запретить доступ к папке mailer.

    Чтобы не пихать весь код в пока пустой ранее созданный обработчик handler.php, в папке mailer создадим два вспомогательных статических хелпера: Validator.php (валидирует данные из формы) и ContactMailer.php (отправляет почту, обертка над PHPMailer).

    Код из Validator.php:

    Host = ' smtp.yandex.ru';
    // Включает SMTP-авторизацию
    $mailer->SMTPAuth = true;
    // Логин или E-mail целиком
    $mailer->Username = self::$emailFrom;
    // Пароль от почтового ящика
    $mailer->Password = 'XXXXXXXX';
    // Протокол соединения
    $mailer->SMTPSecure = 'ssl';
    // Порт для исходящаей почты
    $mailer->Port = '465';

    // Устанавливает кодировку
    $mailer->CharSet = 'UTF-8';
    // Устанавливает E-mail и имя отправителя
    $mailer->setFrom(self::$emailFrom, 'Имя отправителя');
    // Добавляет E-mail получателя
    $mailer->addAddress(self::$emailTo);
    // Настройка HTML-формата
    $mailer->isHTML(false);
    // Тема письма
    $mailer->Subject = 'Заполнена форма обратной связи';
    // Основное тело письма
    $mailer->Body = $body;

    // Отправляет письмо
    if ($mailer->send()) {
    return true;
    }
    return false;
    }
    }

    Осталось лишь сформировать наш обработчик handler.php:

    <?php

    require_once __DIR__ . '/mailer/Validator.php';
    require_once __DIR__ . '/mailer/ContactMailer.php';

    if (!Validator::isAjax() || !Validator::isPost()) {
    echo 'Доступ запрещен!';
    exit;
    }

    $name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
    $email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
    $phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
    $message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;

    if (empty($name) || empty($email) || empty($phone) || empty($message)) {
    echo 'Все поля обязательны для заполнения.';
    exit;
    }

    if (!Validator::isValidEmail($email)) {
    echo 'E-mail не соответствует формату.';
    exit;
    }

    if (!Validator::isValidPhone($phone)) {
    echo 'Телефон не соответствует формату.';
    exit;
    }

    if (ContactMailer::send($name, $email, $phone, $message)) {
    echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
    } else {
    echo 'Произошла ошибка! Не удалось отправить сообщение.';
    }
    exit;

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

    Не забудьте изменить данные в настройках ContactMailer.php: E-mail получателя, E-mail и пароль отправителя, адрес вашего SMTP-сервера и т.д. Ко всем используемым настройкам я написал пояснение в коде. Если будите применять данное решение на реальном сайте, внимательно смотрите все пути к файлам и сделайте бекап, прежде чем вносить изменения.

    Библиотека PHPMailer предоставляет гораздо больше возможностей, я использовал лишь необходимые для конкретной задачи. Все возможности смотрите в документации на GitHab.

    Для чего нужна форма обратной связи на сайте?

    Форма обратной связи служит для отправки общений владельцу сайта от посетителей.
    В специальные поля вводятся специальные данные (имя, электронная почта, текст). Для отправки сообщения на е-мейл владельцу сайта, необходимо нажать на кнопку «Отправить», может быть и другой вариант.


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

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

    Такие формы используются в качестве виджета обратного звонка с сайта, когда клиент хочет что бы ему позвонили.
    СОЗДАЕМ ФОРМУ ОБРАТНОЙ СВЯЗИ НА HTML

    Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас с использованием html, css и php кода.

    Вставляем в нужное место на сайте следующий код:



    Онлайн заявка











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

    Вставили код и получилось вот так:

    Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили (готовая html верстка формы обратной связи):


    /* Форма обратной связи */
    #inline {
    margin-left: 30px;
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 10px 20px;
    }
    .txt {
    display: inline-block;
    color: #676767;
    width: 190px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px 9px;
    font-size: 15px!important;
    line-height: 1.4em;
    }
    .txtarea {
    display: inline-block;
    color: #676767;
    width: 617px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px 9px;
    font-size: 15px!important;
    line-height: 1.4em;
    height: 80px;
    }
    .txt:focus, .txtarea:focus {
    border-style: solid;
    border-color: #bababa;
    color: #444;
    }
    input.error, textarea.error {
    border-color: #973d3d;
    border-style: solid;
    background: #f0bebe;
    color: #a35959;
    }
    input.error:focus, textarea.error:focus {
    border-color: #973d3d;
    color: #a35959;
    }
    #send {
    color: #FFFFFF;
    display: block;
    cursor: pointer;
    padding: 5px 11px;
    font-size: 1.2em;
    border: solid 1px #F9F9F9;
    border-radius: 2px;
    background: #70C6B9;
    width: 210px;
    margin-bottom: 20px;
    }
    #send:hover {
    background: #979797;
    }
    /* Форма обратной связи */

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

    Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.

    Выглядит это вот так:

    Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

    Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.



    Подключаем скрипт перед закрывающимся тегом . Не забудьте поменять путь к файлу на свой.

    Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.

    Для этого перед закрывающимся тегом вставьте следующий скрипт:



    function validateEmail(email) {
    var reg = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([ [0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
    }

    $(document).ready(function() {
    $(".modalbox").fancybox();
    $("#contact").submit(function() { return false; });
    $("#send").on("click", function(){
    var emailval = $("#email").val();
    var namevl = $("#name").val();
    var phonevl = $("#phone").val();
    var msgval = $("#msg").val();
    var msglen = msgval.length;
    var mailvalid = validateEmail(emailval);

    if(mailvalid == false) {
    $("#email").addClass("error");
    }
    else if(mailvalid == true){
    $("#email").removeClass("error");
    }
    if(mailvalid == false) {
    $("#name").addClass("error");
    }
    else if(mailvalid == true){
    $("#name").removeClass("error");
    }
    if(mailvalid == false) {
    $("#phone").addClass("error");
    }
    else if(mailvalid == true){
    $("#phone").removeClass("error");
    }
    if(msglen = 4){
    $("#msg").removeClass("error");
    }

    if(mailvalid == true && msglen >= 4) {
    // если обе проверки пройдены
    // сначала мы скрываем кнопку отправки
    $("#send").replaceWith("отправка...");
    $.ajax({
    type: `POST`,
    url: `sendmessage.php`,
    data: $("#contact").serialize(),
    success: function(data) {
    if(data == "true") {
    $("#contact").fadeOut("fast", function(){
    $(this).before("

    Успешно! Ваше сообщение отправлено :)

    ");
    setTimeout("$.fancybox.close()", 1000);
    });
    }
    }
    });
    }
    });
    });


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

    Производит проверку введенного e-mail.
    Указывает поля, с которыми будет работать.
    Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
    Обрабатывает введенную информации и инициирует отправку уведомления на почту.
    Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

    Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.


    <?php
    $sendto = "mail@mail.ru"; // Обязательно измените e-mail на свой
    $usermail = $_POST[`email`];
    $username = $_POST[`name`];
    $userphone = $_POST[`phone`];
    $content = nl2br($_POST[`msg`]);
    // Формирование заголовка письма
    $subject = "Новое сообщение";
    $headers = "From: " . strip_tags($usermail) . "rn";
    $headers .= "Reply-To: ". strip_tags($usermail) . "rn";
    $headers .= "MIME-Version: 1.0rn";
    $headers .= "Content-Type: text/html;charset=utf-8 rn";
    // Формирование тела письма
    $msg = "";
    $msg .= "

    Новое сообщение

    rn";
    $msg .= "

    Имя: ".$username."

    rn";
    $msg .= "

    Номер телефона: ".$userphone."

    rn";
    $msg .= "

    Почта: ".$usermail."

    rn";
    $msg .= "

    Сообщение: ".$content."

    rn";
    $msg .= "";

    // отправка сообщения
    if(@mail($sendto, $subject, $msg, $headers)) {
    echo "true";
    } else {
    echo "false";
    }
    ?>

    Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

    ВСПЛЫВАЮЩАЯ ФОРМУ ОБРАТНОЙ СВЯЗИ ДЛЯ САЙТА

    Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней. Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.






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


    Обратный звонок

    И придаем ей стили.


    .modalbox {
    color: #FFFFFF;
    display: block;
    cursor: pointer;
    padding: 10px 11px;
    font-size: 1.2em;
    border: solid 1px #F9F9F9;
    border-radius: 2px;
    background: #70C6B9;
    width: 210px;
    text-decoration: none;
    text-align: center;
    margin:0 auto 20px;
    }
    .modalbox:hover {
    background: #979797;
    }

    Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=»#inline».

    Без этого всплывающая форма не будет открываться на сайте. После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне.

    Для этого нужно заменить стили #inline со старых на новые.


    #inline {
    display:none;
    margin-left: 30px;
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 10px 20px;
    }

    В итоге получаем вот такую кнопку.

    При нажатии на которую открывается всплывающее окно с обратной связью.

    Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

    Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.

    Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

    url: `http://site.ru/sendmessage.php`

    Принцип работы формы обратной связи на html

    Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).

    Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).

    Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.

    Конечная форма связи будет иметь вот такой вид:

    форма обратной связи для сайта

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

    Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

    Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.

    Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.

    Демо версия формы

    Настройку каждого из этих элементов мы с вами разберем по шагам.

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

    Чтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.

    Для обозначения форм в html используется тег
    , внутри которого заполняются необходимые параметры.








    Правильный формат "name@something.com"





    Правильный формат "+7-123-4567890"





    Правильный формат "http://someaddress.com"





















    Правильный формат "name@something.com"





    Правильный формат "+7-123-4567890"





    Правильный формат "http://someaddress.com"












    Начнем с первой строки.

    class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.

    action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.

    Дальше идут 4 блока

    , отвечающих за вывод полей для ввода данных, по названиям понятно, какой за что отвечает. Сами поля выводятся с помощью тегов , внутри которого задаются следующие характеристики:

    Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.

    Name – собственное название самого элемента, оно необходимо, что скрипт знал как использовать данные каждого поля. Если вы сделаете несколько полей одного типа, то вам необходимо каждому полю присвоить свое name.

    Placeholder – это подсказка, находящаяся внутри поля, текст, замещающий пустое поле элемента. Ее можно изменить или удалить, на работу формы она не влияет.

    Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.

    pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст, в противном случае будет ошибка.

    Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .

    Поля для ввода самого сообщения размечается тегом




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

    Код вставлен, что мы видим?

    Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:

    /*
    Форма обратной связи
    */
    #inline {
    margin-left:30px;
    width:80%;
    margin:0 auto;
    background:#FFF;
    padding:10px 20px;
    }
    .txt {
    display:inline-block;
    color:#676767;
    width:190px;
    margin-bottom:10px;
    border:1px solid #CCC;
    padding:5px 9px;
    font-size:15px!important;
    line-height:1.4em;
    }
    .txtarea {
    display:inline-block;
    color:#676767;
    width:617px;
    margin-bottom:10px;
    border:1px solid #CCC;
    padding:5px 9px;
    font-size:15px!important;
    line-height:1.4em;
    height:80px;
    }
    .txt:focus, .txtarea:focus {
    border-style:solid;
    border-color:#BABABA;
    color:#444;
    }
    input.error, textarea.error {
    border-color:#973D3D;
    border-style:solid;
    background:#F0BEBE;
    color:#A35959;
    }
    input.error:focus, textarea.error:focus {
    border-color:#973D3D;
    color:#A35959;
    }
    #send {
    color:#FFFFFF;
    display:block;
    cursor:pointer;
    padding:5px 11px;
    font-size:1.2em;
    border:solid 1px #F9F9F9;
    border-radius:2px;
    background:#70C6B9;
    width:210px;
    margin-bottom:20px;
    }
    #send:hover {
    background:#979797;
    }
    /*
    Форма обратной связи
    */

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

    Далее мы можем подключить маску для поля ввода номера телефона, которая визуально облегчит ввод для пользователя.


    Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

    Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.



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

    Для этого перед закрывающимся тегом вставьте следующий скрипт:


    function validateEmail(email) {
    var reg = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]
    {1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
    jQuery(document).ready(function() {
    jQuery(".modalbox").fancybox();
    jQuery("#contact").submit(function() {return false;});
    jQuery("#send").on("click", function() {
    var emailval = jQuery("#email").val();
    var namevl = jQuery("#name").val();
    var phonevl = jQuery("#phone").val();
    var msgval = jQuery("#msg").val();
    var msglen = msgval.length;
    var mailvalid = validateEmail(emailval);
    if(mailvalid == false) {
    jQuery("#email").addClass("error");
    }
    else if(mailvalid == true) {
    jQuery("#email").removeClass("error");
    }
    if(mailvalid == false) {
    jQuery("#name").addClass("error");
    }
    else if(mailvalid == true){
    jQuery("#name").removeClass("error");
    }
    if(mailvalid == false) {
    jQuery("#phone").addClass("error");
    }
    else if(mailvalid == true){
    jQuery("#phone").removeClass("error");
    }
    if(msglen = 4){
    jQuery("#msg").removeClass("error");
    }
    if(mailvalid == true && msglen >= 4) {
    // если обе проверки пройдены
    // сначала мы скрываем кнопку отправки
    $("#send").replaceWith("отправка...");
    jQuery.ajax({
    type: 'POST',
    url: 'sendmessage.php',
    data: jQuery("#contact").serialize(),
    success: function(data) {
    if(data == "true") {
    jQuery("#contact").fadeOut("fast", function(){
    jQuery(this).before("

    Ваше сообщение отправлено

    ");
    setTimeout("jQuery.fancybox.close()", 1000);
    });
    }
    }
    });
    }
    });
    });


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

    Производит проверку введенного e-mail.
    Указывает поля, с которыми будет работать.
    Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
    Обрабатывает введенную информации и инициирует отправку уведомления на почту.
    Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

    Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

    <?php
    // Обязательно измените e-mail на свой
    $sendto = "mail@mail.ru";
    $usermail = $_POST['email'];
    $username = $_POST['name'];
    $userphone = $_POST['phone'];
    $content = nl2br($_POST['msg']);
    // Формирование заголовка письма
    $subject = "Новое сообщение";
    $headers = "From: " . strip_tags($usermail) . "rn";
    $headers .= "Reply-To: ". strip_tags($usermail) . "rn";
    $headers .= "MIME-Version: 1.0rn";
    $headers .= "Content-Type: text/html;charset=utf-8 rn";
    // Формирование тела письма
    $msg = "";
    $msg .= "

    Новое сообщение

    rn";
    $msg .= "

    Имя: ".$username."

    rn";
    $msg .= "

    Номер телефона: ".$userphone."

    rn";
    $msg .= "

    Почта: ".$usermail."

    rn";
    $msg .= "

    Сообщение: ".$content."

    rn";
    $msg .= "";
    // отправка сообщения
    if(@mail($sendto, $subject, $msg, $headers)) {
    echo "true";
    } else {
    echo "false";
    }
    ?>

    Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.
    Добавляем всплывающую форму обратной связи на сайт

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

    Для начала нам нужно подключить jqury fancybox.

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

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

    Обратный звонок

    И придаем ей стили.

    .modalbox {
    color:#FFFFFF;
    display:block;
    cursor:pointer;
    padding:10px 11px;
    font-size:1.2em;
    border:solid 1px #F9F9F9;
    border-radius:2px;
    background:#70C6B9;
    width:210px;
    text-decoration:none;
    text-align:center;
    margin:0 auto 20px;
    }
    .modalbox:hover {
    background:#979797;
    }

    Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте.

    После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые.

    #inline {
    display:none;
    margin-left:30px;
    width:80%;
    margin:0 auto;
    background:#FFF;
    padding:10px 20px;
    }


    При нажатии на кнопку открывается всплывающее окно с обратной связью.

    Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

    Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php.

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

    В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

    Еще нет сайта на данном движке? Рекомендую прочитать статью о том, как установить wordpress на свой домен.

    После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.


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

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


    Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.

    Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код.

    Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.
    Делаем всплывающую форму обратной связи для wordpress

    Я сам не люблю добавлять лишние плагины на данный движок, так как они грузят сайт, замедляя его работу. Поэтому для всплывающей формы использую обычно 2 варианта.

    Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.
    Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

    Первый способ уже был описан выше, поэтому сразу перейдем ко второму.

    Для начала, вставляем следующий код сразу после открытия тега body.

    Обратный звонок


    X



    Давайте разберемся что есть что:

    Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.

    Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
    Блок callme будет содержать саму форму обратной связи.
    X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
    Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

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

    .bg-b {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(51,51,51,0.55);
    z-index:1000;
    }
    body {
    position:relative;
    }
    .callme {
    position:fixed;
    top:30%;
    left:50%;
    width:300px;
    margin-left:-150px;
    z-index:1100;
    background:#FFF;
    padding:20px 20px 10px;
    border-radius:4px;
    }
    .callme small {
    position:absolute;
    right:10px;
    top:10px;
    font-size:15px;
    cursor:pointer;
    }

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


    jQuery(document).ready(function(){
    jQuery('#callme-open').click(
    function(){
    jQuery('.bg-b').css('display','block');
    jQuery('.callme').css('display','block');
    });
    jQuery('.callme small').click(
    function(){
    jQuery('.bg-b').css('display','none');
    jQuery('.callme').css('display','none');
    });
    });


    Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.

    Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам .callme и .bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

    Для начала рекомендую сделать все на локальном денвере, а уже затем перенести сайт на wordpress к себе на хостинг для дальнейшего тестирования. Ну вот кажется и все.

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

    В последних версиях WordPress jQuery скрипты не работают с символом $, поэтому это следует учесть и заменить $ на jQuery

    Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:

    url: 'http://site.ru/sendmessage.php'

    Готовая форма обратной связи для сайта на html

    В данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.
    Имя

    E-mail:

    Тема сообщения

    Ваш текст:







    Имя

    E-mail:

    Тема сообщения

    Ваш текст:






    В самом начале кода, в первом строчке, вы должны указать свой путь к 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;
    }


    .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;
    }

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

    Форма связи для wordpress

    Php код формы


    С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

    (

    Сам код файла form.php содержит в себе

    Вместо url=http://nesmelov.ru пишем свой адрес сайта. $address = «site@yandex.ru» — в данной строчке указываем свой адрес электронной почты, на которую будут приходить письма. Больше ничего менять не нужно, все настроено и работает. Если у вас возникли трудности в процессе установки, пишите в комментариях, я обязательно отвечу.

    Вставка обратной связи в wordpress

    Процесс установки формы в wordpress ничем не отличается, все действия делаются аналогично. Файл form.php желательно закачать в папку с вашей темой. Не забываем в html разметки указать полный и точный адрес к файлу обработчику. Кроме этого, нужно изменить адрес сайта на свой сайт и правильно написать адрес электронной почты. Код готовой формы можно вставить на любую страницу вашего блога. В качестве примера я добавил к себе на блог на страницу с конкурсами.

    В качестве примера, можно создать страницу «Связаться с автором» или «Автор» и закинуть туда вашу форму. На некоторых блогах я замечал снизу каждой формы ряд из кнопок социальных сетей или дополнительные варианты связи с автором. Если есть желание, можно так же повторить. У меня на блоге форма связи работает, я проверял лично на своем примере. Если к вам письма не доходят, значит проблема с вашей стороны.

    Плагины для wordpress

    Плагин обратной связи Contact Form 7

    Если у вас возникли трудности с вставкой такой рода обратной связи на свой сайт, вы можете сказать один из плагинов и установить его на свой сайт. На сегодня существует большое количество плагинов, с помощью которых можно сделать такие формы для сайта. Заходим в панель администратора, нажимаем на Плагины — добавить новый. Выбираем любой, который вам понравится и пользуемся на здоровье. Больше популярностью пользуется плагин Contact Form 7.

    Contact Form 7.
    Fast Secure Contact Form.
    Contact Form by Contact ME.
    FormCraft.
    Visual Form Builder.
    nForms – WordPress Form Builder.
    Gravity Forms.

    Устанавливаем каждый по очереди и смотрим на каждый из них отдельно. Обратите внимание сразу на работоспособность плагина, на удаление посторонней ссылки на сайт автора ( если она имеется ). Все такие формы изначально смотрятся очень не красиво, сможете ли вы настроить ее под свой вкус и цвет.

    Возьмем для примера первый из них. Добавляем новый плагин Contact Form 7. Данный плагин очень простой, при работа с ним проблем возникнуть не должно. Многие блогера пользуются этим плагином для дополнительных мелких форм на своих сайтах. Переходи в консоли слева в пункт Contact Form 7 и нажимаем «добавить новую форму». Язык по умолчанию уже стоит русский.

    Плагин формы обратной связи

    В первой вкладке выбираем и называем поля, которые будут присутствовать. Не нужно делать очень большую форму, добавляем имя, почту, тему, сообщение и кнопку «отправить». В вкладке «Письмо» указываем ваш электронный ящик, на который будут приходить сообщения". Особых трудностей у вас возникнуть не должно, все интуитивно понятно.

    После создания, плагин предложит вам короткий шорткод, который нужно будет вставить в нужное место на сайте, например [contact-form-7 id="517"]. После вставки шорткода, вы увидите свою новенькую форму. При создании любой страницы, переходим на вкладку редактирования «Текст» и вставляем ваш код.

    Небольшой минус заключается в том, что дизайн вашей обратной связи будет в очень ужасном виде. Не стоит сильно расстраиваться. Заходим через ftp по данному адресу wp-content/plugins/contact-form-7/modules. В этой папке находятся все css стили плагина. Можно смело добавлять свои новые свойства, чтоб ваша форма была красивая и заметная.

    Генератор формы обратной связи

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

    formdesigner;
    livetools.uiparade;
    Google Forms;
    iFormbuilder;
    faary.

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

    к оглавлению ↑
    Форма обратного звонка

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

    Форма обратного звонка

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

    Живое общение с клиентом.
    Генераторы лидов.
    Различные виджеты для обратного звонка.
    Онлайн статистика.
    Онлайн мониторинг.

    Для чего нужна обратная связь

    Ответы на вопросы посетителей.
    Анкетирование.
    Прием заказов посредством сайта.
    Прием заявок на обратные звонки.


    Два вида коммуникации с посетителем

    Отправка на email. После заполнения предложенных полей форма отправляется на e-mail администратора сайта. Все дальнейшее общение происходит посредством обмена электронными письмами или выходом в офф-лайн (телефон и т.п.).
    Отправка в систему управления сайтом. После заполнения администратор сайта видит запрос в списке заполненных данных в CMS, и там же может его обработать. К примеру, таким образом может быть реализована гостевая книга или система «Вопрос-ответ». Покупка товаров в интернет-магазине работает подобным образом.

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

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

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

    Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

    Механизм отправки вопроса на email работает через почтовый сервер, установленный на хостинге. Если письма к вам не приходят, возможно, требуется пересмотреть настройки веб-сервера или проверить ваш почтовый ящик на присутствие в спам-листе.
    Структура

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

    Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

    Помимо текстовых полей, страница может содержать элементы выбора.

    Пример сервиса обратного звонка

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

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

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

    Обычно применяют два вида размещения формы:

    На отдельной странице в случае, если форма содержит много полей.
    На странице «Контакты» под заголовком «Напишите нам».

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

    Правила хорошего тона

    После заполнения полей и отправки сообщения посетитель должен получить на экране ответ типа «Спасибо за ваш вопрос. Мы ответим вам в течение 1 часа». Если посетитель не получает ответ в течение установленного времени, его расположение к вам резко падает. Факт игнорирования очень неприятен и говорит о том, что сайт не ценит своих клиентов. Обратная связь должна работать, а не собирать мертвые грузы из неотвеченных вопросов посетителей.

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

    Структура, как организована обратная связь для сайта

    Что бы все заработало, приведу структуру, что нужно что бы форма связи или звонка работала?

    Код html вставленный на страницу + css стили.
    Php файл, который и выполняет посылку письма.

    В коде html содержится содержится информация, какие поля для ввода нужно показывать и подписи к ним. Стили css отвечает за визуальное оформление самой формы и отображение данных. При нажатии на кнопку отправить вызывается php файл, который и отправляет письмо на указанную почту. Подробнее исходный код формы рассмотрим дальше.
    Код формы обратной связи на html

    Вначале приведем полный код формы обратной связи для сайта на HTML.













    Сама форма находится между html тегами
    . Самому тегу формы
    присвоен css класс class="form-zvonok" который используется для задания отображения формы через css стили.

    Атрибуты формы autocomplete="off" — автозаполнение формы отключено. Атрибут формы action='http://site.com/email.php', в нём указан адрес файла, который вызывается и которому передаются данные формы после нажатия кнопки «отправить».

    Атрибут method='post', в этом случае данные отправляются скрытно и не отображаются в адресной строке, другой метод Get отправляет данные формы через адресную строку. Учитывая необходимость SEO оптимизации сайта, в случае формы обратной связи для сайта лучше отправлять данные методом Post, так как в случае метода Get у сайта по сути будет доступно множество однотипных страниц, которые отличаются только несколькими незначительными параметрами.

    Далее внутри тега находится
    с css классом class="form-zvonok", он отвечает за компоновку полей ввода и подписей к ним.

    Внутри этого дива, находятся дивы содержащие теги и , и в самом конце — кнопка отправить, при нажатии на нее происходит отправка данных формы.
    Отсылка письма php скриптом

    Приведем простой скрипт для отправки письма




    Чтобы отправить письмо на необходимый email, замените значение переменной $to email@tut.by на необходимый адрес. Переменная $subject — тема сообщения, показывается почтовыми программами при просмотре списков писем. $message — само тело письма, это и есть само сообщение. $headers — шапка письма, в ней указывается тип письма, например html, также кодировка письма, от кого доставлено письмо и на какой emal отправлять ответ.
    Оформление формы обратного звонка для сайта css

    Приведем код css оформления для формы обратной связи сайта.


    .obratnuj-zvonok{
    width: 100%;
    max-width: 350px;
    }
    .form-zvonok{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    }
    .form-zvonok div{
    padding: 15px 0;
    }
    .bot-send-mail{
    box-sizing: border-box;
    width: 100%;
    }
    .form-zvonok label,.form-zvonok input{
    display: block;
    width: 100%;
    box-sizing: border-box;
    }
    .form-zvonok label{
    margin-bottom: 5px;
    font-weight: bold;
    }
    .form-zvonok input{
    padding: 10px 15px;
    margin-top: 10px;
    }
    .form-zvonok label span{
    color: red;
    }
    .form-zvonok .bot-send-mail{
    padding: 15px;
    margin-top: 10px;
    background: none;
    border: none;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    background-color: #009b97;
    cursor: pointer;
    border: 3px #009b97 solid;
    border-radius: 5px;
    }
    .form-zvonok .bot-send-mail:hover{
    color: #009b97;
    background-color: #fff;
    }

    Делаем ширину дива равной ширине родительского блока и ограничиваем максимальную ширину 350px, если шире, то форма html выглядит растянутой:


    .obratnuj-zvonok{
    width: 100%;
    max-width: 350px;
    }

    Что бы упорядочить поля и кнопку отправить, обертываем их в div, отображение ставим в flex и направление отображения столбцом column. Для красоты добавляем отступы сверху и снизу на 20px:


    .form-zvonok{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    }

    Подпись и поле ввода обернуты в div:





    Для этого дива присвоим отступы:

    .form-zvonok div{
    padding: 15px 0;
    }

    Кнопке отправить делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box, что бы она не выходила за пределы родительского блока:

    .bot-send-mail{
    box-sizing: border-box;
    width: 100%;
    }

    Аналогично для подписей и полей ввода:

    .form-zvonok label,.form-zvonok input{
    display: block;
    width: 100%;
    box-sizing: border-box;
    }

    Настраиваем красивый внешний вид подписей и полей ввода:

    .form-zvonok label{
    margin-bottom: 5px;
    font-weight: bold;
    }
    .form-zvonok input{
    padding: 10px 15px;
    margin-top: 10px;
    }

    Звездочку делаем красной:

    .form-zvonok label span{
    color: red;
    }

    Оформляем кнопку отправить:

    .form-zvonok .bot-send-mail{
    padding: 15px;
    margin-top: 10px;
    background: none;
    border: none;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    background-color: #009b97;
    cursor: pointer;
    border: 3px #009b97 solid;
    border-radius: 5px;
    }

    При наведении на кнопку настраиваем изменение цвета:

    .form-zvonok .bot-send-mail:hover{
    color: #009b97;
    background-color: #fff;
    }
    HTML форма обратной связи

    Давайте рассмотрим на примере простой bootstrap формы. Уберем из нее все лишнее и получим маленькую, но чудную форму.




















    view raw
    feedback html form hosted with ❤ by GitHub

    Вы можете создавать бесконечное количество копий этой формы, но каждой из них вам необходимо присвоить свой уникальный id. Например, form-1, form-2, form-3 и т.д.. Кроме того, для формирования темы письма добавьте скрытый input type="hidden", в котором будет отображаться заголовок обращения. Для стилизации формы вы можете применить свои классы css или оставить стили bootstrap.

    В результате должны получиться вот такие формы.

































































    view raw
    feedback form three hosted with ❤ by GitHub

    Для отображения подсказки включите атрибуты placeholder.
    Многие разработчики используют в input атрибут value. Это не совсем эстетично, поскольку при вводе сообщения, пользователям приходится удалять набранный по умолчанию текст. Атрибут placeholder выглядит как фоновое изображение и исчезает при вводе текста в поле.

    Рабочий пример:

    Здесь же вы можете сделать поле обязательным для заполнения, добавив в каждый необходимый input атрибут required="required". А для облегчения заполнения данных в будущем, вы можете добавить атрибут autocomplete="on", который помогает заполнять поля форм текстом, введенным ранее.

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


    $(document).ready(function () {
    $('form').submit(function () {
    var formID = $(this).attr('id'); // Получение ID формы
    var formNm = $('#' + formID);
    $.ajax({
    type: 'POST',
    url: 'feedback.php', // Обработчик формы отправки
    data: formNm.serialize(),
    success: function (data) {
    // Вывод текста результата отправки в текущей форме
    $(formNm).html(data);
    }
    });
    return false;
    });
    });

    view raw
    feedback.js hosted with ❤ by GitHub

    Обработка php

    За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit. В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else, с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

    Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке. Поэтому в каждой форме необходимо прописать method="POST".






















    view raw
    feedback form with method hosted with ❤ by GitHub

    Теперь переносим все наши поля и данные в обработчик и готово!
    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}
    if (isset($_POST['email'])) {$email = $_POST['email'];}
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    if (isset($_POST['message'])) {$message = $_POST['message'];}
    $to = "your@email.ru"; /*Укажите ваш адрес электронной почты*/
    $headers = "Content-type: text/plain; charset = utf-8";
    $subject = "$formData";
    $message = "$formDatannОткуда: $email nnОтправитель: $name nnТелефон: $phone nnСообщение: $message";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == 'true')
    {
    echo "
    Спасибо за отправку вашего сообщения! Наши специалисты свяжутся с вами в течение часа.
    ";
    }
    else
    {
    echo "
    Ошибка. Сообщение не отправлено! Проверьте правильность введенных данных
    ";
    }
    } else {
    http_response_code(403);
    echo "Попробуйте еще раз";
    }
    ?>
    view raw
    feedback.php hosted with ❤ by GitHub

    Давайте подробнее разберем некоторые пункты.

    if (isset($_POST['formData'])) {$formData = $_POST['formData'];} // заголовок обращения в скрытом input
    if (isset($_POST['email'])) {$email = $_POST['email'];} // email/адрес отправителя
    if (isset($_POST['name'])) {$name = $_POST['name'];} // имя/отправитель
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];} // телефон
    if (isset($_POST['message'])) {$message = $_POST['message'];} // комментарий к заказу/обращение

    $message = "$formDatannОткуда: $email nnОтправитель: $name nnТелефон: $phone nnСообщение: $message";

    Строчка выше отвечает за последовательность отображения полей в письме получателя, где каждый пункт соответствует своему полю, например nnОтправитель: $name.



    Рейтинг:
    (голосов: 1)



    Комментариев пока еще нет. Вы можете стать первым!

    Добавить комментарий!

    Ваше Имя:
    Ваш E-Mail:
    Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
    Введите код:



    Популярное



    Последние статьи

    Какую ОС используете?
    новую Windows 10
    быструю Windows 8
    стабильную Windows 7
    требовательную Windows Vista
    старинную Windows XP