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

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

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

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

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

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

<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) указанного в поле пользователем, а как будто вы его отправили сами себе.
А на сегодня - все. Всем хорошего настроения. Подписывайтесь и комментируйте статью. Пока!

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

Конструктор форм

65 комментариев

  1. Kate

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

    1. dimadv7

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

  2. Kate

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

    1. 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. Макс

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

    1. dimadv7

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

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

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

  9. shuher715@gmail.com

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

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

    1. 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

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

    1. dimadv7

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

  14. SHUHER715@GMAIL.COM

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

    1. dimadv7

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

  15. SHUHER715@GMAIL.COM

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

  16. SHUHER715@GMAIL.COM

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

    1. dimadv7

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

  17. SHUHER715@GMAIL.COM

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

    1. dimadv7

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

  18. Julia

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

    1. dimadv7

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

  19. Евгений

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

    1. dimadv7

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

  20. MakeLame

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

    1. dimadv7

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

  21. Артур

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

  22. Артур

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

    1. Евгения

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

  23. Артур

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

    1. dimadv7

      Тогда схема такая, у ссылки, которая "Заказать", в title пишем что-то такое" "Окно Рехау; 200x200; 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?

    1. Евгения

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

  25. Игорь

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

    1. dimadv7

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

  26. Игорь

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

  27. Игорь

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

    1. dimadv7

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

  28. Игорь

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

    1. Игорь

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

    2. dimadv7

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

  29. Игорь

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

    1. dimadv7

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

  30. Алексей

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

  31. opiums

    Как в данную форму вставить каптчу?

  32. Евгений

    Хочу сказать тебе - спасибо)
    Впервые все получилось сделать с первого раза)

    1. dimadv7

      И тебе спасибо за отзыв)

  33. Pavel

    Отличная простая форма, спасибо автору за чистоту кода. У меня была проблема с php_flag register_globals и была устаревшая форма. Взял исходник автора и немного расширил под свои запросы, все работает. Спасибо

    1. dimadv7

      Pavel, здорово, и вам спасибо за отзыв!

  34. Сергей

    Здравствуйте, подскажите пожалуйста вот у меня форма с выбором RADIO и они связанные, когда добавляю name="color[]" скобки, и связанные RADIO не работают, как можно убрать эти скобы ?

  35. Андрей

    Отличная форма и всё работает. Спасибо. Хочу ее использовать в качестве формы заказа товара для лендинги, от того есть вопрос.

    Есть ли не сложный способ передать в тело письма заголовок товара?
    Т.е. есть три товара, при нажатии на «Купить» выдается модальное окно с формой заказа, после отправки формы на почту админа должно прийти письмо с названием товара.
    Возможно, самый простой способ дублировать и изменить id="application" на id="application2" и т.д. Что скажите?
    Отправка письма отправителю типа «Ваш заказ принят, бла-бла», это сложно будет сделать? )

    1. dimadv7

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

  36. Андрей

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

    Теперь можно использовать html
    echo 'Спасибо!'

    1. dimadv7

      Андрей, спасибо, что сообщили!

    2. Андрей

      dimadv7, не за что. Странно, но весь смысл моего сообщения не опубликовался. Вот скрин: priscree.ru / img / 0b5f227df7bbae.jpg

    3. dimadv7

      Андрей, просто нужно было экранировать, если возникала ошибка.

  37. Ася

    Здравствуйте! Подскажите пожалуйста, как вместо вывода картинки при отправке формы вывести всплывающее окно или sweetalert? Третий день копаю интернет, ничего найти не могу( В остальном форма оочень крутая, всё получилось, кроме этого(

    1. Дмитрий Давыдов

      Ася, обратите внимание на подход, описанный в этой статье.

  38. Сергей

    Здравствуйте, как сделать без перезагрузки страницы

    1. Дмитрий Давыдов

      Сергей, вот тут есть пример реализации формы без перезагрузки страницы:

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

 

© 2014 — 2021, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности