вывести сообщение после отправки формы

Как вывести красивое сообщение после отправки php формы?

Доброго всем здоровья!
Друзья, помогите советом, как красиво вывести сообщение после отправки формы на почту.
Сделал, но выводится только текст в браузером окне, да еще с дополнительной надписью:

html

Спасибо! Сильно не ругайтесь, но такой уж я самоучка-недоучка))

Так, сначала надо определиться куда ты будешь выводить.
Я, например, выводил в какой-то div. То есть, я предварительно создавал див, специально под надпись об успешном отправлении заявки.

Ну и дополнительные стили тоже можно подрисовать

alert(); это нативная функция JS, она вызывает окошко, которое не редактируется и в разных браузерах выглядит по-разному. Вместо этого ты можешь создать свою фунцию, которая будет делать подобное

Мой ответ подразумевает что ты имеешь небольшие знания HTML + CSS, пиши что не понятно

Источник

Действия после успешной отправки формы CF7

Метод, использующий on_sent_ok hook, больше не рекомендуется.
Эта функция будет отменена к концу 2017 года.

Если форма расположена просто на странице, тогда там все понятно — там появляются сообщения об ошибках и сообщение после успешной отправки сообщения сразу под формой.

Рассмотрим, как можно изменить уведомления об отправке формы, или какие события можно добавить после отправки формы (редирект, сообщение об успешной доставке, скачивание файла).

Так же рассмотрим, какие могут быть интересные варианты событий после отправки формы CF7 в pop-up окне, то есть во всплывающем окне. Как сделать такую форму, я описывал в статье Как сделать форму обратной связи во всплывающем окне для WordPress.

Список пользовательских DOM событий для Contact Form 7

Обработчик событий wpcf7submit

Приведенный ниже код представляет собой простой пример регистрации обработчика событий. В этом примере функция прослушивает wpcf7submit событие и просто выдает предупреждение, когда событие происходит.

Поскольку все wpcf7* события всплывают через дерево DOM к корню документа, если вам не нужно устанавливать конкретную цель события, вы можете упростить ее, установив document свойство в качестве цели события:

Данные, вводимые пользователем через нужную контактную форму, передаются в обработчик события как detail.inputs свойство объекта события. Структура данных detail.inputs является массивом объектов, и каждый объект имеет name и value свойство.

Это пример доступа к введенному пользователем значению через поле «your-name»:

Существуют также другие свойства объекта события, которые вы можете использовать в своем обработчике событий.

Например, если вы хотите сделать что-то только с определенной контактной формой (ID = 123), используйте detail.contactFormId свойство, как показано ниже:

Выводим поп-ап окно «Спасибо за заказ» после успешной отправки сообщения

Например, такой скрипт для открытия модального окна с id=»popup-success» после успешной отправки формы:

Этот код всплывающего окна можно разместить где угодно, хоть в футере, хоть под формой, основной плюс в том, что это окно могут вызывать любые другие формы и не нужно делать под каждую форму отдельные попапы.

Для кнопки «Закрыть окно» добавляем такой код в файл скриптов:

Если у вас несколько форм, тогда для каждого ID формы можно создавать свои события:

id — это номер формы
$.magnificPopup.open — в данном примере используется Magnific Popup

Создаем событие для конкретной формы после успешной отправки сообщения (используем обычный Easy Fancybox)

У многих возникают сложности с данным моментом, поэтому решил его все же вынести в статью.

Данный скрипт выведет на экран окно id=’popup-success’ после успешной отправки одной из форм (id == 17754 или 17758 или 17757):

Простой разбор кода

id == 17754 || 17758 || 17757 — окно будет показываться только для этих форм (или-или).

Окно с сообщением об успешной отправке (можно добавить его в код, или лучше в виджет футера например, если шаблон не хочется изменять, или еще 100 вариантов):

Если скрипт вы добавляете не в файл скриптов, а в футер или редактор js-кода, тогда оберните его в данный код:

Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

Открываем pdf-файл сразу на этой же странице

Открываем pdf на новой странице

Редирект на другую страницу после успешной отправки формы

Открыть новую страницу в новой вкладке после отправки формы:

Рекомендую к прочтению:

Комментарии (43) к “Действия после успешной отправки формы CF7”

Ирина

при этом само окно находится в блоке с
Подскажите, а где должен быть сам блок?

Denis Creative

Обновил немного статью — вот ссылка

Дмитрий

Есть кнопка с красивой всплывающей формой на странице я её скрываю «дисплей ноне» и хотелось бы что бы эта же форма всплывала после отправки формы нажатием кнопки отправки в сонтакт форм 7

Использую «Modal» из визуала композера, отличная вещь только нуждается каждый раз в доработке 🙁

Сергей

Denis Creative

Действительно, статью перепишу.
Теперь нужно использовать скрипт:

vadim

куда вставить этот скрипт чтобы после заполнения формы отправлялся файл?

Denis Creative

Или в основной скрипт, который использует шаблон, или в футер.

Вячеслав

Здравствуйте! Подскажите пожалуйста, а как вставить окно из плагина Easy Modal? Вроде все варианты перепробовал, не выходит.

Владимир

Здравствуйте.
Подскажите пожалуйста, как для данного скрипта:

михаил

здравствуйте! Отличная статья! подскажите а как сделать так, чтобы после успешной отправки. сначало открывалось благодарственное попап-окно..а через 5 секунд, включалось перенаправление на главную страницу

Назар

Больше не актуально т.к. on_sent_ok убрали из contact form 7

Denis Creative

во второй половине статьи есть эта информация

Дмитрий

Добрый день! Подскажите пожалуйста как реализовать скачивание фаила пользователем, после заполнения всех полей формы и нажатием кнопки «Скачать».

Дмитрий

Использую следующий скрипт для одной из форм:

ID формы прописано, файл скачивается. Но данный скрипт работает для всех форм на сайте а нужно только для определенной по ID!
Подскажите пожалуйста, как исправить?

Denis Creative

Надеюсь, вы уже решили эту проблему.
Если нет, то ответ в том, что location нужно было поместить внутрь условия if()

Андрей

on_sent_ok пишет — устаревший вид ввода, пишите на джава скрипте, что только не пробовал написать не появляется всплывающее окно после отправки

Denis Creative

Во второй половине статьи есть эта информация, и в комментариях выше.

Denis Creative

Обновил статью, найдёте решение внизу статьи.

Mihail

Как сделать, чтобы перенаправление после отправки письма происходило с задержкой?

Denis Creative

Бобсон

А как? подскажите, что прописать в setTimeout и где его ставить?

Denis Creative

только поменяйте 34560 на id своей формы.

Здравствуйте, подскажите что дописать чтобы скачивание файла или страничка открывались в отдельной вкладке

Denis Creative

Владимир

Никак не могу разобраться. Форма работает, но вот сделать закрывающееся окно никак не получается. Вставлял код в functions.php — ругается на ошибки, сайт висит. Ставлю код в main.js — тишина, вообще ничего не происходит.

мой код закрывающегося окна после отправки сообщения:

Denis Creative

Попробуйте такой код — он должен открывать окно с благодарностью после отправки сообщения (этот код нужно добавить в main.js):

При этом код самого окна должен быть примерно таким (обязательно id=»popup_msg» ) — этот код нужно добавить в свой html, footer.php или, если через админку, то в какой-то виджет в футере:

Владимир

Спасибо за ответ. С кодом разобрался. Взял пример из вашей другой статьи на эту тему. Мне нужно было чтоб окно с формой закрывалось после успешной отправки, взял этот пример:

разместил его в functions.php всё работает, но окно закрывается очень быстро, не видно сообщения об успешной отправке. Хочу сделать чтоб оно закрывалось через 4 секунды, пытаюсь вставить setTimeout 4000 но не пойму куда. Да я не программист, мне код сложно осваивать, пытаюсь разобраться.

Denis Creative

Владимир

Спасибо огромное! Куда я только её не пихал, эту setTimeout. Оказалось, надо ещё в одну функцию завернуть.

KoolPal

I am using this within the CF7 form. My form shortcode is [contact-form-7 title=»Contact Form Flat»]

document.addEventListener( ‘wpcf7mailsent’, function( event ) <
var > if ( 8 ) <
$.magnificPopup.open( <
items: <
src: ‘#popup_msg’
>,
type: ‘inline’
>, 0);
>
>, false );

