Trongate Docs
switch to dark modeswitch to dark mode
»
»
Improving Our Form

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:

Video Tutorial

In this video I'm going to demonstrate a few different ways that we can improve our form.


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

That's not too bad, but what if you don't like green?  Fear not, with Trongate you can easily...

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');

Just To Let You Know
Full details about form field generation can be found in our Form Helper documentation.

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);

Did You Know?
In PHP,  there are a variety of different ways to declare arrays.  The best method is the one that you like the most!

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"));

Just To Let You Know
As you can see, with our 'Cancel' link, we have passed in some 'class' attributes.  Specifically, a 'button' class and an 'alt' class.  The 'button' class adds turns an ordinary text link into a button.  The 'alt' class changes our button into an alternative color.

Did You Know?
If you ever see an HTML element that contains a class attribute and if the class attribute contains multiple words, separated by spaces, it means that more than one class has been added to the element.  For example, the code below would produce a paragraph that utilises both a "large" CSS class as well as a "success" CSS class:

<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


HELP & SUPPORT

If you have a question or a comment relating to anything you've see here, please goto the Help Bar.

 
×