<form name="contact-form" id="contact-me-form" method="POST">
                    <div class="med-col form-element">
                        <label for="uname">Name</label><br>
                        <input type="text" class="form-input" name="uname" id="uname" required>
                    </div>

                    <div class="med-col form-element">
                        <label for="email">Email</label><br>
                        <input type="email" class="form-input" name="email" id="email" required>
                    </div>

                    <div class="lg-col form-element">
                        <label for="msg">Message</label><br>
                        <textarea name="msg" id="msg" class="comment-box" required></textarea>
                    </div>
                    <div class="med-col form-element">
                        <button class="contact-submit-button button button-black"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send message</button>
                    </div>
                    <div class="space30"></div>
                </form>

<?php
    $username = $_POST['uname'];
    $email = $_POST['email'];
    $message = $_POST['msg'];

    $servername = "localhost";
    $username = "user";
    $password = "#userpass#";
    $dbname = "sample";
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }

    $sql = "INSERT INTO contactdb (username, email, message) VALUES ($username,$email,$message)";

    if (mysqli_query($conn, $sql)) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }

    mysqli_close($conn);
?>

var form = $("#contact-me-form")
    var formdata = form.serialize()
    $('.contact-submit-button').click(function(){
        $.ajax({
          type: "POST",
          url: "contact-me.php",
          data: formdata,
          success: function(data) {
            alert("submitted successfully");
          }
        });
        event.preventDefault();
    })