Skip to content

Instantly share code, notes, and snippets.

@adafycheng

adafycheng/contact_form.html

Created December 11, 2021 23:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adafycheng/d0f17a2f2d22f83d05702ec1c1b5f5e0 to your computer and use it in GitHub Desktop.
Save adafycheng/d0f17a2f2d22f83d05702ec1c1b5f5e0 to your computer and use it in GitHub Desktop.
Download ZIP
Contact form
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment