<html>
<head>
<title>Contact Form</title>
</head>
<body>
<section class="contact" id="contact-section">
    <h2 class="heading">Contact<span class="highlight"> me</span></h2>
    <p class="sub-heading">Lets connect. </p>
    <div class="seperator"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/f/xxxx" method="post">
<input name="_gotcha" style="display: none" type="text">
<div class="contact-form">Name<input name="name" placeholder=" Name" id="name" required type="text">
</div>
<div class="contact-form">Topic<input name="topic" placeholder="topic" id="topic" required type="text">
</div>
    <div class ="contact-form">E-mail
    <input name="E-Mail Address" required placeholder="email" />
</div>
<textarea class="message" placeholder="message" required></textarea>
    <br/>
    <button class="btn contact-btn" type="submit">contact me</button>
    <input type="hidden" name="referrer" id="referrer_field" />

    <input type="hidden" name="body" />

</section>
</body>
</html>
.contact-form{
    width: 100%;
    margin-top: 20px;
    position: relative;
}

.contact-form input, .message{
    width: 100%;
    display:block;
    height: 50px;
    margin:5px 0;
    padding: 10px;
    background: #000;
    color: #fff;
    outline: none;
    resize: none;
}

.message{
    margin:30px 0;
    height: 200px;
}

.contact-form .name{
    display: flex;
    justify-content: space-between;
}

.name input{
    width: 49%;
    margin: 0;
}

.contact-form .btn{
    display: block;
    margin: auto;
    cursor: pointer;
}


$('form').submit(function () {

    // Get the Login Name value and trim it
    var fname = $.trim($('#fname').val());
    var lname = $.trim($('#lname').val());
    var email =$.trim($('#email').val());

    // Check if empty of not
    if (fname === '') {
        alert('First name is empty.');
        return false;
    }
    else if (lname === '') {
        alert('Last Name is empty.');
        return false;
    }
    else if (email === '') {
        alert('email is empty.');
        return false;
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.