Alternative for a Functional Contact Form in Static Websites

[Support]

A good alternative to have a functional contact form is static websites (no server-side support – PHP, .Net, etc…) is to use Formspree – https://www.formspree.io/

Here’s an example:

HTML:

<form id="contactFormFormspree" action="https://formspree.io/[email protected]" method="POST">

	<input type="hidden" name="_subject" value="Contact Form" />
	<input type="hidden" name="_next" value="http://www.yourwebsite.com/thank-you.html" />
	
	<div class="row">
		<div class="form-group">
			<div class="col-md-6">
				<label>Your name *</label>
				<input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
			</div>
			<div class="col-md-6">
				<label>Your email address *</label>
				<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group">
			<div class="col-md-12">
				<label>Subject</label>
				<input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control" name="subject" id="subject" required>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group">
			<div class="col-md-12">
				<label>Message *</label>
				<textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message" required></textarea>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<input type="text" name="_gotcha" style="display:none" />
			<input type="submit" value="Send Message" class="btn btn-primary btn-lg mb-xlg" data-loading-text="Loading...">
		</div>
	</div>
</form>

JS:
(js/custom.js)

(function($) {

	'use strict';

	$('#contactFormFormspree').validate();

}).apply(this, [jQuery]);

More Information:
https://www.formspree.io/

---

[Author]

Posts