However, this form is not closing after submission. Please guide me.

Здравствуйте, Денис. Пытаюсь сделать ссылку на скачивание файла после заполнения всех полей и нажатия на кнопку скачать.
Форма находится на отдельной странице.https://kitkraken.by/kupon-sea/
В дополнительные настройки прописываю:

document.addEventListener( ‘wpcf7mailsent’, function( event ) <
location = ‘https://kitkraken.by/wp-content/themes/plattform/inc/img/big.jpg’;
>, false );

Ничего не происходит. Письмо отправляется, но ссылка на скачивание (или автоматическое скачивание) не показывается.
Подскажите в чем ошибка? Спасибо

Denis Creative

Возможно, вы исправили, но меня редиректнуло на картинку и лучше бы эта картинка открывалась в новой вкладке.

Да, спасибо, Денис. Исправил (скрипт прописал в футере). Картинку я так просто поместил. Будет ПДФ-файл.

Денис, добрый день
Что-то не хочет в другой вкладке открываться.
Пишу

Denis Creative

https://. — там впишите нужный урл

Да, отлично. Спасибо, Денис.

Denis Creative

Денис, опять к Вам. Новая задача возникла. Вместо открытия файла, должно быть сразу скачивание без открытия.
Прописал

Ничего не происходит

Denis Creative

По моему, файлы pdf не скачиваются, попробуйте использовать предыдущий код, но не pdf, а архив.

Вообще, странные вещи происходят. Хром начал блокировать всплывающие окна. ПДФ файл перестал даже открываться. При window.open архив тоже не помог. Заменил на location =
Вроде работает… посмотрим

Игорь

Добрый день! Прочитал статью, перепробовал различные варианты и ничего не получается. Вкратце о реализации контактной формы:
— сайт на wordpress
-контактная форма CF7, вызывается popup окном, которое создано плагином JetPopup
-на сайте установлен Google Tag Manager, через который есть возможность прослушивать успешную отправку формы.

Что не получается? Т.к. я уже упомянул ранее что контактная форма появляется в popup окне при клике на кнопку на сайте, то при успешной ее отправке хотелось бы чтобы popup окно с формой закрывалось и появлялось новое (уже подготовленное в плагине Jet Popup) popup окно с благодарностью.

Denis Creative

Добрый день, я не работал с плагином JetPopup.
Для плагина Easy FancyBox вот пример простого кода, чтобы после отправки формы, появлялся попап с сообщением «Успешно отправлено» (#popup-success) или «Подписка оформлена» (#popup-success-subscribe), если id формы 210 (если это форма подписки):

Принцип тот же, просто вызов попапа может быть другой.

По необходимости нужно скрыть уведомление об ошибках под формой, чтобы уведомление не отображалось при повторном вызове попапа с формой:

Или скрыть только уведомление об успешной отправке

Антон

Добрый день! Подскажите, пожалуйста, вариант вашего кода, чтобы был редирект в новое окно после отправки формы при условии, что был выбран нужный чек-бокс (если пользователь отметил при вводе формы «хочу забронировать», после отправки формы его перекидывает на бронирование).

Источник

Работа с формами

Как обрабатывать формы, валидировать их и отправлять без перезагрузки страницы с помощью JS

Время чтения: больше 15 мин

Обновлено 21 октября 2021

Кратко

Помимо стандартных средств работы с формами можно использовать JavaScript, чтобы проверять формы на валидность, получать доступ к значениям и отправлять информацию на сервер.

Трюки для работы с формами в JS проще всего показать на примере. В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. В этой форме мы немножко приправим стандартные HTML-атрибуты динамикой на JS.

Разметка и требования

Наша форма заявки на участие в миссии «Mars Once» будет состоять из шести полей. В форме мы собираем следующие данные:

В целом форма рабочая: обязательные поля не пропустят пустые значения, атрибут type проследит, чтобы вместо почты нам не прислали номер телефона, а по нажатию на кнопку валидная форма отправит все данные.

Но нам кроме всего этого хочется:

Отправка без перезагрузки

Первым делом настроим отправку формы без перезагрузки страницы.

Перезагрузка страницы — это поведение по умолчанию для отправки формы. Чтобы его предотвратить, нам нужно «перехватить» управление в момент отправки и сказать форме, что делать вместо этого.

Предотвращаем отправку данных

Чтобы «соединить» форму с нашей будущей собственной отправкой данных, мы напишем функцию, которая будет «слушать» событие отправки и реагировать на него.

Собираем данные из формы

Следующий шаг — собрать всё, что необходимо отправить.

Нам не хочется собирать каждое значение отдельно.

Вместо этого мы будем использовать возможности языка, чтобы достать все поля и элементы управления из формы. Напишем функцию serializeForm :

Аргумент функции serializeForm — это элемент формы. Именно элемент — не селектор, а конкретный узел в DOM-дереве.

Если сейчас мы вызовем эту функцию, передав туда нашу форму как аргумент, то в консоли появится список всех элементов:

Нам останется собрать имя и значение каждого из полей. Для начала, выведем имя и значение каждого элемента в консоль:

Мы получили список элементов, преобразовали его в массив и прошлись по каждому элементу. У каждого элемента получили поля name и value и вывели их в консоль.

В консоли после запуска получим вывод по каждому из полей:

Заметим, чтобы последняя строчка не имеет ни названия, ни значения. Это потому, что последний элемент, который мы проверяли — это кнопка.

На выходе в консоли получится массив из объектов с name и value :

Значения чекбоксов

Формат данных

FormData — это особый тип данных, который можно использовать для отправки данных формы на сервер.

Но так как тип FormData специально создан для работы с формами, можно сделать гораздо проще 🙂

Стоит отметить, что nasa-experience в таком случае попадёт в финальные данные, только если чекбокс отметили. Если его не отметить, то в финальных данных он не окажется.

Когда чекбокс nasa-experience выделен, получим такой вывод:

Когда чекбокс не выделен — такой:

Отправка на сервер

Теперь нам надо данные из формы отправить на сервер. Представим, что наш бэкенд предоставляет API-эндпоинт для сохранения данных. Попробуем отправить их.

Функция вернёт результат запроса к серверу, который мы сможем проверить на ошибки.

Теперь используем эту функцию в обработчике события отправки. Сериализуем форму и передадим её в функцию отправки. Вместо обращения напрямую к форме, будем читать её из объекта события. Форма в объекте события submit будет храниться в свойстве target :

Обработка загрузки и вывод сообщения о результате

Теперь немножко улучшим UX нашей формы. Сейчас она просто отправляет данные и ничего не сообщает пользователям. Это не круто, потому что отправителю будет непонятно, получилось ли записаться в «Mars Once» или нет.

Показываем лоадер во время отправки

У нас вместо лоадера будет просто показываться строка «Sending. »

Добавим его после кнопки и спрячем:

Вызовем эту функцию до отправки запроса, чтобы показать лоадер, и после запроса, чтобы скрыть. Лоадер будет виден до тех пор, пока запрос не завершится:

Обрабатываем успешную отправку

Давайте теперь проверять ответ сервера. Допустим, нам хочется, чтобы при успешной отправке мы показывали alert с сообщением об успешной отправке и прятали форму:

При успешной отправке покажется это сообщение, а форма пропадёт.

Обрабатываем ошибки

Если что-то пошло не так, то мы хотим сказать пользователям об этом. Напишем функцию, которая будет вызывать alert с сообщением, которое пришлёт сервер в случае ошибки:

Мы могли бы вызвать alert сразу на месте, но лучше вынести обработку ошибки в отдельную функцию. Так, если нам захочется добавить какие-то действия по обработке ошибок, нам будет проще ориентироваться в коде.

Если что-то пошло не так, мы увидим причину. Форма останется на месте.

Блокируем кнопку отправки на невалидной форме

Сейчас кнопку отправки можно нажать в любой момент, даже если форма невалидна. И хоть пользователь не сможет отправить форму из-за HTML-валидации, было бы неплохо предупредить, что кнопку нажимать пока рано.

Давайте будем её блокировать до тех пор, пока не будут заполнены все поля, которые требуется заполнить.

Напишем функцию, которая будет проверять валидность формы и блокировать кнопку, если требуется. Аргументом она будет принимать событие ввода с клавиатуры на полях ввода.

Теперь, пока форма не будет заполнена, кнопка будет заблокирована.

Что у нас получилось

Мы сделали форму, которая отправляет данные без перезагрузки страницы, показывает сообщение об ошибке или успешной отправке и блокирует кнопку, пока не введены значения.

Для всего этого мы использовали методы HTML-элементов и элементов форм, которые нам предоставляет браузер и веб-платформа.

Конечно, этим работа с формами не заканчивается. Ещё можно сделать валидацию каждого поля в отдельности, загрузку картинок с возможностью их редактирования, добавить всякие комбо-боксы и нестандартные элементы.

Но для первой формы, с которой мы работали в JS, этого достаточно 🙂

Источник

Contact Form 7 ★ Всплывающее уведомление об успешной оправке письма

Как в плагине Contact Form 7 сделать всплывающее уведомление об успешной оправке письма? Рассмотрим два бесплатных плагина “Popup for Contact Form 7” и “Popup Message Contact Form 7”.

При успешном заполнении и отправке формы обратной связи, которая создана с помощью плагина Contact Form 7 будет отображаться всплывающее окно с произвольным сообщением. При этом обычное сообщение об отправке, которое выводится под формой уже не будет отображаться.

Смотреть видео

Ссылки

Popup for Contact Form 7

Самый простой и быстрый способ реализации данной задачи, является использование плагина Popup for Contact Form 7.

Плагин Popup for Contact Form 7 является бесплатным и устанавливается как все плагины: Админка – Плагины – Добавить новый. В поле поиска вводим название “Popup for Contact Form 7” и после отображения плагина выполняем его установку и активацию.

После активации плагина переходим в его настройки: Contact Form 7 – Popup Settings.

Настройки плагина

Настройки плагина состоят из 3 вкладок с простыми параметрами.

General Settings (Общие настройки)

В списке форм обратной связи, которые мы создали раньше (если не создали, то тогда нужно сначала создать форму) отмечаем те формы, после отправки которых будет выводиться всплывающее окно. Можно выбрать одну форму, а можно выбрать несколько или все.

Указываем размеры окна. Не забываем указывать размеры с единицами измерения (px, %).

Указываем продолжительность отображения окна. Например, 5000 – это 5 сек., после которых окно автоматически закроется.

Popup Text (Текст)

Указываем текст и изображение для нашего окна.

Popup Design (Внешний вид окна)

Указываем цвет текста, фоновый цвет или фоновое изображение для окна.

Не забываем сохранять изменения.

Примечание: Эти плагины не работают с плагином By one click WooCommerce.

Источник

Отправка данных формы

Куда отправляются данные?

Здесь мы обсудим, что происходит с данными при отправке формы.

О клиентской/серверной архитектуре

WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.

Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».

На стороне клиента: определение способа отправки данных

Атрибут action

Этот атрибут определяет, куда отправляются данные. Его значение должно быть действительным URL. Если этот атрибут не указан, данные будут отправлены на URL-адрес страницы, содержащей форму.

В этом примере данные отправляются на абсолютный URL — http://foo.com :

Если атрибуты не указаны, как показано ниже, данные из формы отправляются на ту же страницу, на которой размещается данная форма:

Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут action был обязательным. Это больше не нужно.

Атрибут method

Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.

Метод GET

Рассмотрим следующую форму:

HTTP-запрос имеет следующий вид:

Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).

Метод POST

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

Примечание: вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).

Просмотр HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

Затем вы можете получить данные формы, как показано на рисунке ниже.

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

На стороне сервера: получение данных

Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.

Пример: Чистый PHP

Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

Пример: Python

Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется Flask framework для визуализации шаблонов, поддерживающих форму отправки данных (смотри python-example.py).

Два шаблона из коде выше взаимодействуют так:

Другие языки и фреймворки

Примечание: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом.

Особый случай: отправка файлов

Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.

Атрибут enctype

Если хотите отправить файл, нужно сделать следующие три шага:

Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.

Проблемы безопасности

Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.

В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:

XSS «Межсайтовый скриптинг» и CSRF «Подделка межсайтовых запросов»

Межсайтовый скриптинг (XSS «Cross Site Request Forgery») позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF «Cross-Site Scripting») может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.

Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный «фильтр», который удаляет элементы HTML

Источник