עיצוב הודעות השגיאה בטפסי אלמנטור

<script>
        (function () {
            let forms = document.querySelectorAll( '.elementor-form' );

            forms.forEach(function (form) {

                let inputs = form.querySelectorAll('.elementor-field');
                let submit = form.querySelector('button[type="submit"]');

                inputs.forEach(function(input) {
                    input.addEventListener('invalid', function(e) {
                        e.preventDefault();

                        let errorEl = document.createElement('div');
                        errorEl.classList.add('error');
                        errorEl.style.color = 'red';
                        errorEl.innerHTML = this.validationMessage;

                        this.parentElement.parentNode.insertBefore(errorEl, this.parentElement.nextSibling);
                    });
                });

                submit.addEventListener('click', function (e) {
                    removeErrors(form);
                });

                function removeErrors(form) {
                    form.querySelectorAll('.error').forEach(function (error) {
                        error.remove();
                    });
                }
            });
        })(jQuery);
    </script>

div.error{
    font-size: 12px!important;
    color:#fff!important;
    background: red;
    padding: 0px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
}
div.error{
    font-size: 12px!important;
    color:#fff!important;
    background: red;
    padding: 0px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
}