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

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

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

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

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

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

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

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