<!-- THE CODEPEN SNIPPET BELOW CONTAINS A FORM BUILT WITH SUPER EASY FORMS -->
<html lang="en">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="A serverless contact form for your website in less than a minute." content="">
    <meta name="Torus" content="">
    <title>Super Easy From</title>
		<!-- Bootstrap core CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
    <body class="p-5 bg-light">
      <!-- CONTACT SECTION -->
      <section class="bg-white py-4">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <h4 class="h2 pb-2">Contact Us</h4>
              <!-- FORM BY SUPER EASY FORMS -->
              <form id="super-easy-form" alt="Form by Super Easy Forms" class="pb-3" action="#">
                <label for="first_name" class="small mb-0">first name</label>
                <input type="text" class="form-control" id="first_name" name="first_name" placeholder="first name" required>
                <label for="last_name" class="small mb-0">last name</label>
                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="last name" required>
                <label for="email" class="small mb-0">email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="email" required>
                <label for="phone_number" class="small mb-0">phone number</label>
                <input type="number" class="form-control" id="phone_number" name="phone_number" placeholder="phone number" required>
                <label for="message" class="small mb-0">message</label>
                <textarea type="text" class="form-control" id="message" name="message" placeholder="message" required></textarea>
                <h5 id="contact-status" class="text-secondary" style="display:none;">Thanks for Contacting Us</h5>
                <button class="btn btn-primary mt-3" type="submit" id="super-easy-btn">Send</button>
              </form>
              <small>made with <a href="http://supereasyforms.com">super easy forms</a> <small> <!-- it's bad etiquette to use free stuff without giving some cred to the creators :) -->
             </div>   
           </div>
        </div>         
      </section>

      <!--Javascript-->
      <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
      </script>

   </body>
</html>
 
/* Write your custom CSS here */
$(function(){
  $('#super-easy-form').submit(function(e){
    e.preventDefault();
    var formdata = toJSONString(this);
    console.log(formdata);
    $.ajax({
      type: "POST",
      url: "https://warlx5icu6.execute-api.us-east-1.amazonaws.com/deployment2019-05-22T07-53-19-000Z/",
      dataType: "json",
      contentType: "application/json",
      data: JSON.stringify( { "id": "","first_name": $('#first_name').val(),"last_name": $('#last_name').val(),"email": $('#email').val(),"phone_number": $('#phone_number').val(),"message": $('#message').val() } ),
      beforeSend: function(data) {
        $('#super-easy-btn').prop('disabled', true);
        $('#super-easy-form :input').prop('disabled', true);
        $('#contact-status').html('Sending...').show();
      },
      success: function(data) {
        console.log(data);
        $('#contact-status').text("We'll get back to you soon").show();
        $('#super-easy-form :input').removeProp('disabled');
        $('#super-easy-btn').removeProp('disabled');
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#contact-status').text('Error. Please try again soon.').show();
        $('#super-easy-form :input').removeProp('disabled');
        $('#super-easy-btn').removeProp('disabled');
      }
    });
  }); 
				
  function toJSONString (form) {
    var obj = {};
    var elements = form.querySelectorAll("input, select, textarea");
    for(var i = 0; i < elements.length; ++i) {
      var element = elements[i];
      var name = element.name;
      var value = element.value;
      if(name) {
        obj[name] = value;
      }
    }
    return JSON.stringify(obj);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.