Prevent PHP form from redirecting on success and show HTML message

Question

I have a PHP form that redirects to a "thank you" page on success. I would like for it to stop the redirect and show an HTML message instead. The html message should replace all of the form's html.

This is some of the PHP code for the form:

function maybe_submit() {

        // validate input
        $this->validate();

        // check validation errors
        if(!empty($this->errors)) {
            // set errors session
            $_SESSION['mk-validation-errors'] = $this->errors;

            // return early
            return;
        }

        // check if it's spam or nonce incorrect

        if($this->is_spam || $this->nonce_fail) {
            // return early
            return;
        }

        // get attributes
        if(!empty($_POST['mk-atts'])) {
            $this->atts = json_decode($this->decrypt($_POST['mk-atts'], $this->encryption_key), true);
        }

        // fill recipient with admin email if no email provided
        $this->to = !empty($this->atts['to'])?$this->atts['to']:get_option('admin_email');

        // fill from email with att if provided
        $this->from = !empty($this->atts['from'])?$this->atts['from']:'no-reply@'.ltrim($_SERVER['HTTP_HOST'], 'www.');

        // fill subject with default message
        $this->subject = !empty($this->atts['subject'])?$this->atts['subject']:'Message from '.get_option('blogname');

        // fill success url
        $this->success = !empty($this->atts['success'])?$this->atts['success']:false;
        if(!empty($this->atts['success'])) {
            $this->success = $this->atts['success'];
        } else {
            if(wp_get_referer()) {
                $this->success = wp_get_referer();
            } else {
                $this->success = get_home_url();
            }
        }

        // send email
        $this->send_email();

        // redirect to success page
        wp_safe_redirect($this->success);

        exit();

    }

    function send_email() {

        // generate content
        $content = "From: ".$_POST['mk-name']."\r\nEmail: ".$_POST['mk-email']."\r\nCompany: ".$_POST['mk-company'];

        $content .= "\r\n\r\n".$_POST['mk-message'];

        // generate headers
        $headers = 'From: '.$_POST['mk-name'].' <'.$this->from.'>'."\r\nReply-To: " . $_POST['mk-email']."\r\n";

        if(!empty($this->atts['cc'])) {
            $headers .= 'Cc: '.$this->atts['cc']."\r\n";
        }
        if(!empty($this->atts['bcc'])) {
            $headers .= 'Bcc: '.$this->atts['bcc']."\r\n";
        }

        // send email
        wp_mail($this->to, $this->subject, $content, $headers);

    }



    function contact_form_shortcode($atts, $content = null) {

        $html = '<div class="mkcf-wrapper">';

        // check for validation errors
        if(!empty($_SESSION['mk-validation-errors'])) {
            $html .= '<div class="alert-box error">';
            $html .= implode('<br />', $_SESSION['mk-validation-errors']);
            $html .= '</div>';
            // unset validation errors
            unset($_SESSION['mk-validation-errors']);
        }

        $html .= '<form method="post" id="mk-contact-form">';
        // name field
        $html .= '<div class="input-wrap"><div class="input">';
        $html .= '<label for="mk-name">Name</label>';
        $html .= '<input type="text" class="input-text" id="mk-name" name="mk-name" value="" placeholder="Type name here" required/>';
        $html .= '</div>';

        // company field
        $html .= '<div class="input">';
        $html .= '<label for="mk-company">Company</label>';
        $html .= '<input type="text" class="input-text" id="mk-company" name="mk-company" value="" placeholder="Company"/>';
        $html .= '</div></div>';

        // email field
        $html .= '<div class="input">';
        $html .= '<label for="mk-email">Email Address</label>';
        $html .= '<input type="email" class="input-text" id="mk-email" name="mk-email" value="" placeholder="Email Address" required/>';
        $html .= '</div>';

        // spam bait field
        $html .= '<div class="input" style="display:none;">';
        $html .= '<label for="mk-url">URL</label>';
        $html .= '<input type="text" class="input-text" id="mk-url" name="url" value="" />';
        $html .= '</div>';

        // message field
        $html .= '<div class="input">';
        $html .= '<label for="mk-message">Message</label>';
        $html .= '<textarea name="mk-message" rows="5" id="mk-message" class="input-text" placeholder="Message" required></textarea>';
        $html .= '</div>';

        // submit
        $html .= '<div class="input right">';
        $html .= '<input type="hidden" value="'.$this->encrypt(json_encode($atts), $this->encryption_key).'" name="mk-atts" />';
        $html .= '<input type="hidden" name="security" value="'.wp_create_nonce($this->nonce).'" />';
        $html .= '<input type="submit" value="Submit" name="mk-contact" class="button" />';
        $html .= '</div>';
        $html .= '</form>';
        $html .= '</div>';

        return $html;
    }

I don't mind using Javascript either, I have tried with:

$('#mk-contact-form').submit(function() {
    $('.contact__form__wrap').html("<p>Thank you for getting in touch! We will get back to you shortly.</p>");
    return false;
 });

But I get the message before the form is submitted. If I add a setTimeOut the form is submitted, I get the message and then I'm redirected to a blank page.