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

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

index.html

<div class="kylform">Обратная связь</div>


<div id="kylform">
    <div class="kylform_header">Обратная связь</div>
    <form action="#" method="post" autocomplete="off">
        <div class="pad">
            <p>Описание для формы если потребуется, например надпись "Заполните все поля".</p>
            <input type="text" name="name" class="ico_name" placeholder="Имя">
            <input type="text" name="phone" class="ico_phone" placeholder="Контактный телефон">
            <input type="text" name="email" class="ico_email" placeholder="E-mail (не обязательно)">
            <input type="submit" id="send" value="Отправить">
            <div class="answer"></div>
        </div>
    </form>
    <a href="#" class="kylform_close"></a>
</div>
 

script.js

$(function(){
    
    // выводим кнопку через 1 секунду
    setTimeout(function(){
        $(".kylform").animate({
            right: "-58px"
        }, 700);
    }, 1000); // 1000 - одна секунда
    
    // Показываем форму по нажатии на кнопку
    $(".kylform").click(function(){
        $("#kylform").animate({
            top: "20%"
        }, 700);
        return false;
    })


    // закрываем форму по нажатию на крестик
    $(".kylform_close").click(function(){
        $("#kylform").animate({
            top: "-500px"
        }, 700);
        return false;
    })
    
    // отправялем данные с формы в обработчик
    $("#send").click(function(){
        var msg = $('#kylform form').serialize();
        $.ajax({
          type: 'POST',
          url: '/action.php',
          data: msg,
          success: function(data) {
            $('.answer').html(data).slideDown(300);
            console.log(data);
          },
          error:  function(xhr, str){
                $('.answer').html('Возникла ошибка: ' + xhr.responseCode);
            }
        });
        return false;
    })


});
 

action.php

<?php


header('Content-Type: text/html; charset=utf-8');


$to = "admin@site.com"; // почта администратора сайта, на который будут приходить письма


if(!empty($_POST["name"]) && !empty($_POST["phone"]) && !empty($_POST["email"])){ // проверка полей на пустоту, если не пустые данные пришли, то идём дальше
    
    // trim - обрезает пробелы в начале и конце
    // htmlspecialchars - преобразует специальные символы в HTML-сущности
    // strip_tags - удаляет HTML и PHP-теги из строки
    $name = trim(htmlspecialchars(strip_tags($_POST["name"])));
    $phone = trim(htmlspecialchars(strip_tags($_POST["phone"])));
    $email = trim(htmlspecialchars(strip_tags($_POST["email"])));


    // проверяем email на валидность
    if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) { // если не верный e-mail
        echo "<div class='i_false'>E-mail указан не верно!</div>"; // выводим сообщение пользователю
        exit; // выходим из дальнейшей обработки
    }
    
    // указываем заголовки
    $headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .= 'To: Название сайта <info@site.ru>' . "\r\n";
$headers .= 'From: Название сайта <info@site.ru>' . "\r\n";
$headers .= 'Bcc: info@site.ru' . "\r\n";
    
    // формируем тело письма
    $message = '
    <html>
        <head>
            <title>Новая заявка</title>
        </head>
        <body style="font-family:Arial,sans-serif; background: #E7F5FA;">
            <div style="background: #E7F5FA; color: #227E9B; border: 1px #AFD5E2 solid; padding: 10px;">
                <p><b>Имя:</b> "'.$name.'"</p>
                <p><b>Телефон:</b> "'.$phone.'"</p>
                <p><b>E-mail:</b> "'.$email.'"</p>
            </div>
        </body>
    </html>
    ';
    
    if(mail($to, "Новая заявка", $message, $headers)){ // если отправка прошла успешно, то...
        echo "<div class='i_true'>Сообщение отправлено!<br>Мы свяжемся с Вами в ближайшее время.</div>"; // выводим пользователю сообщение
    } else{ // если не отправилось по како-то причине, то...
        echo "<div class='i_false'>Не полуилось отправить сообщение</div>"; // выводим пользователю сообщение
    }
            
} else{ // если пустые данные пришли
    echo "<div class='i_false'>Необходимо заполнить все поля!</div>"; // выводим пользователю сообщение
}


?>
 
Вот и весь код. Стили уже в архиве найдёте.
Что не понятно, спрашивайте.
 
Внимание! У Вас нет прав для просмотра скрытого текста.


Автор: Kylaksizov
Поделиться:

Комментарии ( 11 )


  1. avatar_http://kylaksizov.ru/uploads/fotos/foto_160.png
    evgennova 18 декабря 2015 22:38
    • 0
    Ответить
    Работоспособность на своем сайте не проверял, думаю будет работать, скрипт отличное решение для обратной связи, респект!
  2. avatar_/templates/Default/dleimages/noavatar.png
    ROX 15 апреля 2016 21:04
    • 0
    Ответить
    Вроде все ок, но почта не доходит...пишет что письмо отправлено.
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 15 апреля 2016 21:55
      • +1
      Ответить
      Вывод один: форма использует mail, значит ваш хостинг заспамлен и требует использования SMTP, или один и вариантов покупайте выделенный IP.
  3. avatar_//kylaksizov.ru/uploads/fotos/foto_734.jpg
    Алиса Трофимович 21 мая 2017 11:19
    • 0
    Ответить
    Здравствуйте!
    Можно в этот скрипт добавить появление открытой формы через 30 сек на экране, а не только по клику?
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 21 мая 2017 11:21
      • 0
      Ответить
      Добрый день. Конечно можно.
      Дописав setTimeout в скрипте.
  4. avatar_//kylaksizov.ru/uploads/fotos/foto_734.jpg
    Алиса Трофимович 21 мая 2017 12:23
    • 0
    Ответить
    Все разобралась)))
    // Показываем форму позже без клика по ней через 30 секунда
    setTimeout(function(){
            $("#kylform").animate({
                top: "20%"
            }, 500);
    		}, 30000); // 1000 - одна секунда
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 21 мая 2017 12:53
      • 0
      Ответить
      Хорошо, что вы сами разобрались)
  5. avatar_//kylaksizov.ru/uploads/fotos/foto_765.jpg
    Илья Красногоров 16 июля 2017 15:05
    • 0
    Ответить
    а как добавить поле текст?

    у меня получилось добавить но само поле не работает на всю ширину окна и не делается перенос
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 16 июля 2017 15:08
      • +1
      Ответить
      Нужно добавлять с помощью тега textarea, а не input, то есть вот так:
      <textarea></textarea>
      1. avatar_//kylaksizov.ru/uploads/fotos/foto_765.jpg
        Илья Красногоров 24 июля 2017 16:05
        • 0
        Ответить
        Спасибо,разобрался, теперь хочу еще вызывать ее по ссылке,как это сделать?
  6. avatar_//kylaksizov.ru/uploads/fotos/foto_765.jpg
    Илья Красногоров 27 июля 2017 09:24
    • 0
    Ответить
    HELP!
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

В корзине: 0 шт. 0 руб.
Отключите расширение AdBlock на нашем сайте!

Собеседники

Переписка

Нименование Количество Цена / 1 шт.
Всего: 0 руб.