From d4b5c03e22e46ca3519e72129f71c4e83a449f14 Mon Sep 17 00:00:00 2001 From: itchief Date: Mon, 21 Mar 2022 20:24:18 +1000 Subject: Update --- README.md | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 2c24bcf..70b08f6 100644 --- a/README.md +++ b/README.md @@ -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: - Форма обратной связи -![Валидация формы обратной связи](https://itchief.ru/assets/images/350/2.png) -![Успешно отправленная форма обратной связи](https://itchief.ru/assets/images/350/3.png) - - +Валидация формы обратной связи +Успешно отправленная форма обратной связи -## 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 + + +``` +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 -- cgit v1.2.3