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. :)
Form built with Twitter Bootstrap
Required jQuery/Javascript
Codeigniter Controller
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 class="container-fluid"> <div class="row-fluid"> <div class="span9 offset3"> <form action="" id="contact-form" class="form-horizontal" method="post"> <fieldset> <div class="control-group"> <label class="control-label" for="name">Your Name</label> <div class="controls"> <input type="text" class="input-xlarge" name="name" id="name"> </div> </div> <div class="control-group"> <label class="control-label" for="email">Email Address</label> <div class="controls"> <input type="text" class="input-xlarge" name="email" id="email"> </div> </div> <div class="control-group"> <label class="control-label" for="subject">Subject</label> <div class="controls"> <input type="text" class="input-xlarge" name="subject" id="subject"> </div> </div> <div class="control-group"> <label class="control-label" for="message">Your Message</label> <div class="controls"> <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" class="btn">Send Email</button> </div> </div> </fieldset> </form> <!-- output the results (Success or failure message from controller) --> <div id="results"></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 */
ngood
ReplyDelete