Доброго времени суток. Получил несколько вопросов по поводу того как добавить в контактную форму чекбоксы и решил ответить в виде статьи, так как многим это тоже может пригодиться. Заодно разберем и как отправить радиокнопки, и элементы выпадающего списка, чтобы у вас вообще не оставалось вопросов по этому поводу.
(Реклама: о том, как сделать красивые чекбоксы я описывал в этой статье, а о том как отправить прикрепленный файл - в этой)
Итак, многим я в общих чертах ответил уже как это делается личным сообщением, а теперь распишу подробно. На самом деле процесс тот же. Сохраняем в переменную данные, проверив значение поля на их наличие и вкладываем в письмо. Давайте приступим...
Создание контактной формы с чекбоксами
Итак, создадим несколько полей:
<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) указанного в поле пользователем, а как будто вы его отправили сами себе.
А на сегодня - все. Всем хорошего настроения. Подписывайтесь и комментируйте статью. Пока!
