Ищу виджет КОНСТРУКТОР ФОРМ 2.0

Владимир90

Владимир90

Оптимизирует
27 Авг 2014
129
129
11
34
Добрый день. Может у кого нибудь есть виджет конструктор форм 2.0 ?
 
YandexBot

YandexBot

Самый главный
22 Апр 2015
529
238
26
Владимир90 написал(а):
Или другую контактную форму с прикреплением файла
Нажмите для раскрытия...
1. Форма связи позволяет отправить несколько изображений и др.файлов без перезагрузки страницы
  1. PHP вынесен в отдельный файл
  2. при нажатии клавиши F5 форма не будет отправлена снова
  3. после отправки формы страница не будет перезагружена
Файл contacts.html
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Контактная форма</title>
<style>
#feedback-form { /* вся форма */
max-width: 550px;
padding: 2%;
border-radius: 3px;
background: #f1f1f1;
}
#feedback-form label { /* наименование полей */
float: left;
display: block;
clear: right;
}
#feedback-form .w100 { /* поля */
float: right;
max-width: 400px;
width: 97%;
margin-bottom: 1em;
padding: 1.5%;
}
#feedback-form .border { /* граница полей */
border-radius: 1px;
border-width: 1px;
border-style: solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
}
#feedback-form .border:focus {
outline: none;
border-color: #abd9f1 #bfe3f7 #bfe3f7;
}
#feedback-form .border:hover {
border-color: #7eb4ea #97cdea #97cdea;
}
#feedback-form .border:focus::-moz-placeholder { /* убрать при фокусе первоначальный текст поля */
color: transparent;
}
#feedback-form .border:focus::-webkit-input-placeholder {
color: transparent;
}
#feedback-form .border:not:)focus):not:)hover):valid { /* правильно заполненные поля */
opacity: .8;
}
#submitFF { /* кнопка "Отправить" */
padding: 2%;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
background: #669acc;
color: #fff;
}
#feedback-form br {
height: 0;
clear: both;
}
#submitFF:hover {
background: #5c90c2;
}
#submitFF:focus {
box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
</style>

<form enctype="multipart/form-data" method="post" id="feedback-form">
<label for="nameFF">Имя:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
<label for="messageFF">Сообщение:</label>
<textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
var http = new XMLHttpRequest(), f = this;
evt.preventDefault();
http.open("POST", "contacts.php", true);
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
alert(http.responseText);
if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
f.messageFF.removeAttribute('value');
f.messageFF.value='';
}
}
}
http.onerror = function() {
alert('Извините, данные не были переданы');
}
http.send(new FormData(f));
}, false);
</script>
Файл contacts.php
<?php
if (isset ($_POST['contactFF'])) {
$to = "name@yandex.ru"; // поменять на свой электронный адрес
$from = $_POST['contactFF'];
$subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = "MIME-Version: 1.0\r\n";
$headers .= "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $from . "\r\n";
$headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$message.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
}
}
$message.="
--$boundary--";

if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
mail($to, $subject, $message, $headers);
echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
} else {
echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
}
}
?>
2. Форма связи в одном файле
<?php
if (isset ($_POST['contactFF'])) {
$to = "name@yandex.ru";
$from = $_POST['contactFF'];
$subject = "Заполнена контактная форма с ".$_SERVER['HTTP_REFERER'];
$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['messageFF'];
$boundary = md5(date('r', time()));
$filesize = '';
$headers = "MIME-Version: 1.0\r\n";
$headers .= "From: " . $from . "\r\n";
$headers .= "Reply-To: " . $from . "\r\n";
$headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
$message="
Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit

$message";
for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {
if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {
$attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));
$filename = $_FILES['fileFF']['name'][$i];
$filetype = $_FILES['fileFF']['type'][$i];
$filesize += $_FILES['fileFF']['size'][$i];
$message.="

--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"

$attachment";
}
}
$message.="
--$boundary--";

if ($filesize < 10000000) {
mail($to, $subject, $message, $headers);
$output = '<script>alert("Ваше сообщение получено, спасибо!");</script>';
} else {
$output = '<script>alert("Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.");</script>';
}
}
?>


<!DOCTYPE HTML>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Контактная форма</title>
<style>
#feedback-form {
max-width: 550px;
padding: 2%;
border-radius: 3px;
background: #f1f1f1;
}
#feedback-form label {
float: left;
display: block;
clear: right;
}
#feedback-form .w100 {
float: right;
max-width: 400px;
width: 97%;
margin-bottom: 1em;
padding: 1.5%;
}
#feedback-form .border {
border-radius: 1px;
border-width: 1px;
border-style: solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
}
#feedback-form .border:focus {
outline: none;
border-color: #abd9f1 #bfe3f7 #bfe3f7;
}
#feedback-form .border:hover {
border-color: #7eb4ea #97cdea #97cdea;
}
#feedback-form .border:focus::-moz-placeholder {
color: transparent;
}
#feedback-form .border:focus::-webkit-input-placeholder {
color: transparent;
}
#feedback-form .border:not:)focus):not:)hover):valid {
opacity: .8;
}
#submitFF {
padding: 2%;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
background: #669acc;
color: #fff;
}
#feedback-form br {
height: 0;
clear: both;
}
#submitFF:hover {
background: #5c90c2;
}
#submitFF:focus {
box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
</style>

<?php echo $output; ?>
<form enctype="multipart/form-data" method="post" id="feedback-form">
<label for="nameFF">Имя:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="например, Иван Иванович Иванов" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Email:</label>
<input type="email" name="contactFF" id="contactFF" required placeholder="например, ivan@yandex.ru" x-autocompletetype="email" class="w100 border">
<label for="fileFF">Прикрепить файл:</label>
<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
<label for="messageFF">Сообщение:</label>
<textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>

Рекомендации к скрипту отправки файлов на почту
  1. нужно заменить свой@yandex.ru
  2. нужно заменить contacts.php на полный адрес, например, http://сайт.ru/папка/папка/contacts.php
  3. серые заголовки лучше убрать. Они меняют адрес хостинга на тот, что посетитель указывает в форме. Но некоторые почтовые сервисы (например, Яндекс.Почта) при их наличии не присылают письма вовсе
  4. для того, чтобы добавить новое поле, нужно внести изменение в HTML и PHP код. Другими словами, добавить те же участки, что и для messageFF
  5. для того, чтобы настроить прикрепление только одного файла, следует убрать всё выделенное. По умолчанию прикреплять можно несколько файлов
  6. для того, чтобы можно было прикреплять только определённый тип файлов, в input прописывается атрибут accept. По умолчанию неважно что прикреплять: картинки, видео или документы
    <input type="file" name="fileFF[]" multiple id="fileFF" class="w100" accept="image/*">
СМАЙЛИКИ ЗАМЕНИТЬ НА СИМВОЛ ( : без пробела
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу