Главная
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;
}

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




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


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

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

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

    проверка

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

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

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

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

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

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

    Спасибо.

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

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

  • Светлана
    Комментариев: 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Андрей
    Комментариев: 3

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

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

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

      • Андрей
        Комментариев: 3

        Ну, поскольку я в php разбираюсь не лучше чем свинья в апельсинах, решил задачу следующим образом. Настроил автоответчик на майл.ру с условием отправки, привязанным к теме письма. А в настройках автоответчика вставил html-письмо, включающее ссылку на скачивание файла. Вам спасибо за оперативный ответ.

        Ещё скажите пожалуйста вот что. Я не вижу ни где путь к файлу zakaz.php. Подразумевается, что он в корне лежит?

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

          Да. Путь простой к кнопке просто добавлен запуск аякса и обработчика AjaxFormRequest('messegeResult', 'formMain', 'zakaz.php')

          Подразумевается, что zakaz.php лежит в той же папке где и файл в который добавлен код формы. Если перенесете в другую папку то нужно указывать новый путь, например:
          AjaxFormRequest('messegeResult', 'formMain', 'inc/zakaz.php')

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

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

    СВАТАЛИ - помарочка) а так все работает, спасибо

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

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

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

      У этой формы нет проверки полей на заполнение. Недавно я писал статью о проверке полей на заполнение http://gnatkovsky.com.ua/validaciya-ili-proverka-polej-formy-na-oshibki-i-zapolnenie.html
      Эту статью при имении навыков можно с легкостью использовать и внедрить в форму с данной статьи.
      Можете скомбинировать и у Вас будет проверка на заполнение.

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

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

  • олег
    Комментариев: 2

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

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

    Здравствуйте. Перепроверьте все несколько раз. Не меняли ли вы name у поля телефон. Там по умолчанию telephone. Форма отправляет отлично и имя и телефон. Так же она не перекидывает ни на какую пустую страницу, она отправляет на той же где была открыта. В этом вся ее суть, скорее всего вы что-то напутали или с скриптами или дважды библиотеку подключили, нужно смотреть. Ну по вашему комментарию, скажу точно, что работает у вас оно не правильно.
    Сообщение об успешной отправке после отправки заменяет кнопку отправить, чтобы человек заново не отправлял по 100 раз. Такова задумка данного скрипта. После отправки чтобы отправить человек должен перезапустить страницу, иначе спама будет 1000000 писем.

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

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

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

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

Это не спам *

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

Привет дорогой друг

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