Home Forums Porto Template FAQ’s Alternative for a Functional Contact Form in Static Websites

This topic contains 0 replies, has 1 voice, and was last updated by  Support 2 years, 5 months ago. This post has been viewed 6528 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #10015919

    Support
    Keymaster

    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/you@yourdomain.com" 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/


Viewing 1 post (of 1 total)