query & html submit form

I have the following javascript codes to call API MVC .net
The only problem is the 1st time click on submit-contact button does not work.
I think it is because the codes (e.preventDefault();)

My question is what I need to change to make the 1st submit button click working?

*** I do want to keep submit method because we have many web page using this style ****

<div class="container margin_60_35">
    <div class="row justify-content-center">
        <div class="col-xl-5 col-lg-6 pr-xl-5" id="formdiv">
            <div class="main_title_3">
                <span></span>
                <h2>Send us a message</h2>
                <p>Please enter the following information</p>
            </div>
            <div id="message-contact"></div>
            <form 
                  method="post"  
                  id="contactform" 
                  autocomplete="off" 
                  onsubmit="SubmitContact(); return false;"
             >
                <input type="hidden" id="web_page" name="web_page" value="@System.Configuration.ConfigurationManager.AppSettings["companyDomain"]/Home/contact" />
                <div class="form-group">
                    <label>Name</label>
                    <input class="form-control" type="text" id="first_name" name="first_name" required>
                </div>
                <div class="form-group">
                    <label>Last name</label>
                    <input class="form-control" type="text" id="last_name" name="last_name" required>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="email" id="email_address" name="email_address" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Telephone</label>
                            <input class="form-control" type="text" id="phone_number" name="phone_number" required>
                        </div>
                    </div>
                </div>
                <!-- /row -->
                <input type="hidden" value="none" id="webpage_name" name="webpage_name" />
                <div class="form-group">
                    <label>Message</label>
                    <textarea class="form-control" id="message_contact" name="message_infor" style="height:120px;"></textarea>
                </div>
                <p class="add_top_30"><input type="submit" value="Submit" class="btn_1" id="submit-contact"></p>
            </form>
        </div>
        <div class="col-xl-5 col-lg-6 pl-xl-5">
            <div class="box_contacts">
                <i class="ti-support"></i>
                <h2>Need Help?</h2>
                <a target="_blank" href="tel:@System.Configuration.ConfigurationManager.AppSettings["WebsitePhoneNo"]">@System.Configuration.ConfigurationManager.AppSettings["WebsitePhoneNo"]</a> - <a target="_blank" href="mailto:@System.Configuration.ConfigurationManager.AppSettings["WebsiteEmail"]">@System.Configuration.ConfigurationManager.AppSettings["WebsiteEmail"]</a>
            </div>
            <div class="box_contacts">
                <i class="ti-help-alt"></i>
                <h2>Questions?</h2>
                <a target="_blank" href="tel:@System.Configuration.ConfigurationManager.AppSettings["WebsitePhoneNo"]">@System.Configuration.ConfigurationManager.AppSettings["WebsitePhoneNo"]</a> - <a target="_blank" href="mailto:@System.Configuration.ConfigurationManager.AppSettings["WebsiteEmail"]">@System.Configuration.ConfigurationManager.AppSettings["WebsiteEmail"]</a>
            </div>
            <div class="box_contacts">
                <i class="ti-home"></i>
                <h2>Office Address</h2>
                <a href="#0">
                    @System.Configuration.ConfigurationManager.AppSettings["WebsiteAddress"]
                    <br />
                    @System.Configuration.ConfigurationManager.AppSettings["WebsiteCity"],
                    @System.Configuration.ConfigurationManager.AppSettings["WebsiteState"]
                    @System.Configuration.ConfigurationManager.AppSettings["WebsiteZip"]
                </a>
            </div>
        </div>
    </div>
</div>
<!-- /container -->
<script>     
    function SubmitContact()
    {
        $('#contactform').submit(function (e)
        {
            var apiurl = '@System.Configuration.ConfigurationManager.AppSettings["companyDomain"]' + "/Api/ReceiveJson";
            var stagecompleted = '@System.Configuration.ConfigurationManager.AppSettings["StageCompletedLabel"]';
            var successmsg = "Thank You. We will contact you soon.";
            var emailsubject = "Contact Us Request";
            var emailaddress = document.getElementById("email_address").value;
            e.preventDefault();
            SubmitAPI(apiurl, stagecompleted, successmsg, emailsubject, emailaddress);
        }
        );
    } 
        document.getElementById('phone_number').addEventListener('input', function (e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
        e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
    });
</script>

<script>
function SubmitAPI(apiurl_value, stagecompleted_value, successmsg_value, emailsubject_value, emailaddress_value) {
    var x = $('#formdiv *').serializeArray();
    var data = {};
    var apiurl = apiurl_value;
    var stagecompleted = stagecompleted_value;
    var successmsg = successmsg_value;
    var emailsubject = emailsubject_value;
    $.each(x, function (i, field) {
        data[field.name] = field.value;
    });
    var jsondata = JSON.stringify(data);
    $.ajax({
        url: apiurl,
        type: "POST",
        data: { 'message': jsondata.replace(/\"/g, "'"), 'email': emailaddress_value, 'emailsubject': emailsubject },
        dataType: 'json',
        success: function (data) {
            if (data.stage == stagecompleted) {
                alert(successmsg);
                document.location.reload();
            }
        },
        error: function (msg) { alert(msg); }
    });
    return false;
}
</script>

Select allOpen in new window