JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hidden" id="overlay"></div>
<div class="hidden" id="loader-popup">
    <img src="/pub/images/spinner.gif" alt="Loading.. Please Wait" />
</div>

<div class="container static-content">
    <div class="row">
        <div class="col">
            <h1>Contact Us</h1>
            <p>
                Please use the form below to contact us via email and a member of the team will respond to your enquiry
                shortly.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <form id="contact-form" method="post" action="/pages/contact-us/action/send.php">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" name="name" id="name" required>
                </div>

                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" id="email" required>
                </div>

                <div class="form-group">
                    <label for="tel">Telephone</label>
                    <input type="tel" class="form-control" name="tel" id="tel" maxlength="13">
                </div>

                <div class="form-group">
                    <label for="msg">Message</label>
                    <textarea name="msg" class="form-control" id="msg" required></textarea>
                </div>

                <button type="submit" class="btn btn-primary" id="submit-contact">
                    <span>Submit</span>
                </button>

                <input type="checkbox"
                       name="contact_by_email_only"
                       value="1"
                       style="display: none !important;"
                       tabindex="-1"
                       autocomplete="off" />
            </form>
        </div>
    </div>
</div>

CSS

.hidden {
    display: none
}

#overlay {
    background: #000;
    bottom: 0;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999999
}

#loader-popup {
    position: relative;
    text-align: center;
    top: 50%;
    z-index: 9999999
}

JavaScript

$('#contact-form').submit(function(e)
    {
        e.preventDefault();

        let overlay = $('#overlay'),
            loader = $('#loader-popup');

        console.log(overlay);
        console.log(loader);

        console.log('===================');

        //show overlay
        overlay.removeClass('hidden');
        loader.removeClass('hidden');

        console.log(overlay);
        console.log(loader);

        //hide overlay
        overlay.addClass('hidden');
        loader.addClass('hidden');
    });