Контакты
Адрес: г. Ростов-на-Дону, Ворошиловский район, ул. Орбитальная 88/2.
Телефон: +7 (908) 172-0007
Email: s@trustcode.ru
Skype: trustcode.ru
Наша группа Вконтакте - vk.com/trustcodes

Политика конфиденциальности
Ваши персональные данные, в частности номер телефона и электронный почтовый адрес будут использоваться только в целях ответа на ваши вопросы и передачи коммерческих предложений по услугам компании «TRUST CODE». Просим обратить внимание, что мы не передаем данные 3м лицам.
Обратная связь




HC

Форма обратной связи в модальном окне

Создаём форму обратной связи в всплывающем окне на чистом CSS3 и HTML5 без использования JS.

Итак, начнем с CSS который будет отвечать за всплывающую форму (модальное окно):
.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		display: none;
		pointer-events: none;
	}

	.modalDialog:target {
		display: block;
		pointer-events: auto;
	}

	.modalDialog > div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: -moz-linear-gradient(#fff, #999);
		background: -webkit-linear-gradient(#fff, #999);
		background: -o-linear-gradient(#fff, #999);
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover { background: #00d9ff; }
Далее на странице сайта установим кнопку которая будет открывать модальное окно:
<a href="#openModal">Открыть модальное окно</a>
И в завершении установим форму вместе с обработчиком в блоке модального окна:
<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Закрыть" class="close">X</a>
		<h2>Модальное окно</h2>
			<form name="MyForm" action="#openModal" method="post"><br>
			<input name="name" type="text" placeholder="Имя" /><br>
			<input name="tel" type="phone" placeholder="Телефон" /><br>
			<input name="email" type="email" placeholder="Email" /><br>
			<textarea name="body"  placeholder="Ваше сообщение"></textarea><br>
			<input type="submit" value="Отправить заявку" id="btnpng4" />
			</form>
			<?php
			if (isset($_POST["email"])){
			if (isset($_POST["name"])) {$name = $_POST["name"];}
			if (isset($_POST["email"])) {$email = $_POST["email"];}
			if (isset($_POST["tel"])) {$tel = $_POST["tel"];}
			if (isset($_POST["body"])) {$body = $_POST["body"];}

			if($name=="" or $email=="" or $tel=="" or $body==""){ // Проверяем на заполненность всех полей.
				echo "Заполните все поля";
			}else{
				$ip=$_SERVER["REMOTE_ADDR"]; // Вычисляем ip пользователя
				$brose=$_SERVER["HTTP_USER_AGENT"]; // Вычисляем браузер пользователя
			$to = "email"; // Ваш email адрес
			$subject = "Сообщение c сайта"; // тема письма 
			$headers .= "Content-Type: text/html; charset=UTF-8";
			$headers .= "From: Создание сайтов Trust Code"; // Отправитель письма
			$message = "
			Имя: $name<br>
			E-mail: $email<br>
			Телефон: $tel<br>
			Текст: $body<br><br>

			--------------------------------------------------------<br>
			---------------IP отправителя: $ip<br>
			---------------Браузер отправителя: $brose<br>
			"; 
			$send = mail($to, $subject, $message, $headers);


			 if ($send == "true")
			 {
			 echo "Ваше сообщение отправлено. Мы ответим вам в ближайшее время.";
			 }
			 else
			 {
			 echo "Не удалось отправить, попробуйте снова!";
			 }
			}
			}
			?>
	</div>
</div>
Наш скрипт готов, вы можете вставить его в любое место на сайте и использовать под любые цели. Не забывайте стилизовать скрипт под свой дизайн.
Автор: Иван Цынтару
06.03.16, 13:47

0

12
11556
Комментарии:
Добавить комментарий
Нам очень важно ваше мнение.
0

К сожалению комментариев пока нету((, Может ваш будет первым?
Добавить комментарий