<?php /** @var \Magento\Newsletter\Block\Subscribe $block */ ?> <div class="block newsletter"><div class="content"><form class="form subscribe" novalidate method="post" id="newsletter-validate-detail" action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>" data-mage-init='{"validation": {"errorClass": "mage-error"}}' ><div class="field newsletter"><div class="control"><label for="newsletter"><input name="email" type="email" id="newsletter" placeholder="<?= $block->escapeHtml(__('Insert your e-mail address')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required: true, 'validate-email': true}" /></label></div><div class="form-message"><div class="messages"></div></div></div><div class="actions"><button class="action subscribe primary" type="submit" aria-label="Subscribe" title="<?= $block->escapeHtmlAttr(__('Subscribe')) ?>" ><span class="button-text"><?= $block->escapeHtml(__('Subscribe')) ?></span></button></div></form></div></div><script>
    require(['jquery'], function ($) {
        var form = $('#newsletter-validate-detail');
        form.submit(function(e) {
            if (form.validation('isValid')) {
                var emailInput = $("#newsletter-validate-detail #newsletter");
                var email = $(emailInput).val();
                var messageBox = $('#newsletter-validate-detail .form-message > .messages');
                var url = form.attr('action');
                e.preventDefault();
                
                try {
                    $.ajax({
                        url: url,
                        dataType: 'json',
                        type: 'POST',
                        showLoader: true,
                        data: {
                            email: email
                        },
                        success: function (data) {
                            messageBox.show();
                            if (data.status != "ERROR") {
                                $(emailInput).val('');
                                $(messageBox).html('<div class="message success"><div>' + data.msg + '</div></div>');
                            } else {
                                $(messageBox).html('<div class="message error"><div>' + data.msg + '</div></div>');;
                            }
                            setTimeout(function() {
                                $(messageBox).hide('blind', {}, 500)
                            }, 6000);
                        },
                    });
                } catch (e){
                    $(messageBox).html(e.message);
                }
            }
        });
    })</script>