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

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

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

Создание формы обратной связи – html разметка

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

<form id="application" action=" application.php" method="POST" name=" application ">
   <input name="name" id="zayavkaName" maxlength="20" placeholder="Введите ваше имя" required />
   <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Введите ваш E-mail" required />
   <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Введите ваш телефон" required/>
   <button class="applicationButton" type="submit" form="application">Получить прайс </button>
</form>

Попробуйте открыть в браузере данный код и посмотрите что у вас получилось, в зависимости от того, какой интернет-обозреватель используете, должно выглядеть примерно так:

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

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

Создание формы обратной связи - css разметка

Давайте зададим стили нашей форме и приведем ее к читабельному виду:

/* Стили формы */
#application {
    width: 475px;
    margin: 0 auto;
}

/*Стили полей для ввода*/
#applicationName, #applicationEmail, #applicationTelephone {
    width: 100%;
    height: 73px;
    background: none;
    margin-top: 25px;
    border: 1px solid #fff;
    border-radius: 40px;
    text-align: center;
    color: #fff;
    font-size: 24px;
}
/*Стили полей при клике по ним*/
#applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus {
    border: 1px solid #30ad64;
}

/*Стили текста, выводящегося в placeholder*/
::-webkit-input-placeholder {
    color: #efefef;
    font-family: 'PT Sans', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

::-moz-placeholder  {
    color: #fff;
    font-family: 'PT Sans', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}  /* Firefox 19+ */

:-moz-placeholder {
    color: #fff;
    font-family: 'PT Sans', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}  /* Firefox 18- */

:-ms-input-placeholder {
    color: #fff;
    font-family: 'PT Sans', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

::placeholder {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/*Стили для кнопки*/
.applicationButton {
    margin-top: 25px;
    background: #30ad64;
    border: none;
    width: 100%;
    height: 73px;
    border-radius: 40px;
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    font-family: 'PT Sans', sans-serif;
    cursor: pointer;
}
    .applicationButton:hover {
        background: #d68c18;
    }

Если хотите, чтобы цвет кнопки менялся плавно, добавьте в .applicationButton и .applicationButton:hover такую строку:

transition: .6s;

Где .6s - время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:

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

Создание формы обратной связи - php разметка

Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.

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

То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.

<?php 

$sendto   = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо
$username = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
$usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
$usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты

// Формирование заголовка письма
$subject  = "Новое сообщение";
$headers  = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

// Формирование тела письма
$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n";
$msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n";
$msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Сайт:</strong> ".$usertel."</p>\r\n";
$msg .= "</body></html>";

// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
	echo "<center><img src='images/spasibo.png'></center>";
} else {
	echo "<center><img src='images/ne-tpravleno.png'></center>";
}

?>

Давайте немного поясню код:

$sendto   = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо
$username = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
$usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
$usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты

Тут, думаю, - понятно.

Теперь давайте сформируем заголовок письма.

$subject  = "Новое сообщение";
$headers  = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

Строка $subject = "Новое сообщение"; - отвечает за тему письма, может написать там: "Заявка с сайта" или то, что вам больше подходит.

Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type="email". То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:

$headers  = "From: " . strip_tags($usermail) . "\r\n";

То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.

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

$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n";
$msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n";
$msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Телефон:</strong> ".$usertel."</p>\r\n";
$msg .= "</body></html>";

Первой строкой задаем шрифт письма. Второй - выводим сообщение, например: "Заявка с формы обратной связи на первом экране". Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.

Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:

if(@mail($sendto, $subject, $msg, $headers)) {
	echo "<center><img src='images/spasibo.png'></center>";
} else {
	echo "<center><img src='images/ne-tpravleno.png'></center>";
}

?>

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

Через несколько секунд, после вывода изображения, я делаю редирект ( автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами <head></head>

<meta http-equiv="Refresh" content="4; url=http://Адрес сайта/">

То есть через 4 секунды пользователя автоматически вернет на главную страницу!

Я не эксперт в php - это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок , спасибо!

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

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

Скачать исходник

P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:

  • Тестируете форму не на сервере.
  • Тестируете форму на бесплатном хостинге.
  • Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.

В этих случаях письма не будут приходить к вам на почту.

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Я загорелась желанием приготовить для мужа салат с мидиями фото рецепт на одном из сайтов очень приглянулся.

Комментарии: 177

  1. Евгений

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

    • dimadv7

      Отправьте исходники пожалуйста сюда dima.d.v(собачка)yandex.ru, так сложно сказать, должно работать. Или скиньте В ВКонтакте

    • dimadv7

      Если появляется картинка, значит все правильно, проверьте поля где указывали адрес электронной почты(в трех местах)

    • Егор

      Как-то сложно это все, к тому же на сервере должна быть поддержка PHP. Я для себя сделал выбор в пользу онлайн генераторов форм. К счастью их сейчас огромное множество. Мне вот нравится вот этот — formdesigner.ru. Довольно неплохой сервис, плюс есть интеграция с сервисами email рассылок и CRM системами. Очень удобно. Кому лень разбираться с php кодом рекомендую попробовать какой-то онлайн сервив.

    • dimadv7

      Здравствуйте, точно. Я тоже когда-то пользовался. Просил клиент установить. Нужно будет статью написать. Спасибо, что напомнили)

  2. макс

    Дима доброго времени суток.
    тут проблема у меня появилась (
    Все сделал работает но письма мне на почту не доходят(

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

    <?php
    if($_POST){

    $to = "8021388@mail.ru";
    $from = '8021388@mail.ru;
    $subject = "Отправить бриф, техника для клининга";
    $message = 'Имя: '.$_POST['name'].'; Почта: '.$_POST['email'].'; '.$_POST['telephone'].'; ';
    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: 8021388@mail.ru\r\n";
    $result = mail($to, $subject, $message, $headers);

    if ($result){
    echo "»;
    }
    else {echo» Сообщение не отпраВлено 🙁 «;
    }
    }
    ?>

    • dimadv7

      Здравствуйте. У вас в 4 строке, в $from = '8021388@mail.ru; — ошибка. Попробуйте так $from = '8021388@mail.ru'; — не было кавычек закрывающихся! Сейчас проверю полностью.
      И в конце тоже — попробуйте так:

       
      if ($result){
      	echo "<center><img src='images/spasibo.png'></center>";
      	}
      else {echo" <p>Сообщение не отпралено</p> ";
      	}
      }
      ?>
      
      

      Или, вместо вывода сообщения и картинки, сделайте полноценную html страницу, в которой и поблагодарите за заявку

    • dimadv7

      Если будут проблемы — пишите, будем разбираться!

    • dimadv7

      Вот проверил, вот так должно работать

      <?php 
      if($_POST)
      {
      $to = "8021388@mail.ru";
      $from = '8021388@mail.ru';
      $subject = "Ваше сообщение"; 
      
      $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].'; Email: '.$_POST['email'].';';
      
      $headers  = "Content-type: text/html; charset=UTF-8 \r\n"; 
      $headers .= "From: <8021388@mail.ru>\r\n"; 
      
      $result = mail($to, $subject, $message, $headers);
      
      
      if ($result){
      	echo "<center><img src='images/spasibo.png'></center>";
      	}
      else {echo" <p>Сообщение не отпралено</p> ";
      	}
      }
      ?>
      
      
  3. макс

    DIMADV7, Спасибо заработало!) у обратил внимания на «кавычки»))) а можно убрать пункт e-mail.
    так как многие обыватели его могут и не иметь или не знать как пользоваться.
    Просто Имя и Телефон самое оно)

    • dimadv7

      Да, конечно, просто оставьте так:

      $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].';';
      

      И, соответственно, в форме уберите input, отвечающий за ввод почты)

    • макс

      Спасибо)))

    • макс

      DIMADV7 а у Вас случайно может есть lightbox для текста и Формы обратной связи? много перерыл но толком не чего не нашел(

    • dimadv7

      Здравствуйте, честно говоря, я даже не в курсе что такое lightbox.

    • макс

      вот как тут, если сверху нажать «Оставьте номер»
      ww.altera-media.com

    • dimadv7

      Так а в чем принципиальное отличие? Форма связана с БД или еще что-то? Как по мне, так довольно простое поле, внешне.

  4. макс

    DIMADV7, ну там в «модульном окне» выплывает форма обратной связи. я не знаю как еще объяснить)

  5. макс

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

    • dimadv7

      Конечно. Ты же сам вот в этой строке говоришь к какой форме обращаться.

      <button class="applicationButton" type="submit" form="application">Получить прайс </button>

      а точнее — здесь

      form="application"

      Задай второй форме name и id — другой, и здесь пропиши его

      form="application"

      тогда будет все ок.

  6. Светлана

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

    • dimadv7

      Большое спасибо)

  7. DanilD

    Тоже не отправляет сообщения( Хотя после нажатия кнопки появляется сообщение об успешной отправке.

    <?php
    if($_POST)
    {
    $to = "danild91@gmail.com";
    $from = 'danild91@gmail.com';
    $subject = "Ваше сообщение";

    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].'; Email: '.$_POST['email'].';';

    $headers = "Content-type: text/html; charset=UTF-8 \r\n";
    $headers .= "From: \r\n»;

    $result = mail($to, $subject, $message, $headers);

    if ($result){
    echo «»;
    }
    else {echo» Сообщение не отпралено «;
    }
    }
    ?>

    • DanilD

      не $headers .= «From: \r\n»;
      а
      $headers .= «From: \r\n»;

    • dimadv7

      А в чем отличия?

    • DanilD

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

    • dimadv7

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

  8. DanilD

    Подрубил обновлённый код, заработало сразу. После того как прописали свои стили — опять перестал работать. Пробовал разные почты, ничего. Хотя в логах хоста отправку показывает. /home/ххххххх/public_html/2/forma/application.php:33 11.12.2014 14:47:07

    • dimadv7

      Ну не может же из за стилей перестать работать. Возьми исходник, и редактируй его внимательно. Ну я не знаю как тебе еще помочь. Сам же говоришь, что работает. Значит где-то, что-то портишь во время правок 🙂

  9. Сергей

    У меня форма на 1 поле (только телефон).
    Попытался сократить код, вот что вышло:
    <?php
    $sendto = "zalubov.s@gmail.com"; // почта, на которую будет приходить письмо
    $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером

    // Формирование заголовка письма
    $subject = "Заявка на UF-X";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

    // Формирование тела письма
    $msg = "»;
    $msg .= «Заявка на UF-X\r\n»;
    $msg .= «Номер: «.$usertel.»\r\n»;
    $msg .= «»;

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

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

    Подскажите пожалуйста, что не так делаю?

    • dimadv7

      Ответил в вк =)

    • Сергей

      Спасибо, все заработало!

  10. Сергей

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

    echo readfile('order_success.html');

    Но не срабатывает.

    • dimadv7

      if(@mail($sendto, $subject, $msg, $headers)) {
      	echo "<center><img src='images/spasibo.png'></center>";
      }
      

      Убирай

      <center> ... </center>

      И пиши

      <div class="" ></div>

      ну в общем как обычно, только кавычки после echo одинарные поставь, а то не будет работать

    • Сергей

      Спасибо. Я наверное не совсем понятно сформировал вопрос или что-то недопонял.
      У меня есть html страница «order_success.html», я хочу, чтоб при успешной отправке формы пользователь попадал на эту страницу. Что нужно написать после echo?

    • dimadv7

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

       echo 'header("Location: http://caqn.ru");';
  11. DanilD

    С проблемой отправки всё решилось банально просто — заменой хостинга) Автору спасибо за код.

    • Сергей

      Действительно, спасибо за совет!
      То есть вставляем всю страницу, начиная с и потом …? И все прописанное между и будет работать. Имею в виду «NOINDEX» для поисковиков и коды конверсии AdWords и Analytics?

  12. Oleg

    Здравсвуйте, форма не отправляет письми и не переходит на страницу с картинкой, просто возврощается страница сайта. Пробовал создать новую html стриницу все работает, а на моей index.php никак

    • dimadv7

      Странно, ну нужно разбираться, может ты не в ту папку кладешь файл application.php?

  13. Роман

    Спасибо! Отличная статья! Очень помогли!

  14. Максим

    Почему-то при копировании не все строки передало( В кратце, мне нужно чтобы фаил по этому адрессу energosystems.com.ua/Catalog_Energosystems.zip начинал скачиваться автоматически, после заполнения формы и перехода на картинку об успешном заполнении.

    • dimadv7

      Привет, попробуй так:

      <meta http-equiv="refresh" content="0;url=http://example.com/file.rar" />
    • Максим

      Это нужно в echo в конце вставить?

    • Максим

      Если да, то пишет: Parse error: syntax error, unexpected '<' in …

    • dimadv7

      Нет, конечно не в echo, между тегами

      <head></head>

      , там где подключаешь таблицу стилей)

    • Максим

      Я полный чайник в этом, по этому можете пожалуйста более детально описать куда вставлять? В мой главный файл index.html или в форму php? Вот сама кнопка
      Извиняюсь если принес неудобства и заранее огромное спасибо!)

    • Максим

      Может как-то можно Вам скинуть на почту исходних php и код самой кнопки из html?

    • dimadv7

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

      Можем на «Ты») Если хочешь присылай smart-landing@yandex.ru

  15. Максим

    Наверно я полный чайник в этом, но я вставил в мой документ index.html там где прописана эта кнопка, но оно скачивает его при заходе сразу на сайт( Очень нужно это сделать, но я блин даже не представляю уже как( Вот сама кнопка:

    Можете пожалуйста еще раз более подробно написать куда вставлять в мой главный файл index.html или в форму php? Заранее огромное спасибо!)

  16. Ильдар

    как сделать чтоб не вертикально столбцы были а горизонтально? в дну строку…и второй вопрос…форму можно ли использовать два более раз на одной странице…первый вариант в шапке вертикальном исполнении и по середине сайта в горизонтальном положении???

    • dimadv7

      Ширину формы сделай больше, они (поля) встанут горизонтально, если не поможет, то задай float:left; Использовать несколько раз — можно! Меняй id у формы и инпутов и располагай как угодно.

  17. Полари

    Спасибо за полезную статью, но помоги разобраться с проблемой. Установила разметку и появилась форма, как у тебя на картинке. После заполнения стилей CSS «введите имя» осталось в таком же прямоугольнике, а все остальные кнопки приобрели овальный вид. Пыталась проверить и переделывала несколько раз, но результат все тот же. Сайт пока терзаю на денвере — его на хостинг загружать не хочу. Тем более, что дальше делать мне тоже не понятно. В сам ВордПресс или где в теме прилаживать апликайшен?

  18. Полари

    кнопку исправила. Но с оставшейся частью помогите!

    • dimadv7

      Привет. Appliacation.php — класть в корень wp, там где wp-config.php Не понял, в чем помощь нужна?

  19. Николай

    У меня при клике на поле выделяется овальная рамка зелёным цветом и поверх неё синяя прямоугольная… Подскажи как от прямоугольника избавиться? Заранее спасибо

    • dimadv7

      Если правильно понял, то нужно полям прописать: outline:none;

  20. Полари

    Туда и разместила, но не чего не работает((( Поэтому и был вопрос.

  21. Полари

    Уже разместила Страничку в интернете и вот ссылка на форму:
    http://www.totea.ru/sample-page/forma
    Я ее заполняю и она перекидывает меня на страницу с фразой Not found

  22. Николай

    С первым вопросом помог, заработало.
    Скажи пожалуйста, а можно как-нибудь на локалке проверить работу формы?

    • dimadv7

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

  23. Ильдар

    Доброго времени суток! проверьте пожалуйста на моем сайте почему после отправки происходит такое….весь код перелопатил, а понять все не могу никак. mail16reg.ru Заранее благодарю!

    • dimadv7

      Так а письмо приходит? и если да, то есть ли у тебя такая строка в applikation.php:

      <meta http-equiv="Refresh" content="4; url=http://Адрес сайта/">

      замени на адрес своего сайта, либо удали вообще)

  24. Ильдар

    такую строку вставил…НООО!!!!!!! как выразиться даже помягче незнаю…вообщем через каждые 4 секунды происходит перезагрузка сайта…ставил и 10 сек и 60 сек…сам короче перезагружается…в итоге просто оставил пустым ….content=»;…. и пробывал удалять один хрен такая же байда

    • dimadv7

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

  25. genius

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

    • dimadv7

      Здравствуйте. Посмотрите здесь: http://smartlanding.biz/otpravka-formy-bez-perezagruzki-stranicy.html

    • Ильдар

      тестриовал…даже просто скачал по новой исходник открыл в браузере индекс файл…письмо отправил и также происхдит…вообщем пока страницу не перезагрузишь эта байда так и будет вылазить

    • Ильдар

      лучше уж это формой вопспользоваться http://smartlanding.biz/otpravka-formy-bez-perezagruzki-stranicy.html…байды хоть такой не выскакивает…А так примите мою похвалу, за такие клевые формы! просто , редактируется легко, как нужно под свои хотелки!

    • dimadv7

      Вообще — странно что возникала такая проблема, никогда не сталкивался с подобным. Все работает отлично, да и многие другие ставили и подобной проблемы не было…

  26. genius

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

  27. Александр

    Александр, благодарю за работающую форму обратной связи! А ты используешь реферальные хвосты для определения источника заявки? Не нашел такой статьи на твоем блоге 🙂

    • Александр

      Прошу прощения, Дмитрий конечно!)

    • dimadv7

      Ах, ха!!! Спасибо) Нет не использую, скоро появится такая статья))

  28. Максим Измайлов

    Огромное спасибо! Поставил на свои Landing Pages 🙂

  29. Егор

    Спасибо за форму. Очень пригодится. Все работает как надо. Я тоже front-end увлекаюсь больше чем back-end. Но все-же нужно элементарные вещи знать. Я пока изучаю только, когда петух жареный клюет 🙂
    Только опечатка у вас. В письме, которое приходит вместо телефон, написано сайт 🙂 Но это мелочь.
    Можно эту форму взять за основу и стили менять только, ну и когда убирать поле с мылом.
    Я еще посмотрю у вас форму без перезагрузки сейчас.

    • dimadv7

      Да я в курсе. Все вот лень-матушка поменять. Спасибо что напомнил. Засяду, подправлю косяки. А то уже несколько накопилось. Тут, в форме без перезагрузки (проверка поля), в статье об анимации — открывающийся body — пропал (( В общем нужно причесать исходники. Еще раз спасибо.
      !

  30. Егор

    Самое главное забыл написать. Почему у вас maxlength=»20" ?
    Я сейчас тестировал, не влазиет емаил в поле и не отправляется из-за этого письмо.
    имя может кто захочет с фамилией написать?
    Я сделал 40 — достаточно.

  31. Burt

    C браузера Safari приходят пустые заявки, т.к. напоминает о том, что нужно заполнить поля и отправляет сразу.
    В чем может быть проблема, как исправить?

    • dimadv7

      Все верно, на данный момент он не поддерживает required

  32. Алексей

    Дмитрий подскажи пожалуйста как сделать чтобы в application.php отображался header и footer? Как эти файлы можно подключить к application.php? Или как то по другому? А то страница без шапки и подвала получается. Спасибо.

    • dimadv7

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

      <header></header>

      (включительно) и вставить в application.php и точно так же footer.

    • Алексей

      Вставлял в application.php содержимое header и footer! Пустую страницу выдает. Без кода вообще.

    • Алексей

      Попробовал ещё раз.
      — не хочет отображаться на странице! (Код отображается в источнике!)
      — заработало!
      В чем может быть проблема с header ?

    • Алексей

      footer — заработал
      header — не хочет

    • dimadv7

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

  33. Greek

    Хочу добавить что в chrome и safari вокруг полей появляется дебильная синяя обводка дак вот чтобы её убрать надо добавить outline:none; в
    #applicationName, #applicationEmail, #applicationTelephone {

    • dimadv7

      Во всех исходниках есть файл reset.css, где это предусмотренно

  34. Николай

    приветствую! а как эту форму защитить от спам-ботов?

  35. Arthur

    Спасибо!!!

  36. Дмитрий

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

    • dimadv7

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

  37. Сергей

    А как сделать так что бы при выполнении функции удачной отправки сообщения, возникало всплывающее окно а не картинка?

  38. Александр

    Все работает, но приходит несколько запросов: 3 запроса из них 2 пустых. В чем может быть дело ?

    • dimadv7

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

      Или у вас одновременно приходит 3 запроса при отправке?

  39. Александр

    что можно сделать, чтобы при обновлении страницы не отправлялись запросы ?

    • dimadv7

      Использовать другую реализацию данной функции. Другой обработчик. Например используя class.phpmailer.php

      Или вот еще решение (тыц)

      А еще, можно про header('location: sitename.php') почитать. Про редирект.

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

  40. Дмитрий

    У меня после нажатия на кнопку, все содержимое application.php вываливается в браузере. В чем проблема?

    • dimadv7

      В том, что тестировать нужно на сервере. Php это северный язык и твой браузер не может его обработать

  41. Сергей

    Испробовал оба варианта, тот который тут и родной лэндосовский — оба просто скачиваются, собрался уже писать письмо про ошибку, но вспомнил, я же на Джино, а там всё нужно подключать, у меня так как лэндинг был на простом HTML, в целях экономии была отключена поддержка PHP((( Ну типа раз на хтмл то нафига мне пхп… Пока писал комеммент вспомнил, подключил — работает

  42. Сергей

    Вот еще один способ создания FeedBack-формы. Легко встраивается в любой проект. Все работает без перезагрузки страницы. youtube.com/watch?v=KR92NYGmQVY

  43. Миша

    Доброго времени суток. Огромное спасибо за красивую и удобную форму, работает, все прелестно. У меня один вопрос, можно как-нибудь ли это форму сдвинуть влево? я всячески игрался с тегами на странице, в стилях, но ничего не получается, висит по центру, что мне не очень нравится :(. Буду признателен за ответ

    • dimadv7

      Здравствуйте. Рад слышать 🙂 Ну конечно можно сдвинуть, но зависит же от стилей вашего сайта. В исходнике, выравнивание контейнера, в котором лежит форма происходит за счет

      margin: 0 auto;

      вот тут:

      #application {
          width: 475px;
          margin: 0 auto;
      }
  44. Миша

    Спасибо, попробую сделать. Мы кстати земляки почти, если верить городу, который указан в контакте. Я сам из Донецка, но сейчас проживаю в Киеве. Так что можно дружить 😉

    • dimadv7

      В контакте правдивая информация. До этой долбаной АТО, котора давно уже просто ТО, учился и жил тоже в Донецке. Планировал оставаться там, но не сложилось пока… Конечно можем дружить )) Даже если и не земляки бы были ))

    • dimadv7

      А по форме, нужно убрать марин 0 авто. И двигать как душе угодно блок

  45. Миша

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

  46. Сергей

    Добрый день. Сделал все как было написано, но когда заполняю форму и нажимаю получить прайс, выскакивает окно с ошибкой и текстом
    Not Found
    The requested URL /application.php was not found on this server.
    Помогите что сделал не так. Делал на вордпрессе!

    • dimadv7

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

  47. Юлия

    Здравствуйте, Дима. Скажите, пожалуйста, если на одной странице нужно поставить 8 форм для записи в разные группы с двумя одинаковыми полями (телефон и имя), нужно ли писать для каждой формы свой обработчик? Есть ли возможность как-то оформить в один, но чтобы на почту приходил заголовок каждый свой, смотря на какую кнопку (группу) нажал пользователь?

    • dimadv7

      Здравствуйте. Конечно можно один. Просто нужно добавить к каждой форме поле, у которого будет tipe=»hidden» (то есть оно будет невидимо для пользователя), а в параметре value написать нужный текст, например, заявка с шестой формы. А в обработчике принимать данные из этого поля, таким же образом, как и у других полей.

  48. Евген

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

    • dimadv7

      Ах-ха. Спасибо за отзыв)

  49. Юлия

    не получается и все тут. Приходит на почту, но значение поля hidden почему-то одно и тоже! Всю голову сломала. .. Помогите, пожалуйста

    Расписание занятий

    С посещением 1 раз в неделю!
    вечер ВТ 18:00-23:00

    Записаться

    вечер ЧТ 18:00-23:00

    Записаться

    вечер (ПН,ПТ) 18:00-23:00

    Записаться

    вечер (ВТ,ЧТ) 18:00-23:00

    Записаться

    СР 18:00-21:30, СБ 14:30-18:00

    Записаться

    вых (СБ,ВС) 9:00-14:15

    Записаться

    утро (ВТ,ЧТ) 9:00-14:15

    Записаться

    Записаться на ближайшую дату

    Код обработчика:
    <?php
    $sendto = "адрес@ящика"; // почта, на которую будет приходить письмо
    $username = $_POST['name']; // сохраняем в переменную данные полученные из поля c именем
    $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
    $usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты
    $tema = $_POST['named']; // тема письма

    // Формирование заголовка письма
    $subject = "Новое сообщение";
    $headers = "From: " . strip_tags($usermail) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    // Формирование тела письма
    $msg = "»;
    $msg .= «Cообщение с сайта «.$tema.»\r\n»;
    $msg .= «От кого: «.$username.»\r\n»;
    $msg .= «Почта: «.$usermail.»\r\n»;
    $msg .= «Телефон: «.$usertel.»\r\n»;
    $msg .= «»;

    // отправка сообщения
    if(@mail($sendto, $subject, $msg, $headers)) {
    echo «Ваша заявка успешно отправлена. «;
    } else {
    echo «Ошибка. Напишите нам на почту «;
    }
    ?>

  50. Юлия

    Уй, как-то вставилось не html <!— Расписание занятий

    С посещением 1 раз в неделю!
    вечер ВТ 18:00-23:00

    Записаться

    вечер ЧТ 18:00-23:00

    Записаться

    —>

    • dimadv7

      Вордпрес режет код. Не нужно его вставлять в комментарии. Вы же поменяли id у формы? У каждой формы должен быть свой. И у каждой кнопки значение атрибута form должно соответствовать айдишнику формы. Если не получится, напишите мне в ВК. Попробуем разобраться.

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