Контактная форма с чекбоксами и выпадающим списком

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

(Реклама: "о том, как сделать красивые чекбоксы я описывал в этой статье, а о том как отправить прикрепленный файл - в этой")

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

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

Итак, создадим несколько полей:

<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/>

    <div class="moreOption">
       <span>Нужна адаптивность? </span><input class="adapt" type="checkbox" name="adapt[]" value="Нужна адаптивность"/><br/>
    </div> 

    <div class="moreOption">
       <span>Нужна SEO оптимизация?</span> <input class="seo" type="radio" name="seo[]" value="Нужна seo оптимизация"/><br/>
    </div>

    <div class="moreOption">
       <span>Выберете тарифный план: </span>
       <select class="tPlan" name="tPlan">
          <option value="Тарифный план: Стартовый">Стартовый</option>
          <option value="Тарифный план: Оптимальный">Оптимальный</option>
          <option value="Тарифный план: VIP">VIP</option>
       </select>
    </div>

  <button class="applicationButton" type="submit" form="application">Отправить заявку</button>

</form>

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

Особое внимание на поля:

 <div class="moreOption">
    <span>Нужна адаптивность? </span><input class="adapt" type="checkbox" name="adapt[]" value="Нужна адаптивность"/><br/>
 </div> 

 <div class="moreOption">
    <span>Нужна SEO оптимизация?</span> <input class="seo" type="radio" name="seo[]" value="Нужна seo оптимизация"/><br/>
 </div>

 <div class="moreOption">
    <span>Выберете тарифный план: </span>
    <select class="tPlan" name="tPlan">
       <option value="Тарифный план: Стартовый">Стартовый</option>
       <option value="Тарифный план: Оптимальный">Оптимальный</option>
       <option value="Тарифный план: VIP">VIP</option>
    </select>
 </div>

Именно эти поля и отвечают за checkbox, радиокнопу и выпадающий список.

Добавив стили я добился следующего внешнего вида:
Контактная форма с чекбоксами
Как всегда исходник в конце статьи. Продолжим...

Теперь поговорим о php. Не мудрствуя лукаво, я взял обработчик из прошлой статьи и просто дополнил его. Вот как он выглядит сейчас:

<?php

  $sendto = "smart-landing@yandex.ru"; // почта, на которую будет приходить письмо !!! Измените на свою!!!
  $username = $_POST['name']; // сохраняем в переменную данные полученные из поля c именем
  $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
  $usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты
// проверяем наличие данных в чекбоксе и сохраняем их
  $adapt = '';
    if (empty($_POST["adapt"]))
    {
       $adapt = "Адаптивный дизайн не нужен";
    }
    elseif (!empty($_POST["adapt"]) && is_array($_POST["adapt"]))
    {
       $adapt = implode(" ", $_POST["adapt"]);
    }

// проверяем наличие данных в радиокнопке  и сохраняем их
  $seo = '';
    if (empty($_POST["seo"]))
    {
       $seo = "SEO оптимизация не требуется";
    }
    elseif (!empty($_POST["seo"]) && is_array($_POST["seo"]))
    {
       $seo = implode(" ", $_POST["seo"]);
    }

  $tPlan =$_POST ['tPlan']; // сохраняем данные из выпадающего списка

// Формирование заголовка письма
  $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 .= "<p><strong>Дополнительные параметры:<br/> </strong> ".$adapt."</p>\r\n";
  $msg .= "<p>".$seo."</p>\r\n";
  $msg .= "<p>".$tPlan."</p>\r\n";
  $msg .= "</body></html>";

// отправка сообщения
  if(@mail($sendto, $subject, $msg, $headers)) {
  echo "<center><img src='images/spasibo.png'></center>"; // Здесь может быть любой html код. Вместо картинки можно задать div и в нем что угодно
  } else {
  echo "<center><img src='images/ne-tpravleno.png'></center>"; // Здесь может быть любой html код. Вместо картинки можно задать div и в нем что угодно
  }

?>

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

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

Замените на эти:

$headers = "From: " . strip_tags($sendto) . "\r\n";
$headers .= "Reply-To: ". strip_tags($sendto) . "\r\n";

