<!DOCTYPE html>
<html>
  <body>

     <div class="col-md-6 offset-md-3 mt-5">
        <a target="_blank" href="https://getform.io?ref=codepenHTML">
          <img src='https://getform.io/_nuxt/img/095d0b3.svg'>
        </a>
        <br>
        <a target="_blank" href="https://getform.io?ref=codepenHTML" class="mt-3 d-flex">Getform.io | Get your free endpoint now</a>
        <h1>Simple Contact Form</h1>
        <form accept-charset="UTF-8" action="https://getform.io/f/{your-form-endpoint-goes-here}" method="POST" target="_blank">
          <div class="form-group">
            <label for="exampleInputName">Full Name</label>
            <input type="text" name="fullname" class="form-control" id="exampleInputName" placeholder="Enter your name and surname" required="required">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1" required="required">Email address</label>
            <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your email address">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Your Message</label>
            <textarea class="form-control" rows="5" name="message" id="message" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum porta venenatis. Morbi ultricies molestie felis. Maecenas auctor orci tincidunt lectus bibendum rutrum. Integer feugiat aliquet metus, et bibendum sem ornare et. Curabitur est arcu, vehicula eget orci eu, scelerisque volutpat sapien. Curabitur eget urna vel ligula dictum mattis eu vel urna. Donec quis volutpat augue, a scelerisque diam. Nulla facilisi. Aliquam facilisis ornare ligula, ut ultrices quam malesuada id." required=""></textarea>
          </div>          
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
  </body>
</html>
h1 {
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 24px;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.