CODEWITHSUNDEEP
phphtmlcsscodeignitertwitter-bootstrap
Gwenji
Gwenji

Reputation: 117

Contact Form using PHP, CSS, CodeIgniter and Bootstrap

I'm using CodeIgniter, styled with Bootstrap to build a website, which has a Contact Page.

I can't stylize the text-fields built by the PHP/Form Helper, as I'm not sure where to use the tags, every solution I've tried has resulted in either an extra text field, or just the addon appearing, or nothing at all.

Controller:

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

class Welcome extends CI_Controller {

    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     *      http://example.com/index.php/welcome
     *  - or -  
     *      http://example.com/index.php/welcome/index
     *  - or -
     * Since this controller is set as the default controller in 
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see http://codeigniter.com/user_guide/general/urls.html
     */

    protected   $sendEmailTo    =   '[email protected]'
    protected   $subjectLine    =   ""; // actually set on line 39.

    // views
    protected   $formView       =   'contact';
    protected   $successView    =   'contact_success';
    protected   $headerView     =   ''; //null to disable
    protected   $footerView     =   ''; //null to disable

    // other
    public      $data           =   array(); // used for the views


        public function contact()
    {

        $this->load->library('form_validation');
        $this->load->helper('url');
        $this->subjectLine = "Contact form response from " . $_SERVER['HTTP_HOST'];
        $this->form_validation->set_rules('name', 'Your name', 'trim|required');
        $this->form_validation->set_rules('email', 'Your Email', 'trim|required|valid_email');
        $this->form_validation->set_rules('message', 'Message', 'trim|required|xss_clean');

        if($this->form_validation->run() == FALSE) {
            // show the form

            if ($this->headerView) { $this->load->view($this->headerView,$this->data); }
            $this->load->view($this->formView,$this->data);
            if ($this->footerView) { $this->load->view($this->footerView,$this->data); }

        } else {
            // success! email it, assume it sent, then show contact success view.

            $this->load->library('email');
            $this->email->from($this->input->post('email'), $this->input->post('name'));
            $this->email->to($this->sendEmailTo);
            $this->email->subject($this->subjectLine);
            $this->email->message($this->input->post('message'));
            $this->email->send();

            if ($this->headerView) { $this->load->view($this->headerView,$this->data); }
            $this->load->view($this->successView,$this->data);
            if ($this->footerView) { $this->load->view($this->footerView,$this->data); }


    }

View:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">

    <title>Carousel Template for Bootstrap</title>

    <link href="<?php echo base_url().'css/bootstrap.css' ?>" rel="stylesheet" type="text/css">
    <link href="<?php echo base_url().'css/bootstrap-responsive.css' ?>" rel="stylesheet" type="text/css"> </head>


     <div class="input-group">
     <h1>Contact Form</h1>
     <?php echo validation_errors(); ?>
<?

    echo form_open(current_url()); 

?>

<p>
<?php

    echo "<tr>
        <td>" . form_label('Name: ', 'name') . "</td>
        <td>" . form_input('name', set_value('name')) . "</td>
        </tr>";

    echo "<tr>
        <td>" . form_label('Email: ', 'email'). "</td>
        <td>" . form_input('email', set_value('email')) . "</td>
        </tr>";

    echo "<tr>
        <td>".form_label('Message: ', 'message'). "</td>
        <td><textarea name='message'>" . set_value("message") . "</textarea></td>
        </tr>";

    echo "<tr>
        <td>".form_submit('submit', 'Submit Message') . "</td>
        </tr>";

?>
</table>

<?
    echo form_close();
?>
</div>

Sample Bootstrap CSS I'd like to use:

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Upvotes: 0

Views: 6928

Answers (2)

cartalot
cartalot

Reputation: 3148

the awesome thing about codeigniter + bootstrap for forms is once you set up some config defaults you never have to think about it. make some configs to hold the bootstrap code and use codeigniter form helper to create arrays for the code needed for the form fields. that way everything important happens in the config file, and the view is very simple. 

 // in config file -- this is bootstrap code that is repeated over and over 
 // so i just make some quick configs to hold the html code
 $config['btcgroup'] = '<div class="control-group">';
 $config['btclabel'] = array(
'class' => 'control-label'
 );
 $config['c2divs'] = '</div></div>';

// quick form field example
$config['spnam01'] = 'Shipping First Name';
$config['spary01'] = array(
'name'        => 'sp01',
'maxlength'   => '60',
'size'        => '20',
'class' => 'input-medium',
'placeholder'=> 'First name'
);
$config['sphelp01'] = '<p class="help-block"> Required Field </p>';

 // and put it together in the view for form field sp01
    echo $btcgroup.form_label($spnam01.$formreq, 'sp01',$btclabel ).$btcontrols.form_input($spary01,set_value('sp01')).form_error('sp01'); 
echo $c2divs;

no html code to build the form. we are not trying to mix php and html once you have a template you like - you can create forms very quickly. (note there might be something missing from this example but it should get you started)

Upvotes: 0

omma2289
omma2289

Reputation: 54619

First you should build your markup outside php tags and just use php to echo the individual inputs, you can pass the attributes you need as an array argument to form_input(), more info on that here.

Example:

<div class="input-group">
  <span class="input-group-addon">@</span>
  <?php echo form_input(array("class"=>"form-control","placeholder"=>"Username"))?>
</div>

Upvotes: 2

Related Questions