Follow us on Facebook

/// Free Bootstrap Contact Form

Easy Instructions

Here's a very simple Bootstrap Contact form that you can use on your bootstrap site with same page Ajax Validation return. All it requires is to link to a JS and a PHP file in a subdirectory named 'email/'. These two files are named as 'index.php' and 'validation.js'.

See Demo Download Files

1. Open the file named 'index.php' located in the 'email/' folder in Dreamweaver or Notepad++. Scroll down to line 9 and change the default email address to your own email address and save.

$to="your-email@your-domain.com";

2. Next, open your Bootstrap html page and insert the link to your 'validation.js' file between the head tags at the top of your document.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Your Name Here - Welcome</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">  
    
    <link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="scripts/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    

    <link href="styles/custom.css" rel="stylesheet" type="text/css" />
    <script src="email/validation.js" type="text/javascript"></script>
</head>

3. Finally, insert the bootstrap code for the contact form in your contact page in any span grid size and save the page as a PHP file, e.g. contact.php. Here's the code for it:

<div class="span8" id="divMain">

    <h1>Contact Us</h1>
    <h3 style="color:#FF6633;"><?php echo $_GET[msg];?></h3>
    <hr>
    <!--Start Contact form -->		                                                
    <form name="enq" method="post" action="email/" onsubmit="return validation();">
    
    <fieldset>    
    <input type="text" name="name" id="name" value=""  class="input-block-level" placeholder="Name" />
    <input type="text" name="email" id="email" value="" class="input-block-level" placeholder="Email" />
    <textarea rows="11" name="message" id="message" class="input-block-level" placeholder="Comments"></text    area>
    <div class="actions">
    <input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull    -right" title="Click here to submit your message!" />
    </div>	
    </fieldset>
	
    </form>  				 
    <!--End Contact form -->											 
</div>

The contact form will not work locally on your PC, you will need to upload the files and contents of the subdirectory 'email/' to your hosting server. Your server must be able to handle PHP, ideally on a Linux server. If your website is hosted on a Windows platform, ask for it to be switched to Linux so that the contact form will work submit successfully. Webhosts normally do not charge for a switchover to Linux.

Feel free to share this resource on your website for users. Please link direct to this page including the demo and downloads. Thankyou.


Copyright © 2016 HTML5 Templates Dreamweaver.com