Create Simple Contact Form with CodeIgniter

A contact page is a standard web page on a website used to allow the visitor to contact the Web Application admin. In this tutorial, you will learn how to create a CodeIgniter contact page with Bootstrap.

The post covered in easy steps with live to create a CodeIgniter contact page with Bootstrap.This is a very simple example, you can just copy paste, and change according to your requirement.

Also Read : Integrate the Google reCAPTCHA in PHP Contact Form

Before started to implement the Create Contact Form with CodeIgniter, look files structure:

codeigniter-contact-form
- application
  - config
    - autoload.php
    - constants.php
    - config.php
    - routes.php
  - controllers
    - Contact.php
  - views
    - contact
      - index.php
    - mailTemplate
      - contactForm.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css

Step 1: Update constants file

Create a config file named “constants.php” inside “application/config” folder.

    define('TO_MAIL', 'xxx@xxx.com');
    define('FROM_MAIL', 'xxx@xxx.com');
    define('FROM_TEXT', 'TECHARISE');

define('TO_MAIL', 'xxx@xxx.com');

define('FROM_MAIL', 'xxx@xxx.com');

define('FROM_TEXT', 'TECHARISE');

Step 2: Load “email” class in controller.

<?php
  // load email library
  $this->load->library('email');
?>

<?php

// load email library

$this->load->library('email');

Set Email Parameters

    $this->email->from('info@techarise.com', 'TechArise');
    $this->email->to('emailto@techarise.com');
    $this->email->subject('Send Email Subject');
    $this->email->message('body message');

$this->email->from('info@techarise.com', 'TechArise');

$this->email->to('emailto@techarise.com');

$this->email->subject('Send Email Subject');

$this->email->message('body message');

Step 2: Create a controller file

Create a controller file named “Contact.php” inside “application/controllers” folder.

<?php
/**
 * @package Contact :  CodeIgniter Contact Form
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *   
 * Description of Contact Controller
 */

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Contact extends CI_Controller {

    public function __construct() {
        parent::__construct();
    }
    // render contact form
    public function index() {
        $data['page'] = 'contact';
        $data['title'] = 'contact | TechArise';             
        $this->load->view('contact/index', $data);
    }
    
    // send information
    public function send() {
        // Load the email library
        $this->load->library('email');
        // Load the validation library
        $this->load->library('form_validation');

        // field name, error message, validation rules
        $this->form_validation->set_rules('name', 'Name', 'trim|required');     
        $this->form_validation->set_rules('email', 'Your Email', 'trim|required|valid_email');
        $this->form_validation->set_rules('contact_no', 'Phone', 'trim|required');
        $this->form_validation->set_rules('comment', 'Comments', 'trim|required');
                   
        if($this->form_validation->run() == FALSE) {
          $this->index();
        } else {        
            $name = $this->input->post('name');
            $email = $this->input->post('email');
            $contact_no = $this->input->post('contact_no');
            $comment = $this->input->post('comment');            
            if(!empty($email)) {
                // send mail
                $config = array (
                  'mailtype' => 'html',
                  'charset'  => 'utf-8',
                  'priority' => '1'
                );
                $message='';
                $bodyMsg = '<p style="font-size:14px;font-weight:normal;margin-bottom:10px;margin-top:0;">'.$comment.'</p>';   
                $delimeter = $name."<br>".$contact_no;
                $dataMail = array('topMsg'=>'Hi Team', 'bodyMsg'=>$bodyMsg, 'thanksMsg'=>'Best regards,', 'delimeter'=> $delimeter);

                $this->email->initialize($config);
                $this->email->from($email, $name);
                $this->email->to(TO_MAIL);
                $this->email->subject('Contact Form');
                $message = $this->load->view('mailTemplate/contactForm', $dataMail, TRUE);
                $this->email->message($message);
                $this->email->send();

                // confirmation mail
                $bodyMsg = '<p style="font-size:14px;font-weight:normal;margin-bottom:10px;margin-top:0;">Thank you for contacting us.</p>';                 
                $dataMail = array('topMsg'=>'Hi '.$name, 'bodyMsg'=>$bodyMsg, 'thanksMsg'=>'Best regards,', 'delimeter'=> 'Team TechArise');

                $this->email->initialize($config);
                $this->email->from(TO_MAIL, FROM_TEXT);
                $this->email->to($email);
                $this->email->subject('Contact Form Confimation');
                $message = $this->load->view('mailTemplate/contactForm', $dataMail, TRUE);
                $this->email->message($message);
                $this->email->send();                
            }
            $this->session->set_flashdata('msg', 'Thank you for your message. It has been sent.');
            redirect('/');
        }
    }   

}
?>

