adafycheng/contact_form.html

## contact_form.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <style>
      body {
        background-color: #000;
        color: #fff;
      }
      .btn {
        background-color: rgb(219, 33, 148);
        color: #fff;
        width: auto;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script>
      $(document).ready(function(){
        $("form").submit(function (event) {
          var formData= $(this).serialize();

          $.ajax({
            type: "POST",
            url: "http://localhost:8080/contact",
            data: formData,
            dataType: "json",
            encode: true,
          }).done(function (data) {
            console.log(data);
            alert("Thank you for contacting.  Your request has been received.");
          });

          event.preventDefault();
        });
      });
    </script>
  </head>
  <body>
    <form>
      <fieldset>
        <div class="row p-3 justify-content-left">
            <div class="col-md-3">
                <label for="contactName">Name:</label>
            </div>
            <div class="col-md-9"><input type="text" id="contactName" name="contactName" /></div>
        </div>
        <div class="row p-3">
            <div class="col-md-3">
                <label for="contactEmail">Email:</label>
            </div>
            <div class="col-md-9">
                <input type="email" id="contactEmail" name="contactEmail" />
            </div>
        </div>
        <div class="row p-3">
            <div class="col-md-3">
                <label for="contactMsg">Message:</label>
            </div>
            <div class="col-md-9">
                <textarea rows="5" id="contactMsg" name="contactMsg"></textarea>
            </div>
        </div>
        <div class="row p-3">
            <div class="col-md-3">&nbsp;</div>
            <div class="col-md-9">
                <input class="btn" type="submit" id="btnSubmit" value="Send Email" />
            </div>
        </div>
      </fieldset>
    </form>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<style>
	body {
	background-color: #000;
	color: #fff;
	}
	.btn {
	background-color: rgb(219, 33, 148);
	color: #fff;
	width: auto;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
	<script>
	$(document).ready(function(){
	$("form").submit(function (event) {
	var formData= $(this).serialize();

	$.ajax({
	type: "POST",
	url: "http://localhost:8080/contact",
	data: formData,
	dataType: "json",
	encode: true,
	}).done(function (data) {
	console.log(data);
	alert("Thank you for contacting. Your request has been received.");
	});

	event.preventDefault();
	});
	});
	</script>
	</head>
	<body>
	<form>
	<fieldset>
	<div class="row p-3 justify-content-left">
	<div class="col-md-3">
	<label for="contactName">Name:</label>
	</div>
	<div class="col-md-9"><input type="text" id="contactName" name="contactName" /></div>
	</div>
	<div class="row p-3">
	<div class="col-md-3">
	<label for="contactEmail">Email:</label>
	</div>
	<div class="col-md-9">
	<input type="email" id="contactEmail" name="contactEmail" />
	</div>
	</div>
	<div class="row p-3">
	<div class="col-md-3">
	<label for="contactMsg">Message:</label>
	</div>
	<div class="col-md-9">
	<textarea rows="5" id="contactMsg" name="contactMsg"></textarea>
	</div>
	</div>
	<div class="row p-3">
	<div class="col-md-3"> </div>
	<div class="col-md-9">
	<input class="btn" type="submit" id="btnSubmit" value="Send Email" />
	</div>
	</div>
	</fieldset>
	</form>
	</body>
	</html>