Skip to content

Instantly share code, notes, and snippets.

@madeas

madeas/feedback.php

Last active November 27, 2018 10:26
Show Gist options
  • Save madeas/b1cb6c74dc0781ed5fc8ff6bc38cdb35 to your computer and use it in GitHub Desktop.
Save madeas/b1cb6c74dc0781ed5fc8ff6bc38cdb35 to your computer and use it in GitHub Desktop.
Download ZIP
Форма обратной связи html + css + php + jQuery + js
Raw
feedback.php
<?
if ($_POST['who'] == 'robot') {
header('Refresh: 5; URL=https://www.site.ru');
echo ('<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body><h1 style="color:red">Ошибка!</h1>
<p><b>Не отправлено,</b> так как вы являетесь роботом!<br>
Через 5 секунд вы вернетесь на главную страницу.</body></p>');
} elseif ($_POST['mail'] == true) {
$mail = $_POST['mail'];
if ($_POST['name'] == true) {
$name = $_POST['name'];
} else {
$name = 'Отправитель';
};
if ($_POST['phone'] == true) {
$phone = $_POST['phone'];
} else {
$phone = 'Телефон';
};
if ($_POST['company'] == true) {
$company = $_POST['company'];
} else {
$company = 'Компания';
};
if ($_POST['site'] == 'http://') {
$site = $_POST['website'];
} else {
$site = 'Сайт отправителя';
};
if ($_POST['product'] !== true) {
$product = $_POST['product'];
} else {
$product = 'Продукт';
};
if ($_POST['services'] == none) {
$ser = 'Услуга не выбрана';
} elseif ($_POST['services'] == 1) {
$ser = 'Услуга_';
} elseif ($_POST['services'] == 2) {
$ser = 'Услуга_';
} elseif ($_POST['services'] == 3) {
$ser = 'Услуга_';
} elseif ($_POST['services'] == 4) {
$ser = 'Услуга_';
} elseif ($_POST['services'] == 5) {
$ser = 'Услуга_';
} elseif ($_POST['services'] == 6) {
$ser = 'Услуга_';
} elseif ($_POST['services'] == 7) {
$ser = 'Услуга_';
} else {
$ser = 'Услуга_последняя';
}
if ($_POST['message'] == true) {
$question = $_POST['message'];
} else {
$message = 'Доп. информация';
};
$mess = '
Отправитель: ' . $name . '
E-mail:' . $mail . '
Телефон:' . $phone . '
Из компании: ' . $company . '
Сайт отправителя: ' . $site . '
Продукт: ' . $product . '
Необходимые услуги: ' . $ser . '
Доп. информация: ' . $message;
$email = 'почтовый_адрес_вашего_сайта';
$headers = "From: $email\r\nReply-To: $email" . "\r\n" . "MIME-Version: 1.0\r\nContent-type: text/plain; charset=utf-8";
mail('адрес_доставки_писем', 'Форма обратной связи', $mess, $headers);
header('Refresh: 5; URL=http://www.site.ru');
echo ('<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body><h1>Ваше сообщение отправлено!</h1>
<p>Наши специалисты свяжутся с вами в ближайшее время.<br>
Через 5 секунд вы вернетесь на главную страницу.</body>');
$title = 'Сообщение отправелно';
} else {
header('Refresh: 5; URL=http://www.site.ru');
echo ('<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body><h1 class="red">Ошибка отправки сообщения!</h1><p>Проверьте правильность заполненных данных.<br>
Через 5 секунд вы вернетесь на главную страницу.');
$title = 'Ошибка!';
};
echo ('<br/><br/>');
?>
<?
include $_SERVER['DOCUMENT_ROOT'] . '/inc/inter';
include $_SERVER['DOCUMENT_ROOT'] . '/inc/footer'; ?>
Raw
index.html
<form class="form" method="post" action="/feedback.php">
<div class="form-row">
<div class="form-group col-6">
<label for="name">Представьтесь, пожалуйста: <span style="color: red">*</span></label>
<input type="text" name="name" id="name" onkeyup="checkParams()" placeholder="Как к вам обращаться?" required />
</div>
<div class="form-group col-6">
<label for="mail">Укажите ваш email: <span style="color: red">*</span></label>
<input type="email" name="mail" id="email" onkeyup="checkParams()" placeholder="Email" required />
</div>
</div>
<div class="form-group">
<label for="phone">Укажите ваш телефон: <span style="color: red">*</span></label>
<input type="tel" name="phone" id="phone" onkeyup="checkParams()" placeholder="Номер телефона +7" required />
</div>
<div class="form-group">
<label for="company">Напишите, из какой вы компании: </label>
<input type="text" name="company" placeholder="Введите название" />
</div>
<div class="form-group">
<label for="website">Укажите ваш сайт: </label>
<input type="text" name="website" placeholder="Адрес вашего сайта" pattern="(http|https)://.+" />
</div>
<div class="form-group">
<label for="product">Продукт: </label>
<input type="text" name="product" onkeyup="checkParams()" placeholder="Продукт" />
</div>
<div class="form-group">
<label for="services">Выберите услугу: </label>
<select name="services">
<option value="none">Услуга не выбрана</option>
<option value="1">Услуга_</option>
<option value="2">Услуга_</option>
<option value="3">Услуга_</option>
<option value="4">Услуга_</option>
<option value="5">Услуга_</option>
<option value="6">Услуга_</option>
<option value="7">Услуга_</option>
<option value="8">Услуга_</option>
</select>
</div>
<div class="form-group">
<label for="message">Доп. информация:</label>
<textarea name="message"></textarea>
</div>
<div>
<select name="who">
<option value="robot">Я Робот</option>
<option value="man">Я человек</option>
</select>
</div>
<div class="pt-3">
<input type="submit" id="submit" class="btn" value="Отправить" disabled />
<button type="button" class="btn" onclick="form.reset()">Очистить</button>
</div>
<div class="py-3">
<small>Поля отмеченные звездочкой <span style="color: red">*</span> являются обязательными для заполнения.</small>
</div>
</form>
Raw
style.scss
.form {
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
display: block;
padding: 12px 15px;
line-height: 1.5;
width: 100%;
font-size: 16px;
border: 1px solid #ced4da;
border-radius: .25rem;
background-clip: padding-box;
background-color: #fff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, .05), inset 0 1px 2px 0 rgba(0, 0, 0, .05);
&:focus {
outline: none;
}
}
.form-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.form-group:nth-child(1) {
input {
width: 95%;
}
}
}
.col-6 {
position: relative;
flex: 0 0 50%;
max-width: 50%;
}
.pt-3 {
padding-top: 1rem;
}
.form-group {
margin-bottom: 1rem;
label {
line-height: 1.7;
letter-spacing: .3px;
text-transform: uppercase;
font-size: 14px;
font-weight: 900;
}
textarea {
min-height: 110px;
resize: vertical;
}
}
}
Raw
to_form.js
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script>
function checkParams() {
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
if (name.length != 0 && email.length >= 6 && phone.length >= 10) {
$('#submit').removeAttr('disabled');
} else {
$('#submit').attr('disabled', 'disabled');
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment