Zenform

From Web Developer Network Wiki
Jump to: navigation, search

Zenforms are theme-able form layouts. Each of the zenbox themes are available in zenform. The HTML for zenforms:

<script type="text/javascript">
//<![CDATA[
	WDN.jQuery(document).ready(function(){
	     WDN.initializePlugin('zenform');
	});
//]]>
</script>
<h3 class="zenform">Important Survey</h3>
<form class="zenform" action="?" method="post">
    <fieldset>
            <legend>Sample Form Content</legend>
            <ol>
                    <li>
                    	<label for="name">
                    		<span class="required">*</span>
                    		Name
                    		<span class="helper">Enter Your Full Name</span>
                    	</label>
                    	<input type="text" id="name" name="name" />
                    </li>
                    <li>
                    	<label for="email">Email</label>
                    	<input type="text" id="email" name="email" />
                    </li>
                    <li>
                    	<label for="campus">Campus</label>
                    	<select name="campus" id="campus">
                    		<option value="none"></option>
                    		<option value="unl">UNL</option>
                    		<option value="unk">UNK</option>
                    		<option value="uno">UNO</option>
                    		<option value="unmc">UNMC</option>
                    	</select>
                    </li>
                    <li>
                    	<fieldset> 
                    		<legend>
                    			<span class="required">*</span>
                    			The Most Important Question: I Can Has Cheezburger?
                    			
                    		</legend>
                    		<ol>
                     		<li>
                     			<input type="radio" value="1" name="helpful" id="helpful_yes" />
                     			<label for="helpful_yes">Yes</label>
                     		</li>
                     		<li>
                       	<input type="radio" value="0" name="helpful" id="helpful_no" />
                       	<label for="helpful_no">No</label>
                       </li>
                     		<li>
                     			<input type="radio" value="2" name="helpful" id="helpful_maybe" />
                       	<label for="helpful_maybe">Maybe</label>
                       </li>
               	</ol>
                    	</fieldset>
                    </li>
                    <li>
                    	<label for="helpful_comments">In what way?</label>
                    	<textarea id="helpful_comments" name="comments" rows="4" cols="auto"></textarea>
                    </li>
            </ol>
    </fieldset> 
    <input type="submit" name="submit" value="Submit" />
    <input type="reset" name="reset" value="Reset" />
</form>

This will produce a form that will look like this:

Zenform.png

The Form Heading

The form heading is outside the form HTML. It is optional. If desired, it must have class="zenform":

    <h3 class="zenform">Important Survey</h3>

The form heading is allowed to be themed with the same class names as the form. If the form heading is used, it MUST use the same theme as the referenced form.

For a working example, check out Template Examples.

Form Validation

While the Zenform markup allows you to display a field as required, it does not actually provide any means of enforcing this constraint. If you would like this kind of functionality or to preform any type of validation of form elements you can use a jQuery plugin that is distributed along with the template dependents. It works by adding CSS classes to the input elements of the form. For full details see jQuery Validation. It is confirmed to work with the markup of Zenform.

Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox