Как привязать js всплывающее окно к форме?

Question

Суть такова. Есть html страница в конце которой находится форма. После заполнения формы и ее отправки, должно появляться сообщение о том что заявка принята и тд. Однако на деле появляется предусмотренная туманность, а само сообщение показывается наверху страницы. Как это исправить и показывать сообщение внизу посреди этой туманности?

Код формы:

<section class="block">
        <h2>НУЖНА КОНСУЛЬТАЦИЯ СПЕЦИАЛИСТА? ОСТАВЬТЕ ЗАЯВКУ И МЫ ВАМ ПЕРЕЗВОНИМ</h2>

        <div class="container">
            <div class="contacts">
                <div class="contacts__forms">

                    <div class="contacts__massage">
                        <p class="contacts__info">
                            Ваша заявка принята!
                        </p>
                        <p class="contacts__info-text">
                            В ближайшее время мы с Вами свяжемся!
                        </p>
                    </div>

                    <form id="contacts__form">
                        <div class="contacts__form-content">
                            <label class="contacts__form-label">Ваше имя*</label>
                            <input class="contacts__form-input" name="name" type="name" required placeholder="Евгений">
                        </div>
                        <div class="contacts__form-content">
                            <label class="contacts__form-label">Контактный номер*</label>
                            <input class="contacts__form-input" name="phone" type="tel" required placeholder="+7 (999) 999-99-99">
                        </div>
                        <div class="contacts__form-content">
                            <label class="contacts__form-label">Описание</label>
                            <textarea class="contacts__form-input" name="massage" type="text" placeholder="Введите комментарий"></textarea>
                        </div>
                        <div class="contacts__btn-box">
                            <button class="contacts__btn" type="submit">Отправить</button>
                        </div>
                    </form>
                
                </div>
            </div>
        </div>
    </section>

Код js:

$(function() {

/* Отправка заявки */
$("#contacts__form").submit(function() {
    $.ajax({
        type: "POST",
        url: "php/post.php",
        data: $(this).serialize()
    }).done(function() { //Если все хорошо, показываем сообщение об отправки и очищаем поля
        $(".contacts__massage").addClass("active").css('display', 'flex').hide().fadeIn(); 
        setTimeout(function(){ 
            jQuery("#contacts__form").trigger("reset"); 
            $(".contacts__massage").removeClass('active').fadeOut(); 
        }, 3000); 
    });
    return false;
});


/*Маска для инпута*/
var telInp = $('input[type="tel"]');
telInp.each(function(){
    $(this).mask("+7 (999) 999-99-99");
});

});

Форма после нажатия на "Отправить":

Сообщение после нажатия "Отправить":

БЛОГ НА HUSL

Как привязать js всплывающее окно к форме?

Ответы (0 шт):