Contact Form Using Jquery Validation, Codeigniter And Bootstrap

Contact Form Using Jquery Validation, Codeigniter And Bootstrap Attributes,html,javascript,Jquery Contact Form Using Jquery Validation, Codeigniter And Bootstrap

I have used Jquery validation plugin for validation, bootstrap for styling HTML and Codeigniter to send the email.
I have posted the complete source code and screen dump of final outcome. Feel free to use it. :)

Bootstrap Contact form

Form built with Twitter Bootstrap

<style type="text/css"> label.valid { width: 24px; height: 24px; background: url(../img/valid.png) center center no-repeat; display: inline-block; text-indent: -9999px; } label.error { font-weight: bold; padding: 2px 8px; margin-top: 2px; } </style> <div> <div> <div> <form action="" method="post"> <fieldset> <div> <label for="name">Your Name</label> <div> <input type="text" name="name"> </div> </div> <div> <label for="email">Email Address</label> <div> <input type="text" name="email"> </div> </div> <div> <label for="subject">Subject</label> <div> <input type="text" name="subject"> </div> </div> <div> <label for="message">Your Message</label> <div> <textarea name="message" rows="3"></textarea> </div> </div> <div> <div> <button type="submit">Send Email</button> </div> </div> </fieldset> </form> <!-- output the results (Success or failure message from controller) --> <div></div> </div> </div> </div>

Required jQuery/Javascript

$(document).ready(function() { $('#contact-form').validate({ rules: { name: { minlength: 2, required: true }, email: { required: true, email: true }, subject: { minlength: 2, required: true }, message: { minlength: 2, required: true } }, highlight: function(element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function(element) { element.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success'); }, submitHandler: function( form ) { $.ajax({ url : 'contact/process', data : $('#contact-form').serialize(), type: "POST", success : function(data){ $("#contact-form").hide('slow'); $('#results').html(data); } }) return false; } }); }); // end document.ready

Codeigniter Controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Contact extends CI_Controller { function process() { $this->load->library('email'); //grab the post data $this->email->from($this->input->post('email'), $this->input->post('name')); $this->email->to('sombody@gmail.com'); $this->email->subject($this->input->post('subject')); $this->email->message($this->input->post('message')); if($this->email->send()) { echo "We have successfully received your email. We will Contact you ASAP."; } else { echo "Some problem occurred."; } } } /* End of file contact.php */ /* Location: ./application/controllers/contact.php */ 

Posted by Hodie J