A contact form

Note the uneditable prefixes (text and images) for some of the fields.

Check the "Template source" tab to see how it's done!

Leave this field blank

Your name:*

Your email address:*

Your email address will not be published.

Your website:

Enter the URL of your website, if you have one.

Subject*

Message:*

• try clicking on the submit button without filling the form and then, as you fill the form, to see the JavaScript validation in action
• for each example, notice how the PHP code of the form remains basically unchanged, despite the template variations
• disable JavaScript to see the server-side validation in action
• although in all my examples I use HTML output, you can switch to XHTML output by using the doctye method
• try the example in another browser and see that it works, out of the box. including IE6!

<?php

    // include the Zebra_Form class
    require 'path/to/Zebra_Form.php';

    // instantiate a Zebra_Form object
    $form = new Zebra_Form('form');

    // the label for the "name" element
    $form->add('label', 'label_name', 'name', 'Your name:');

    // add the "name" element
    $obj = $form->add('text', 'name', '', array('style' => 'width: 195px', 'data-prefix' => 'img:public/images/user.png'));

    // set rules
    $obj->set_rule(array(

        // error messages will be sent to a variable called "error", usable in custom templates
        'required' => array('error', 'Name is required!')

    ));

    // "email"
    $form->add('label', 'label_email', 'email', 'Your email address:');
    $obj = $form->add('text', 'email', '', array('style' => 'width: 195px', 'data-prefix' => 'img:public/images/letter.png'));
    $obj->set_rule(array(
        'required'  =>  array('error', 'Email is required!'),
        'email'     =>  array('error', 'Email address seems to be invalid!'),
    ));
    $form->add('note', 'note_email', 'email', 'Your email address will not be published.');

    // "website"
    $form->add('label', 'label_website', 'website', 'Your website:');
    $obj = $form->add('text', 'website', '', array('style' => 'width: 400px', 'data-prefix' => 'http://'));
    $obj->set_rule(array(
        'url'   =>  array(true, 'error', 'Invalid URL specified!'),
    ));
    $form->add('note', 'note_website', 'website', 'Enter the URL of your website, if you have one.');

    // "subject"
    $form->add('label', 'label_subject', 'subject', 'Subject');
    $obj = $form->add('text', 'subject', '', array('style' => 'width: 400px', 'data-prefix' => 'img:public/images/comment.png'));
    $obj->set_rule(array(
        'required' => array('error', 'Subject is required!')
    ));

    // "message"
    $form->add('label', 'label_message', 'message', 'Message:');
    $obj = $form->add('textarea', 'message');
    $obj->set_rule(array(
        'required'  => array('error', 'Message is required!'),
        'length'    => array(0, 140, 'error', 'Maximum length is 140 characters!', true),
    ));

    // "submit"
    $form->add('submit', 'btnsubmit', 'Submit');

    // if the form is valid
    if ($form->validate()) {

        // show results
        show_results();

    // otherwise
    } else

        // generate output using a custom template
        $form->render('path/to/custom-template.php');

?>

<?php
    // don't forget about this for custom templates, or errors will not show for server-side validation
    // $zf_error is automatically created by the library and it holds messages about SPAM or CSRF errors
    // $error is the name of the variable used with the set_rule method
    echo (isset($zf_error) ? $zf_error : (isset($error) ? $error : ''));
?>

<!-- elements are grouped in "rows" -->
<div class="row">

    <!-- things that need to be side-by-side go in "cells" and will be floated to the left -->
    <div class="cell"><?php echo $label_name . $name?></div>
    <div class="cell"><?php echo $label_email . $email . $note_email?></div>

</div>

<!-- notice the "even" class which is used to highlight even rows differently
from the odd rows -->
<div class="row even"><?php echo $label_website . $website . $note_website?></div>

<div class="row"><?php echo $label_subject . $subject?></div>

<div class="row even"><?php echo $label_message . $message?></div>

<!-- the submit button goes in the last row; also, notice the "last" class which
removes the bottom border which is otherwise present for any row -->
<div class="row last"><?php echo $btnsubmit?></div>

<!-- must be in strict mode! -->
<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Zebra_Form Example</title>

        <!-- load Zebra_Form's stylesheet file -->
        <link rel="stylesheet" href="path/to/zebra_form.css">

    </head>

    <body>

        <!--

            the content from the "PHP Source" tab goes here

        -->

        <!-- we're loading the JavaScript files at the bottom of the page so we don't delay page rendering -->

        <!-- try to load jQuery from CDN server and fallback to local source if not available -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="path/to/jquery-1.9.1.min.js"><\/script>')</script>

        <!-- load Zebra_Form's JavaScript file -->
        <script src="path/to/zebra_form.js"></script>

    </body>

</html>