Главная
Web-дизайн
Форма отправки письма без перезагрузки страницы для Лендинга

Форма отправки письма без перезагрузки страницы для Лендинга

Доброго времени суток 🙂
Если Вам нужно создать Лендинг (Landing Page) или как у нас говорят Посадочную страницу, для рекламы своего продукта, то зачастую на этой странице находится простейшая форма отправки письма или форма обратной связи, как Вам удобнее. У меня уже есть пару примеров как сделать такую форму, но вот недавно мне попался еще один не плохой вариант.

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

И так приступим.

1. Подключение библиотеки jQuery

Скорее всего вы и так это сделаете, но всеравно напомню об этом.
Нужно в head добавить следующее:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2.Добавляем javascript

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

<script  type="text/javascript">
 function AjaxFormRequest(result_id,formMain,url) {
 jQuery.ajax({
 url: url,
 type: "POST",
 dataType: "html",
 data: jQuery("#"+formMain).serialize(),
 success: function(response) {
 document.getElementById(result_id).innerHTML = response;
 },
 error: function(response) {
 document.getElementById(result_id).innerHTML = "<p>Возникла ошибка при отправке формы. Попробуйте еще раз</p>";
 }
 });
 
 $(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');
 }
</script>

Его нижняя часть

$(':input','#formMain')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

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

3.Добавляем html

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

<div class="form">
<p>Оставьте ваши контакты и наш консультант свяжется с вами </p>
<form method="post" action="" id="formMain">
<input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" />
<input id="telephone" type="text" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off"/>
<div id="messegeResult"><input class="btn" id="button" type="button"  value="Отправить" onclick="AjaxFormRequest('messegeResult', 'formMain', 'zakaz.php')"/></div>
</form>
</div>

Данная форма имеет 2 поля Имя и телефон. Так что ее можно использовать еще и как форму заказа обратного звонка на любом сайте не только Лендинге. Можете добавить свои поля с почтой и адресом и тд.
Кстати, последний input - это кнопка отправки и она заключенная в div id=messegeResult. Вся фишка в том что после нажатия кнопки, данные отправятся Вам на почту, а сама кнопка исчезнет, а вместо нее появится текст типа - Сообщение успешно отправлено. Скоро Вам перезвонят.
Можете в div id=messegeResult заключить например вторую строку - Оставьте ваши контакты и наш консультант свяжется с вами тогда после нажатия на кнопу этот текст изменится на тот, что приведен выше. В общем все что находится в этом диве, после нажатия на кнопку изменится на сообщение об успешной отправке.

4.Создаем php обработчик, для нашей формы

Для начала нужно создать файл и назвать его zakaz.php
Далее вставить в него следующий код, отвечающий за обработку

<?php
if($_POST)
    {
    $to = "почта@gmail.com"; //куда отправлять письмо
    $subject = "Заказ звонка"; //тема
    $message = '<span style="font-weight:bold;color:#ff6600;font-size:18px;"><i>Заказ звонка</i> </span><br><br>
	Имя: <span style="font-weight:bold;color:#339900;">'.$_POST['name'].'</span><br>
	Телефон: <span style="font-weight:bold;color:#339900;"> '.$_POST['telephone'].'</span>';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: <office@gmail.com>\r\n"; // от кого, придумайте ящик или укажите почту своего сайта.
    $result = mail($to, $subject, $message, $headers);
 
    if ($result){
        echo "<p>Сообщение успешно отправлено. Скоро Вам перезвонят</p>";
    }
    }
?>

В 4 и в 11 нужно указать почту, на которую будут отправлены данные с формы. В 6 строке $message начинается все содержание письма.так что если добавите новые поля адреса и почты и тд, то их как раз нужно дописать тут по примеру уже имеющихся Имени и Телефона.
В 15 строке - как раз прописано то сообщение, которое выведется в div id=messegeResult с предыдущего пункта. Так что можете его изменить под себя.

5.Задаем стили

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

.form{
width:350px;
height:225px;
position:absolute;
top:50%;
left:50%;
right:50%;
bottom:50%;
background:#f1f1f1;
padding: 20px;
}
.form p{
font-size:18px;
color:#333;
text-align:center;
}
input[type="text"]{
background:#fff;
font-size:15px;
border:2px solid #336699;
line-height:20px;
padding:7px 10px 6px;
margin:10px 0 0;
font-size:15px;
width:90%;
box-shadow:inset 0 2px 7px rgba(0,0,0,.15);
transition:all .15s;
}
input[type="text"]:hover,
input[type="text"]:focus{
border-color:#ff6600;
}
input[type="text"]{
border-color:#ccff33;
}
.btn{vertical-align:middle;font-size:18px;color:#fff;font-weight:700;text-align:center;line-height:1.3 !important;padding:5px 10px 5px;margin:10px 0 0;border:0;cursor:pointer;background:#97ca33;}

.btn:active{
color:rgba(255,255,255,.6);
background:#57900f;
box-shadow:inset 0 2px 15px rgba(0,0,0,.2);
}
.btn:hover{
background:#a6d251;
}

Если все сделано правильно то у Вас должна получиться форма. На этом все, спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(14 голосов, в среднем: 5 из 5)

Опубликовано 17 комментариев

  • sadf
    Комментариев: 1

    проверка

  • Владимир
    Комментариев: 1

    Не работает
    постоянно выходит это -
    Возникла ошибка при отправке формы. Попробуйте еще раз

    • Виталий
      Комментариев: 269

      Такой ответ, получается в нескольких случаях.
      1. Не правильно установлен скрипт формы.
      2. Не введен адрес почты.
      3. Проверка работы на локальном хостинге, то есть у себя на компьютере, а не на сайте.
      Еще возможно что-то с Вашим хостингом и он не разрешает отправку. Данным скриптом я пользуюсь уже 2 года. Все мои лендинги на нем, а также еще много чего интересного. Так что его работоспособность проверена не раз. Еще раз внимательно все просмотрите. Возможно у Вас где-то конфликт или ошибка.

  • Михаил
    Комментариев: 1

    Вроде все работает, простой и удобный скрипт, но все таки одна проблема у меня возникает. При получении кириллица переводится в абру-кадабру. Подскажите в чем дело? Я уже и кодировку менял. Ничего не получается.

    Спасибо.

    • Виталий
      Комментариев: 269

      У меня такое было пару раз, только на локальном хостинге, при переноса на сайт все становилось как нужно, само по себе.

  • Светлана
    Комментариев: 1

    Здравствуйте, подскажите, пжлста, а если нужно установить несколько одинаковых форм на лендинг, что нужно изменить в скрипте?

  • Николай
    Комментариев: 3

    Здравствуйте всем кто подскажет , что надо дописать , что бы адреса приходили на почту?

    <div class="hr"></div>
    <section class="mailing-list">
    <h2>Будь первым кто узнает об открытии?</h2>
    <form>
    <div id="loadBar" align="center"></div>
    <form action="#" method="post" id="cForm2">
    <input value="office@gipertao.ru" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" type="text">
    <input value="Подпишись" type="submit">
    </form>

    • Виталий
      Комментариев: 269

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

      • Николай
        Комментариев: 3

        мне само письмо с текстом не нужно. мне надо просто что бы доходил email c email-ом отправителя!

        • Виталий
          Комментариев: 269

          Ваш мейл и будет в письме приходить на ящик, иначе никак. Письмо отправляется PHP функцией mail. Следовательно у Вас должен быть файл который это делает, внутри которого прописана эта функция. То что Вы показали в комментарии, это просто форма обертка, она ничего не сможет сама по себе отправить, к тому же она имеет ошибки. Ваша форма, это как автомобиль без двигателя 🙂 Нужно сделать правильную форму, потом под нее написать код в отдельном PHP файле, как показано в этой статье - PHP ОБРАБОТЧИК. Код будет брать данные с вашей формы и отправлять Вам письмо на почту. 🙂

  • Валерий
    Комментариев: 1

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

    • Виталий
      Комментариев: 269

      Не совсем понятно, что значит другой почты. Вы вводите несколько почту через запятую или почту другого сервиса, например на Яндекс приходит, а на гугл нет? Смотрите в спаме. так же в 11 строке кода есть - From: - поменяйте на нормальную почту, он показывается как отправитель.

  • Дмитрий
    Комментариев: 5

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

    required - не обрабатывается почему то(

    • Виталий
      Комментариев: 269

      пустые поля может помочь эта статья http://gnatkovsky.com.ua/poka-polya-ne-zapolneny-knopka-ne-aktivna.html
      Также для формата можно применить скрипт. У меня на сайте его нет, все не напишу о нем статью. Скрипт запрещает нажимать определенные клавиши на клавиатуре. Можно запретить ввод текста в цифровое или наоборот.

  • Вадим
    Комментариев: 1

    Здравствуйте, сделал все как у Вас скрипт выдал сообщение что мое сообщение отправлено. Но в почтовом ящике так ничего не и нет. Получается что не отправило сообщение.У меня есть рабочий сайт в не локальный и есть почтовый ящик привязанный к доменну. Подскажите, что делать?

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий