blob: 79ef84cf410fc8edc22970398effb658367d649d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма обратной связи</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Форма обратной связи</h1>
<div class="form-container form__wrapper">
<!-- Форма обратной связи -->
<form id="feedback-form" action="/feedback/form-processing.php" enctype="multipart/form-data" novalidate>
<div class="form-row">
<!-- Имя пользователя -->
<div class="form-group">
<label for="name" class="control-label">Имя</label>
<input id="name" type="text" name="name" class="form-control" value="" placeholder="Имя" minlength="2"
maxlength="30" required="required">
<div class="invalid-feedback"></div>
</div>
<!-- Email пользователя -->
<div class="form-group">
<label for="email" class="control-label">Email-адрес</label>
<input id="email" type="email" name="email" required="required" class="form-control" value=""
placeholder="Email-адрес">
<div class="invalid-feedback"></div>
</div>
</div>
<!-- Сообщение пользователя -->
<div class="form-group">
<label for="message" class="control-label">Сообщение (не менее 20 символов)</label>
<textarea id="message" name="message" class="form-control" rows="3"
placeholder="Сообщение (не менее 20 символов)" minlength="20" maxlength="500"
required="required"></textarea>
<div class="invalid-feedback"></div>
</div>
<!-- Файлы, для прикрепления к форме -->
<div class="form-group form-attach" data-count="5">
<div class="form-attach__label">Файлы (не более <span class="form-attach__count">5</span>)</div>
<div class="form-attach__wrapper">
<input type="file" name="attach[]" multiple required>
<div class="form-attach__description">
<div>Нажмите для загрузки файлов или перетащите их</div>
<div class="text-sm">PNG, JPG, GIF (до 512 Кбайт)</div>
</div>
<div class="form-attach__items"></div>
</div>
<div class="invalid-feedback"></div>
</div>
<!-- Капча -->
<div class="form-group form-captcha">
<img class="form-captcha__image" src="/feedback/captcha/captcha.php" data-src="/feedback/captcha/captcha.php"
width="132" height="46" alt="Капча">
<div class="form-captcha__refresh">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
<path fill="currentColor"
d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z">
</path>
</svg>
</div>
<div class="form-group form-captcha__input">
<label for="captcha" class="control-label d-none">Код, показанный на изображении</label>
<input type="text" name="captcha" maxlength="6" required="required" id="captcha"
class="form-control captcha" placeholder="******" autocomplete="off" value="">
<div class="invalid-feedback"></div>
</div>
</div>
<!-- Пользовательское солашение -->
<div class="form-group form-agree form-check">
<input class="form-check-input" type="checkbox" name="agree" id="agree" required value="true">
<label class="form-check-label" for="agree">Нажимая кнопку, я принимаю условия <a href="#">Пользовательского
соглашения</a> и даю своё согласие на обработку моих персональных данных</label>
<div class="invalid-feedback"></div>
</div>
<!-- Сообщение об ошибке -->
<div class="form-error form-error_hide">Исправьте данные и отправьте форму ещё раз.</div>
<!-- Кнопка для отправки формы на сервер -->
<div class="form-submit">
<button type="submit">Отправить сообщение</button>
</div>
</form>
<!-- Сообщение об успешной отправки формы -->
<div class="form-success form-success_hide">
<div class="form-success__message">Форма успешно отправлена. Нажмите <button type="button"
class="form-success__btn">здесь</button>, если нужно отправить ещё одну форму.</div>
</div>
</div>
</div>
<script src="/feedback/js/form-processing.js"></script>
<script>
/*
attachMaxItems: 3,
attachMaxFileSize: 128,
attachExt: ['png', 'jpg']
*/
const form = new ItcSubmitForm('form');
// при получении ответа result="success" от сервера
document.querySelector('form').addEventListener('success', (e) => {
const el = e.target.closest('.form-container').querySelector('.form-success');
el.classList.remove('form-success_hide');
});
// при клике на .form-success__btn
document.querySelector('.form-success__btn').addEventListener('click', (e) => {
form.reset();
e.target.closest('.form-container').querySelector('.form-success').classList.add('form-success_hide');
})
</script>
</body>
</html>
|
