Форма отправки сообщений с select-ами

21 октября 2019

Форма отправки сообщений с select-ами. Готовое решение, вывод в модалке, стили от Bootstrap 4

Файл sendmail.php следующего содержания положить в корень сайта

<?
	$back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";
	$kuda='mail@mail.ru';//куда отправлять почту?
	$zagolovok='Заказ - Светодиодная гирлянда, нить';
	$headers='Content-type:  text/html; charset="utf-8"';
	if (isset($_POST['ok'])){
		//если существует переменная, значит начнем получать информацию из формы
		$fio=$_POST['fio'];
		$prod=$_POST['prod'];
		$tel=$_POST['tel'];
		if ($_POST['services'] == 1) {
			$ser = 'Разноцветный';
			} elseif ($_POST['services'] == 2) {
			$ser = 'Белый';
			} elseif ($_POST['services'] == 3) {
			$ser = 'Синий';
			} elseif ($_POST['services'] == 4) {
			$ser = 'Желтый';
		}
		if ($_POST['price'] == 1) {
			$prc = '6м - 150 ₽';
			} elseif ($_POST['services'] == 2) {
			$prc = '8м - 250 ₽';
			} elseif ($_POST['services'] == 3) {
			$prc = '10м - 350 ₽';
			} elseif ($_POST['services'] == 4) {
			$prc = '12м - 450 ₽';
			} elseif ($_POST['services'] == 5) {
			$prc = '15м - 600 ₽';
			} elseif ($_POST['services'] == 6) {
			$prc = '20м - 900 ₽';
		}
		$messages="Телефон: ".$tel."<br> Имя: ".$fio."<br> Товар: ".$prod."<br> Длина: ".$prc."<br> Цвет: ".$ser;
		if (mail($kuda,$zagolovok,$messages,$headers)){echo "<center><img src='/post.jpg'><br><h1>Спасибо за обращение! Мы свяжемся с Вами в ближайшее время.</h1> $back</center>";}
	}
?>

Модалка с формой

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Заказать светодиодную гирлянду, нить</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<!----------------------------------------------------------------------------------->
				<form method="post" action="sendmail.php">
					<input name="prod" type="text" value="Светодиодная гирлянда (нить, прозрачный провод)" style="display:none"/>
					<div class="form-group">
						<label for="exampleFormControlSelect1">Выберите цвет</label>
						<select class="form-control" id="exampleFormControlSelect1" name="services">
							<option value="1">Разноцветный</option>
							<option value="2">Белый</option>
							<option value="3">Синий</option>
							<option value="4">Желтый</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleFormControlSelect2">Выберите размер</label>
						<select class="form-control" id="exampleFormControlSelect2" name="price">
						    <option value="1">6м - 150 ₽</option>
						    <option value="2">8м - 250 ₽</option>
							<option value="3">10м - 350 ₽</option>
							<option value="4">12м - 450 ₽</option>
							<option value="5">15м - 600 ₽</option>
							<option value="6">20м - 900 ₽</option>
						</select>
					</div>
					<div class="form-group">
						<label for="exampleFormControlInput1">Ваше имя:</label>
						<input name="fio" type="text" class="form-control" id="exampleFormControlInput1" placeholder="Как к вам обращаться?" required>
					</div>
					<div class="form-group">
						<label for="exampleFormControlInput2">Телефон:</label>
						<input name="tel" type="text" class="form-control" id="exampleFormControlInput2" placeholder="Оставьте телефон для связи" required>
					</div>
					<div class="form-group">
						<input type="submit" name="ok" class="btn btn-outline-danger btn-block btn-lg" value="Отправить" />
					</div>
				</form>
				<script>
					function checkParams() {
						var fio = $('#fio').val();
						var tel = $('#tel').val();
						if (fio.length != 0 && tel.length >= 10) {
							$('#submit').removeAttr('disabled');
							} else {
							$('#submit').attr('disabled', 'disabled');
						}
					}
				</script>
				<!----------------------------------------------------------------------------------->
			</div>
		</div>
	</div>
</div>		

Не забудьте подставить свой e-mail. Обязательным к заполнению полям добавить required

Кнопка вызова модалки

<button type="button" class="btn btn-outline-danger btn-block btn-lg" data-toggle="modal" data-target="#exampleModal">Заказать</button>

В результате получится типа такого