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.


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.

    <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=""></script>

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

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>
    <!--Start Contact form -->		                                                
    <form name="enq" method="post" action="email/" onsubmit="return validation();">
    <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!" />
    <!--End Contact form -->											 

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