<?php

/**

* @package Contact : CodeIgniter Contact Form

* @author TechArise Team

* @email info@techarise.com

* Description of Contact Controller

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Contact extends CI_Controller {

public function __construct() {

parent::__construct();

}

// render contact form

public function index() {

$data['page'] = 'contact';

$data['title'] = 'contact | TechArise';

$this->load->view('contact/index', $data);

}

// send information

public function send() {

// Load the email library

$this->load->library('email');

// Load the validation library

$this->load->library('form_validation');

// field name, error message, validation rules

$this->form_validation->set_rules('name', 'Name', 'trim|required');

$this->form_validation->set_rules('email', 'Your Email', 'trim|required|valid_email');

$this->form_validation->set_rules('contact_no', 'Phone', 'trim|required');

$this->form_validation->set_rules('comment', 'Comments', 'trim|required');

if($this->form_validation->run() == FALSE) {

$this->index();

} else {

$name = $this->input->post('name');

$email = $this->input->post('email');

$contact_no = $this->input->post('contact_no');

$comment = $this->input->post('comment');

if(!empty($email)) {

// send mail

$config = array (

'mailtype' => 'html',

'charset' => 'utf-8',

'priority' => '1'

);

$message='';

$bodyMsg = '<p style="font-size:14px;font-weight:normal;margin-bottom:10px;margin-top:0;">'.$comment.'</p>';

$delimeter = $name."<br>".$contact_no;

$dataMail = array('topMsg'=>'Hi Team', 'bodyMsg'=>$bodyMsg, 'thanksMsg'=>'Best regards,', 'delimeter'=> $delimeter);

$this->email->initialize($config);

$this->email->from($email, $name);

$this->email->to(TO_MAIL);

$this->email->subject('Contact Form');

$message = $this->load->view('mailTemplate/contactForm', $dataMail, TRUE);

$this->email->message($message);

$this->email->send();

// confirmation mail

$bodyMsg = '<p style="font-size:14px;font-weight:normal;margin-bottom:10px;margin-top:0;">Thank you for contacting us.</p>';

$dataMail = array('topMsg'=>'Hi '.$name, 'bodyMsg'=>$bodyMsg, 'thanksMsg'=>'Best regards,', 'delimeter'=> 'Team TechArise');

$this->email->initialize($config);

$this->email->from(TO_MAIL, FROM_TEXT);

$this->email->to($email);

$this->email->subject('Contact Form Confimation');

$message = $this->load->view('mailTemplate/contactForm', $dataMail, TRUE);

$this->email->message($message);

$this->email->send();

}

$this->session->set_flashdata('msg', 'Thank you for your message. It has been sent.');

redirect('/');

}

Step 3: Create a view

Create a view file named “index.php” inside “application/views/contact” folder.

<?php
$this->load->view('templates/header');
?>
<section class="showcase">
  <div class="container">
    <div class="pb-2 mt-4 mb-2 border-bottom">
      <h2>CodeIgniter Contact Form Example</h2>
    </div>
    <div class="row">
        <div class="col">
        <?php if(!empty($this->session->flashdata('msg'))){ ?>
            <div class="alert alert-success">
                <?php echo $this->session->flashdata('msg'); ?>
            </div>        
        <?php } ?>
        <?php if(validation_errors()) { ?>
          <div class="alert alert-danger">
            <?php echo validation_errors(); ?>
          </div>
        <?php } ?>
    </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header bg-default"><i class="fa fa-envelope"></i> Contact us.
                </div>
                <div class="card-body">
                    <form action="<?php print site_url();?>contact/send" method="POST" class="add-emp" id="add-emp">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" class="form-control" id="name" placeholder="Full Name">
                        </div>
                        <div class="form-group">
                            <label for="email">Email address</label>
                            <input type="text" name="email" class="form-control" id="email" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="email">Contact No</label>
                            <input type="text" name="contact_no" class="form-control" id="contact-no" placeholder="Contact No.">
                        </div>
                        <div class="form-group">
                            <textarea name="comment" cols="3" rows="4" class="form-control" id="comment" placeholder="Comment"></textarea>
                        </div>
                        
                        <div class="mx-auto float-right">
                            <button type="reset" name="reset_add_emp" id="re-submit-emp" class="btn btn-danger"><i class="fa fa-undo"></i> Reset</button>
                            <button type="submit" name="add_emp" id="submit-emp" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-4">
            <div class="card bg-light mb-3">
                <div class="card-header bg-info text-white text-uppercase"><i class="fa fa-address-card" aria-hidden="true"></i> Address</div>
                <div class="card-body">
                    <address>
                    <h5>Customer service:</h5>
                    <div title="Phone"><strong>Phone:</strong> +9 976 543 100</div> 
                    <div title="E-mail"><strong>E-mail: </strong><a href="mailto:contact@techarise.com" target="_top" rel="noopener noreferrer">contact@techarise.com</a></div>
                </address>
                <br>
                <hr>
                <br>
                <address>
                    <h5>Head Office:</h5>
                    <div>Company Inc, </div>
                    <div>L/01 Rotterdam Rd East,</div>
                    <div>89088 Southampton, United States</div>
                    <div title="Phone"><strong>Phone:</strong> +9 976 543 100</div>
                    <div><a href="mailto:contact@techarise.com" target="_top" rel="noopener noreferrer">contact@techarise.com</a></div>
                </address>

                </div>

            </div>
        </div>
    </div>

</div>
</section>
<?php
$this->load->view('templates/footer');
?>

<?php

$this->load->view('templates/header');

<h2>CodeIgniter Contact Form Example</h2>

</div>

<?php if(!empty($this->session->flashdata('msg'))){ ?>

<?php echo $this->session->flashdata('msg'); ?>

</div>

<?php } ?>

<?php if(validation_errors()) { ?>

<?php echo validation_errors(); ?>

</div>

<?php } ?>

</div>

<div class="card-header bg-default"><i class="fa fa-envelope"></i> Contact us.

</div>

<form action="<?php print site_url();?>contact/send" method="POST" class="add-emp" id="add-emp">

</div>

<label for="email">Email address</label>

</div>

<label for="email">Contact No</label>

</div>

</div>

<button type="reset" name="reset_add_emp" id="re-submit-emp" class="btn btn-danger"><i class="fa fa-undo"></i> Reset</button>

</div>

</form>

</div>

<div class="card-header bg-info text-white text-uppercase"><i class="fa fa-address-card" aria-hidden="true"></i> Address</div>

<h5>Customer service:</h5>

<div title="Phone"><strong>Phone:</strong> +9 976 543 100</div>

<div title="E-mail"><strong>E-mail: </strong><a href="mailto:contact@techarise.com" target="_top" rel="noopener noreferrer">contact@techarise.com</a></div>

</address>

<br>

<hr>

<br>

<h5>Head Office:</h5>

<div>Company Inc, </div>

<div>L/01 Rotterdam Rd East,</div>

<div>89088 Southampton, United States</div>

<div title="Phone"><strong>Phone:</strong> +9 976 543 100</div>

<div><a href="mailto:contact@techarise.com" target="_top" rel="noopener noreferrer">contact@techarise.com</a></div>

</address>

</div>

</section>

<?php

$this->load->view('templates/footer');

Step 4: Create a view(mailTemplate)

Create a view file named “contactForm.php” inside “application/views/mailTemplate” folder.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width"/>
    </head>
    <body style="width:100%;height:100%;background:#efefef;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;color:#3E3E3E;font-family:Helvetica, Arial, sans-serif;line-height:1.65;margin:0;padding:0;">
        <table border="0" cellpadding="0" cellspacing="0" style="width:100%;background:#efefef;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;color:#3E3E3E;font-family:Helvetica, Arial, sans-serif;line-height:1.65;margin:0;padding:0;">
            <tr>
                <td valign="top" style="display:block;clear:both;margin:0 auto;max-width:580px;">
                    <table border="0" cellpadding="0" cellspacing="0" style="width:100%;border-collapse:collapse;">
                        <tr>
                            <td valign="top" align="center" class="masthead" style="padding:20px 0;background:#03618c;color:white;">
                                <h1 style="font-size:32px;margin:0 auto;max-width:90%;line-height:1.25;">
                                    <a href="<?php print site_url(); ?>" target="_blank" style="text-decoration:none;color:#ffffff;">TECHARISE</a>
                                    <p style="margin-bottom:0;line-height:12px;font-weight:normal;margin-top:15px;font-size:18px;"></p>
                                </h1>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" class="content" style="background:white;padding:20px 35px 10px 35px;">
                                <h4 style="font-size:20px;margin-bottom:10px;line-height:1.25;"><?php print $topMsg; ?>,</h4>
                                <?php print $bodyMsg; ?>
                            </td>
                        </tr>
                        <tr>
                            <td valign="top" style="display:block;clear:both;margin:0 auto;max-width:580px;">
                                <table border="0" cellpadding="0" cellspacing="0" style="width:100%;border-collapse:collapse;">
                                    <tr>
                                        <td valign="top" class="content thanksMsg" style="background:white;padding:10px 35px 20px 35px;">
                                            <p style="font-size:14px;font-weight:normal;margin-top:0;margin-bottom:5px;"><?php print $thanksMsg; ?></p>
                                            <p style="font-size:14px;font-weight:normal;margin-top:0;margin-bottom:5px;"><?php print $delimeter; ?></p>
                                        </td>
                                    </tr>                                    
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>            
        </table>
    </body>
</html>

<head>

</head>

<tr>

<tr>

<a href="<?php print site_url(); ?>" target="_blank" style="text-decoration:none;color:#ffffff;">TECHARISE</a>

</h1>

</td>

</tr>

<tr>

<?php print $bodyMsg; ?>

</td>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

Create header setion

The Bootstrap library is used to provide a better UI, so, include it in the header section. Located at the top of a web application, the header typically contains elements that include a company’s logo, website navigation, and other information.

Create a view file named "header.php" inside "application/views/templates" folder.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Create Simple Contact Form with CodeIgniter | TechArise</title>
  <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- Custom fonts for this template -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <!-- Custom styles for this template -->
  <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
  <div class="container">
    <a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="https://techarise.com">Home
                <span class="sr-only">(current)</span>
              </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

<!DOCTYPE html>

<head>

<title>Create Simple Contact Form with CodeIgniter | TechArise</title>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>

</button>

<a class="nav-link" href="https://techarise.com">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Create footer setion

Include Bootstrap plugin
Include jQuery plugins and JavaScript file

Create a view file named "footer.php" inside "application/views/templates" folder.

<!-- Footer -->
  <footer class="footer bg-light footer-bg-dark">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="text-muted small mb-4 mb-lg-0">Copyright &copy;  2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
  <!-- Bootstrap core JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>  
</body>
</html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

</body>

</html>

Also Read : Create AJAX Contact Form in CodeIgniter and Send Email via SMTP Server

Demo Download