Improving Our Form

So far, we've managed to create a fairly nice looking form without writing much code.  However, we can do better!  Now, let's spend a little time improving our form.  To do this, I'd like to introduce you to:

• styling your forms with 'cards'
  
• changing theme colors
• form values
• form attributes
  
• adding a cancel button

If you like watching video tutorials, here's a short video that covers everything you need to know about this topic:

For those of you who prefer reading, here's everything that gets covered in the video above:

Styling Your Form With Cards

Thanks to Trongate CSS we are able to create nice looking forms without having to worry about classes, divs or any CSS shenanigans.  Everything looks nice automatically.

However, if you are willing to take the time to add a little CSS, you can easily turn a nice looking form into a good looking form.  One way that we can do this is by having our form inside a 'card'.

A card is a CSS component on a webpage that is designed to look a little bit like... (wait for it) a card!  Most modern CSS libraries have some kind of 'card' class that's available.  Cards usually have a nice shadow effect, a top 'header' section and a 'body' section.

Below is some code from our create.php view file.  Here, our form code remains completely unchanged.  The only difference is that we now have our form contained within a card.

<h1>Create New Record</h1>
<div class="card">
    <div class="card-heading">
        Book Details
    </div>
    <div class="card-body">
        <?php
        echo form_open($form_location);
        echo form_label('Book Title');
        echo form_input('title');
        echo form_label('Description');
        echo form_textarea('description');
        echo form_label('Author');
        echo form_dropdown('author_id', $author_options, '');
        echo '<div>Published: ';
        echo form_checkbox('published', 1, 0);
        echo '</div>';
        echo form_submit('submit', 'Submit');
        echo form_close();
        ?>
    </div>
</div>

Give this a try and you should now have a page that looks something like this:

screenshot

Change Your Theme Color Scheme

Inside your 'config' folder, there's a PHP file named themes.php.  By default, Trongate comes with an 'admin' theme declared.  The syntax on this file looks like this:

<?php
$admin_theme = [
    "dir" => "default_admin/green",
    "template" => "admin.php",
];

$themes['admin'] = $admin_theme;
define('THEMES', $themes);

As you can see, in the code above, we point towards a directory named 'default_admin/green'.  By simply changing 'green' to an alternative colour, you can easily change the colour scheme for your admin panel. Possible options are:

• black
  
• blue
• green
• orange
• purple
• red

Below is a screenshot of our form, now with a blue color scheme.

screenshot

Form Field Values And Attributes

For form field methods like form_input() and form_textarea() we can pass a form field value in as an argument.  For example, the code below will produce a form field with a value of 'John'.

echo form_input('first_name', 'John');

With a value declared, we can now pass in a third argument that represents our form field attributes.

Form field attributes should be an array of key, value pairs.  These pairs can be made up of anything that you'd like to have added inside your form field tags.  The code below adds a placeholder attribute and an autocomplete attribute to our title form field.

$attr['placeholder'] = 'Enter book title here';
$attr['autocomplete'] = 'off';
echo form_input('title', '', $attr);

Adding A Cancel Button

We can easily add a cancel button onto our form by creating a text link, using the anchor method.

echo anchor('books/manage', 'Cancel', array("class" => "button alt"));

<p class="large success"></p>

The Complete View File

Below is the code for our complete view file.

<h1>Create New Record</h1>
<div class="card">
    <div class="card-heading">
        Book Details
    </div>
    <div class="card-body">
        <?php
        echo form_open($form_location);
        echo form_label('Book Title');
        $attr['placeholder'] = 'Enter book title here';
        $attr['autocomplete'] = 'off';
        echo form_input('title', '', $attr);
        echo form_label('Description');
        echo form_textarea('description', '', array("placeholder" => "Enter description here"));
        echo form_label('Author');
        echo form_dropdown('author_id', $author_options, '');
        echo '<div>Published: ';
        echo form_checkbox('published', 1, 0);
        echo '</div>';
        echo form_submit('submit', 'Submit');
        echo anchor('books/manage', 'Cancel', array("class" => "button alt"));
        echo form_close();
        ?>
    </div>
</div>

Finally, here's a screenshot, showing you what our and improved form looks like:

screenshot