Компания
  • Давайте знакомиться!
  • Наша команда
  • Партнеры
  • Вакансии
Услуги
  • Разработка сайтов
    • Сайты на 1С Битрикс
    • Landing Pages
    • Адаптивные сайты
    • Интернет-магазины
  • Продвижение сайтов
    • Продвижение сайта в ТОП 10
  • Реклама
  • Поддержка и развитие сайтов
    • Увеличение конверсии сайта
    • Стоимость разовой поддержки сайта
  • Брендинг и айдентика
  • Мобильные сайты
  • Приложения для сайтов
    • Калькулятор натяжных потолков
    • Калькулятор рольставен (рольставней)
    • Калькулятор деревянных окон
    • Калькулятор ПВХ окон онлайн
    • Калькулятор секционных ворот
  • Продвижение сайта в cоц. сетях
Портфолио
Клиенты
Блог
Контакты
Ещё
    Tomatys — Дизайн с усами.

    Оставить заявку

    • Разработка
    • Продвижение
    • Реклама
    • Кейсы
    • О компании
      • Давайте знакомиться!
      • Наша команда
      • Партнеры
      • Вакансии
    • Контакты
    Tomatys — Дизайн с усами.
    • Разработка
    • Продвижение
    • Реклама
    • Кейсы
    • О компании
      • Назад
      • О компании
      • Давайте знакомиться!
      • Наша команда
      • Партнеры
      • Вакансии
    • Контакты
    • +7(495) 128-72-67
    Москва, ул. Горбунова д 2 стр 204, БЦ «Гранд Сетунь Плаза», офис 228
    hello@tomatys.com
    • Facebook
    • Вконтакте
    • Twitter
    • Instagram
    • Telegram

    23 Декабря 2012

    Простая форма обратной связи на Ajax

    Вступление

    Форма обратной связи присутствует почти на каждом сайте поэтому сейчас рассмотрим простую но вполне функциональную форму обратной связи.Она будет состоять из трех файлов index.php, contactform.js, contact.php и библиотеки jQuery. Вот так эта форма будет выглядеть у нас в конце:

    cf

    Шаг 1

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

    Index.php

    <!DOCTYPE HTML>
    <html lang="ru-RU">
    <head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="contactform.js"type="text/javascript"></script>
    <title>КонтактнаяформастехнологиейAjax</title>
    </head>
    <body>
    <div class="form-container">
    <h2>Контактнаяформа</h2>
    <div id="note"></div>
    <div id="fields">
    <form id="ajax-contact-form"action="">
    <label>Имя</label><input type="text"name="name"value=""/>
    <label>E-Mail</label><input type="text"name="email"value=""/>
    <label>Телефон</label><input type="text"name="tel"value=""/>
    <input class="btn"type="submit"name="submit"value="Отправить"/>
    </form>
    </div>
    </div>
    </html>

    Шаг 2

    Тут рассмотрим скрипт contactform.js

    $(document).ready(function() {
    $("#ajax-contact-form").submit(function() {
    var str = $(this).serialize();
    $.ajax({
    type: "POST",
    url: "contact.php",
    data: str,
    success: function(msg) {
    if(msg == 'OK') {
    result = '
    Ваше сообщение было отправлено
    ';
    $("#fields").hide();
    } else {
    result = msg;
    }
    $('#note').html(result).fadeIn().delay(3000).fadeOut("slow");
    $(".btn").on( "click", function() {
    $.when( effect() ).done(function() {
    });
    });
    }
    });
    return false;
    });
    });

    Здесь видим ajax запрос, в строчке url нужно прописать свой путь к файлу contact.php если он лежит в одной директории с index.php тогда оставьте как в этом скрипте. Далее идет проверка было ли сообщение отправлено. При удачной отправке форма закрывается и появляется сообщение «Ваше сообщение было отправлено».

    Шаг 3

    В этом шаге рассмотрим файл обработчик contact.php

    $post = (!empty($_POST)) ? true : false;
    if($post)
    {
    $email = trim($_POST["email"]);
    $name = htmlspecialchars($_POST["name"]);
    $email = htmlspecialchars($_POST["email"]);
    $tel = htmlspecialchars($_POST["tel"]);
    $error = "";
    if(!$name)
    {
    $error .= "Пожалуйста введите ваше имя.
    ";
    }
    // Check email
    function ValidateEmail($value)
    {
    $regex = "/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,6})$/";
    if($value == "") {
    return false;
    } else {
    $string = preg_replace($regex, "", $value);
    }
    return empty($string) ? true : false;
    }
    if(!$email)
    {
    $error .= "Пожалуйста введите e-mail.
    ";
    }
    if($email && !ValidateEmail($email))
    {
    $error .= "Введите корректный e-mail.
    ";
    }
    // Check tel
    function ValidateTel($valueTel)
    {
    $regexTel = "/^[0-9]{7,12}$/";
    if($valueTel == "") {
    return false;
    } else {
    $string = preg_replace($regexTel, "", $valueTel);
    }
    return empty($string) ? true : false;
    }
    if(!$tel)
    {
    $error .= "Пожалуйста введите телефон.
    ";
    }
    if($tel && !ValidateTel($tel))
    {
    $error .= "Введите корректный телефон.
    ";
    }
    if(!$error)
    {
    $subject ="Новое сообщение!";
    $message ="Новый запрос!\n\nE-mail: ".$email."\n\nИмя: " .$name."\n\nТелефон:".$tel."\n\n";
    $mail = mail("admin@gmail.com", $subject, $message,
    "From: ".$name." <".$email."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion());
    if($mail)
    {
    echo 'OK';
    }
    }
    else
    {
    echo '
    '.$error.'

    ';
    }
    }
    ?>

    Тут меняем «admin@gmail.com» на тот e-mail куда вы хотите чтобы приходила почта.

    Шаг 4

    Теперь придадим нашей форме более приятный внешний вид Между тегами вставим вот эти стили

    html, body { padding: 0; border: 0px none; }
    .notification_error
    {
    border: 1px solid #A25965;
    height: auto;
    width: 90%;
    margin: 15px 0;
    padding: 4px;
    background: #F8F0F1;
    text-align: left;
    -moz-border-radius: 5px;
    }
    .notification_ok
    {
    border: 1px #567397 solid;
    height: auto;
    width: 90%;
    margin: 15px 0;
    padding: 8px;
    background: #f5f9fd;
    text-align: center;
    -moz-border-radius: 5px;
    }
    label { font-size:15px !important; width: 116px; padding-left: 20px;
    margin: 5px; float: left; text-align: left; }
    br { clear: left; }

    На этом можно закончить форму обратной связи и посмотреть как она работает.
    И еще, если вы не хотите чтобы после отправки сообщения контактная форма закрылась то можно удалить с contactform.js вот эту строчку $(«#fields»).hide(); .


    Скачать архив

    Назад к спискуСледующий
    Tomatys — Дизайн с усами.
    Мы занимаемся разработкой сайтов для России и зарубежных рынков с 2011 года. Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют Томатус предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

    © 2011–2023
    Политика конфиденциальности

    Компания
    • О «Томатус»
    • Процесс
    • Кейсы
    • Наша команда
    • Вакансии
    • Блог
    • Контакты
    Брендинг
    • Логотипы
    • Фирменный стиль
    Разработка
    • Корпоративные сайты
    • Интернет-магазины
    • Сайты на 1С Битрикс
    • Адаптивные сайты
    Продвижение
    • Оптимизация сайта
    • Аудит эффективности
    • Продвижение в ТОП
    • Продвижение в регионах
    • Контекстная реклама
    Поддержка и развитие
    • Техническая поддержка
    • Комплексная поддержка
    • Разовые работы
    +7(495) 128-72-67
    Оставить заявку