diff options
| author | itchief <alex.malcev1980@gmail.com> | 2022-03-21 13:24:18 +0300 |
|---|---|---|
| committer | itchief <alex.malcev1980@gmail.com> | 2022-03-21 13:24:18 +0300 |
| commit | d4b5c03e22e46ca3519e72129f71c4e83a449f14 (patch) | |
| tree | feccdfd96b47996a60197929a4a5d8a869b132fe | |
| parent | 3b3fd931db181bbf4242dc9cbfd2f75a1425bde9 (diff) | |
Update
| -rw-r--r-- | README.md | 22 |
1 files changed, 16 insertions, 6 deletions
@@ -4,14 +4,11 @@ A small project containing an example of a page with a feedback/contact form bui Check the on here Demo: https://itchief.ru/examples/lab.php?topic=php&file=feedback-form Screenshots: - <img src="https://itchief.ru/assets/images/350/1.png" alt="Форма обратной связи" width="300"> - - - - +<img src="https://itchief.ru/assets/images/350/2.png" alt="Валидация формы обратной связи" width="300"> +<img src="https://itchief.ru/assets/images/350/3.png" alt="Успешно отправленная форма обратной связи" width="300"> -## Step-by-step instructions for installing +## Step-by-step instructions 1. Add a form to the HTML (it allows us to collect data). An example of the form is located in "index.html". ```html @@ -21,3 +18,16 @@ An example of the form is located in "index.html". ``` The handler is set using the action attribute. An example of the form is located in "index.html". + +2. Connect the files "style.css" and "form-processing.js": +```html +<link rel="stylesheet" href="css/style.css"> +<script src="/feedback/js/form-processing.js"></script> +``` +The logic of the success message output is written in the success event handler. In "index.html" this is done through the following code: +```js +document.querySelector('form').addEventListener('success', (e) => { + const el = e.target.closest('.form-container').querySelector('.form-success'); + el.classList.remove('form-success_hide'); +}); +```js |