<title>Contact Form</title>
<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 class="contact-form">Topic<input name="topic" placeholder="topic" id="topic" required type="text">
    <div class ="contact-form">E-mail
    <input name="E-Mail Address" required placeholder="email" />
<textarea class="message" placeholder="message" required></textarea>
    <button class="btn contact-btn" type="submit">contact me</button>
    <input type="hidden" name="referrer" id="referrer_field" />

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

    width: 100%;
    margin-top: 20px;
    position: relative;

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

    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.