В таком случае письмо будет приходить не с email(a) указанного в поле пользователем, а как будто вы его отправили сами себе.
А на сегодня - все. Всем хорошего настроения. Подписывайтесь и комментируйте статью. Пока!

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

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

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

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

  1. Kate

    Что если нужно несколько форм отправки с одного лендинга?

    • dimadv7

      Тогда нужно менять id у формы и делать несколько обработчиков.

  2. Kate

    А использовать классы вместо идентификаторов нельзя?

    • dimadv7

      можно, но если по статье делала, то id формы

       <form id="application"....

      и атрибут form у кнопки должны совпадать

        button form="application" ...

      и у каждой формы должны отличаться

  3. Kate

    Спасибо, тут понятно. Попробую два вариант с двумя или несколькими обработчиками.

  4. dimadv7

    Если поля одни и те же, то можно и один обработчик оставить, или сделать один универсальный. Просто те поля, которые не заполнены — не будут приходить. А несколько делать предложил потому, что можно в каждом указать в теме письма, откуда именно (с какой части сайта) была получена заявка. Удобно для анализа))

  5. Михаил

    А как задать цвет шрифта в маске поля для ввода («Введите ваш телефон»)?

  6. Михаил

    Разобрался:
    input::-webkit-input-placeholder {
    color: red;
    }
    input::-moz-placeholder {
    color: red;
    }

  7. Макс

    Извините за дурацкий вопрос,а как добавить текстовой поле в данную форму?
    Спасибо!!!

    • dimadv7

      Привет, например так:

      <input name="Text" id="textfield" placeholder="текстовое поле*" />
  8. shuher715@gmail.com

    Здравствуйте, а как бы сделать суммирование чекбоксов, с выводом этой суммы на экран до нажатия отправки?
    пример:
    Нужна адаптивность 10руб?
    Нужна сео оптимизация 15руб?
    Тариф стартовый (выбран)
    Сумма 125руб
    Заказать(отправить)

  9. shuher715@gmail.com

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

    А как сделать чтобы отправлялось от себя к себе?
    Заранее примного вам благодарен!!!

    • dimadv7

      Нужно просто заменить в указанных строках переменную. Вместо $usermail поставить @sendto. Или задайте новую переменную, по аналогии с $sendto, например $from и присвойте нужный адрес эл. почты, например, support@sitename.ru и замените в $usermail на $from в указанных строках. По поводу второго вопроса, помочь не могу, нужно сохранить данные в переменные при помощи javascript и вывести результат их сложения, но писать «корзину» никогда желания не было

  10. SHUHER715@GMAIL.COM

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

  11. SHUHER715@GMAIL.COM

    Извините ЗА…
    сперва спросил, потом начал пытаться вообщем вроде вот так получилось:
    if(@mail($sendto, $subject, $msg, $headers)) {
    echo » «.$username.» ваше сообщение отправлено.»;
    }

  12. SHUHER715@GMAIL.COM

    if(@mail($sendto, $subject, $msg, $headers)) {
    echo » «.$username.» ваше сообщение отправлено.»; // Здесь может быть любой html код. Вместо картинки можно задать div и в нем что угодно
    }

  13. SHUHER715@GMAIL.COM

    фильтрация))

    • dimadv7

      Здравствуйте. Да, wordpress режет код. Вы правильно все поняли, в переменную сохранили, а потом выводим в любом месте, где нам это нужно 🙂

  14. SHUHER715@GMAIL.COM

    Как сделать, разный бэкурл? Для ваше сообщение отправлено и для ваше сообщение не отправлено.
    И в каких случаях не отправляется? как съимитировать?

    • dimadv7

      Интернет отвалился, может так. У меня не возникало такого никогда 🙂

  15. SHUHER715@GMAIL.COM

    id=»zayavkaName»
    id=»applicationEmail»
    id=»applicationTelephone»
    ЧТО ЭТО ТАКОЕ???

  16. SHUHER715@GMAIL.COM

    Вы не против если я повторюсь?
    что за id в коде вы знаете
    id=»zayavkaName»
    id=»applicationEmail»
    id=»applicationTelephone»

    • dimadv7

      Просто я не понимаю ваш вопрос. Что за id. Ну просто идентификаторы. Для чего задают идентификаторы? Вот именно для этого и задал. Если вам не нравиться задавать стили обращаясь к id, пользуйтесь классами или просто, всем тегам input задайте свойства. В чем вопрос собственно?

  17. SHUHER715@GMAIL.COM

    Простите, теперь понял, они оказывается для стилей, я просто стили не применял. А как применить стиль для переменной «.$username.», где после отправки выводится новое окно об успешной отправке с именем отправителя? Спасибо.

    • dimadv7

      Ясно. У думаю точно так же. Обернуть, например, в span с классом, и задать стили в css)

  18. Julia

    Помогите разобраться: у меня такая форма в качестве выпадающего меню. Но при нажатии на чекбокс она сворачивается. В чем может быть проблема?
    для наглядности скрин: _http://clip2net.com/s/3l9DF7O

    • dimadv7

      Причин много может быть, может у вас реакция на клик, может еще на что. Что-то не правильно указали.

  19. Евгений

    Здравствуйте! Как сделать несколько чекбоксов в форме?

    • dimadv7

      А вы пробовали уже как-то? Что не получилось?

  20. MakeLame

    Здравствуйте — мне нужно после нажатия кнопки «отправить» — перенаправить человека на определенную страницу — как это сделать? Так-же у меня есть к примеру 1 форма обратной связи в статье и одна в правой колонке — когда они вместе загружаются — то одна берет параметры другой. Т.е. если одна широкая а другая узкая, то обе становятся широкими.

    • dimadv7

      Здравствуйте. У форм должен быть разный id, тогда проблемы не будет. А насчет перенаправить, что вы имеете ввиду, какая страница должна открыться?

  21. Артур

    Добавляю ещё одну радио-кнопку — в итоге на сайте можно одновременно выбрать обе кнопки ((( Надо же, чтобы выбиралась только одна. Как это сделать???

  22. Артур

    Автор, подскажи пожалуйста, как подправить код, если нужно присылать на e-mail не значение value при отмеченном чекбоксе, а просто, что данный чекбокс отмечен? Потому что в value находится стоимость услуги, отмеченной в чекбоксе

    • Евгения

      Блог не о верстке же, вам показали способ, а как его модифицировать — дело ваше. Автор просто поделился своим опытом, и тем, как в свое время сделал он. Откройте любой сайт с основами html и узнаете как сделать радио-кнопки и чекбоксы. Это же азы. По поводу value — ну передавайте стоимость услуги, в чем проблема, будет приходить стоимость…

  23. Артур

    Евгения, такие советы лучше никогда не советуйте — это ни к чему. Автор сам решит помочь или нет. И как бы вся статья является описанием азов, так что те, кто их знает, такие статьи не читают, и вопросов естественно не задают. А статья как раз для не знающих.
    «По поводу value — ну передавайте стоимость услуги, в чем проблема, будет приходить стоимость…» — у меня список из 50 пунктов, цена большинства услуг повторяется. Как вы предлагаете распознавать какую именно услугу заказал клиент, если на e-mail пришло число «100»? Я нашел обходной способ — при формировании тела письма дописал наименование услуги. Но это дерьмовый вариант, ибо получается следующая картина:
    100 — услуга №1
    — услуга №2
    — услуга №3
    — услуга №4
    150 — услуга №5
    — услуга №6
    — услуга №7
    ….
    Я же не хочу видеть в письме перечисление всех услуг, мне нужно видеть только то, что заказали.

    • dimadv7

      Тогда схема такая, у ссылки, которая «Заказать», в title пишем что-то такое» «Окно Рехау; 200×200; 3000 рублей и т.д». далее пишем следующее:

      onclick="clickMe(this);returnfalse;"

      Получится так:

      <a onclick="clickMe(this);returnfalse;"  title="Окно Рехау; 200x200; 3000 рублей" class="byButton" data-toggle="modal" data-target="#priceModal" href="">Заказать</a>

      А после jQuery:

      <script>
      	$(document).ready(function(){
      function clickMe(element){ document.getElementById('id поля').value = element.title;}
      </script>
      

      Суть в том, что при клике на заказать, мы автоматически заполним поле значением title, которое прописано у кнопки. Делал с использованием бутстрап, поэтому в примере у кнопки — дата-атрибуты.

  24. Сергей

    Честно пытался с помощью гугла разобраться — не вышло, пришел за советом.

    Если у меня одно из полей предусматривает большое кол-во знаков (предположим 200), то каком образом мне заставить печатающийся текст располагаться не одну строчку, а в пределах формы?
    условно, как с тегом textarea?

    • Евгения

      Ну так и используй textarea….

  25. Игорь

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

    • dimadv7

      Например, использование mail.ru вместо нормальных почтовых сервисов)) Ошибок же нет никаких?

  26. Игорь

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

  27. Игорь

    Помогите мне настроить скрипт. Я готов заплатить рублей 500

    • dimadv7

      Хостинг не бесплатный? Не тестовый период? Часто, в таких функция отправки писем отключена.

  28. Игорь

    Нет.Хостинг платный.В техподдержке говорят, что отсутствует поле from.

    • Игорь

      Все. Разобрался. Заменил
      $headers = «From: » . strip_tags($usermail) . «\r\n»;
      На
      $headers = «From: адрес моей почты » . «\r\n»;

    • dimadv7

      Ясно, ну там же было предусмотрено, что почта подставляется та, которую указал пользователь.

  29. Игорь

    Да,но почему-то заработало только в таком виде… Не понимаю почему так

    • dimadv7

      Я даже не знаю, должно работать было… Не могу предположить, что могло пойти не так.

  30. Алексей

    А как в эту форму, добавить еще загрузку вложения? Буду очень благодарен)

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