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

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

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

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

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

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

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

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

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

61 комментарий

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

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

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

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

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

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

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

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

       <form id="application"....

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

        button form="application" ...

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

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

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

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

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

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

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

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

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

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

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

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

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

      <input name="Text" id="textfield" placeholder="текстовое поле*" />
  8. Дмитрий Давыдов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      Здравствуйте. У форм должен быть разный 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. Дмитрий Давыдов

      Тогда схема такая, у ссылки, которая "Заказать", в 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. Дмитрий Давыдов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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