JSFiddle - React, Tailwind, and code Playground
HTML
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<button id="sendMessage">Send</button>
</div>
JavaScript
var message = "";
$("#sendMessage").on("click", function() {
message = $("#contactform").serialize();
$.ajax({
url: "//formspree.io/dynamicrealities@gmail.com",
method: "POST",
data: {message: message},
dataType: "json"
});
alert('Thanks for the email, we\'ll be in touch promptly.');
return false;
});