Bootstrap Contact form

<div class="section-header">
            <div class="text-center">
                <h2>Contact-form Me</h2>

                <p>Please fill the form below. I will contact-form you as soon as possible.</p>
            </div>
        </div>
        <div class="container">
            <div id="form-messages"></div>
            <div class="form-wrap">
                <form id="contact-form-form" action="api/contact-form.php" method="post" autocomplete="off">
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <input class="form-control" type="text" placeholder="Your Name" name="name" id="name" required="">
                            <input class="form-control" type="text" placeholder="E-mail" name="email" id="email" required="">
                            <input class="form-control" type="text" placeholder="Subject" name="subject" id="subject" required="">
                        </div>
                        <div class="col-12 col-sm-6">
                            <textarea class="form-control" placeholder="Your Message" rows="7" name="message" id="message" required=""></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button class="btn btn-primary" type="submit">SEND MESSAGE</button>
                        </div>
                    </div>
                </form>
                <div id="ajaxLoad"></div>
            </div>
        </div>
    </section>

 body { font-family: 'Roboto', sans-serif; }
* { margin: 0; padding: 0;}
            #contact-form {
    background: #333;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 2rem;
    border-bottom: 4px dashed #fff;
}


#contact-form-form {
    position: relative;
}

#contact-form button {
    margin-top: 1rem;
}

}

#contact-form p {
    color: #fff;
    letter-spacing: 0.5px;
}

#contact-form .contact-form-form {
    padding: 0 0 30px 0;
}

#contact-form .section-header {
    padding-bottom: 0;
}

#contact-form .form-control::-webkit-input-placeholder {
    color: #c0c0c0;
    font-weight: 200;
}

#contact-form .form-control:-moz-placeholder {
    color: #c0c0c0;
    font-weight: 200;
}

#contact-form .form-control::-moz-placeholder {
    color: #c0c0c0;
    font-weight: 200;
}

#contact-form .form-control:-ms-input-placeholder {
    color: #c0c0c0;
    font-weight: 200;
}

#contact-form .section-header p {
    color: #f0f0f0;
    letter-spacing: 0.5px;
}

#contact-form input, #contact-form textarea {
    margin: 26px 0;
    border-radius: 0;
}
#contact-form input, #contact-form textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: none;
    outline: none;
    resize: none;
    border: 0;
    transition: all .3s;
  border: 2px solid #333;
    border-bottom: 2px solid #bbb;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
.h1, .h2, .h3, h1, h2, h3 {
     margin-top: 0px; 
    margin-bottom: 10px;
    padding-top: 40px;
}
#contact-form input:focus, #contact-form textarea:focus {
    border: 2px solid #fff;
}

#contact-form textarea {
    height: 184px;
}