After some research on the subject I found htmLawed, a PHP code to purify and filter HTML that works incredibly well. Props to the htmLawed team for their awesome work!. To merge it with WordPress I wrote a little function which automatically filters the content coming from the post. The results are amazing, htmLawed cleans and filters all the bad content and makes the pages validate again right away!

	include_once ( TEMPLATEPATH . '/htmLawed.php' ); // THIS FILE SHOULD RESIDE IN THE THEME FOLDER.

	function clean_the_content( $content )
	{
		$szPostContent = $content;
		$szRemoveFilter = array( "~<p[^>]*>\s?</p>~", "~<a[^>]*>\s?</a>~", "~<font[^>]*>~", "~<\/font>~", "~<span[^>]*>\s?</span>~" );
		$szPostContent = preg_replace( $szRemoveFilter, '' , $szPostContent);
		$szPostContent = htmLawed($szPostContent);
		return $szPostContent;
	}

	add_filter('the_content', 'clean_the_content');

To use this function simple drop the two files in your theme directory and you are set to go!. Hope you find this post useful. Cheers!

Related posts

• List recent posts in WordPress (3)
• Custom Query: List WordPress Users (63)
• Useful custom functions for WordPress (61)
• Taking Advantage of Functions.php in Wordpress Themes (39)
• ScrnshotsRSS plugin 2.0 update (2)

— Inspired by the great idea of David Walsh’s jQuery topLink Plugin, I made a similar plugin but with two key differences, this one does not require you to add extra html markup or extra plugins to function. It will only work when JavaScript is turned on ( on purpose ), It’s easy to setup with only one line of code, and it works cross-browser nicely ( Tested: IE6-8, FF, Safari ). Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.

Related posts

• ScrnshotsRSS: Scrnshots.com Plugin For Wordpress (25)
• ScrnshotsRSS plugin 2.0 update (2)
• Lovely WordPress Plugins I use (4)
• Free Mini Calendar Icons Set (8)
• Free Daily Calendar Icons Set For CSS (17)

Current version: 1.1.4 7/31/09

These are a couple of it’s main features ( ver. 1.1.4 ):

* Multiform handler.
* Support for required fields.
* PHP email validation.
* Unobtrusive JavaScript function to pre-check form data ( 4KB file ).
* Lightweight, easy to use.
* Multilingual support.
* External configuration file that can reside outside the public folder.

HOW DOES IT WORKS?

It’s very simple, first there is a configuration file where you define all of your website forms, by this I mean form title, form fields, form required fields and the location of each form. Then there are some snippets you have to add to your form page/s and thats all. SimpleForm takes care of pre-cheking the form fields with JS and then validating them with PHP, if it’s valid then it will send the email to the configured email address and return the user to the form page with a success message or otherwise, with an error message.

INSTALLING THE SCRIPT

These are the necessary steps to have it up and running ( requires PHP 5 ):

1. Download SimpleForm ( ver 1.1.4 )
2. Open sf-config.php and edit the necessary info.
3. Upload sf-config.php to your host ( preferably outside the public folder ).
4. Open simpleform.php and edit the variable $PATH_TO_CONFIG_FILE ( on line 24 ) with the path from simpleform.php to sf-config.php ( leave empty if it resides on the same folder ).
5. Upload simpleform.php, simpleform.css and checkform.mini.js inside your public folder.
6. Open your form page/s and add the necessary code snippets.

EDITING THE CONFIGURATION FILE SF-CONFIG.PHP

# ------------------------------------------------------------ #
// SIMPLEFORM CONFIGURATION								      //
# ------------------------------------------------------------ #

/* GENERAL CONFIGURATION
/////////////////////////////*/

// The name of the website/client. Example: "My Website".
$aSettings["szFrom"] = "";							

// The email address that will receive the emails. Example: "me@myemail.com".
$aSettings["szRecipient"] = "";		

/* The email address that will be used to send the emails. To work properly this has to be a real account
configured on the same server of the site. Example: "noreply@mywebsite.com". */
$aSettings["szFromEmail"] = "";					    

/* FORMS CONFIGURATION
/////////////////////////////*/

/* The next step is to configure the Form/s.
   You can add as many as you want. */

$aForms = array(

	1 => array( 									// FORM ID: 1
		"szFormTitle" => "",						// FORM TITLE - Example: "Contact Form"
		"szFormURL" => "",							// FORM URL ( users will be redirected to this page )
		"szFormRequired" => array(					/* REQUIRED FIELDS ( array of name attributes ) */
			"name",
			"email",
		),
		"aFormFields" => array( 					/* LIST OF FORM FIELDS AND THEIR OUTPUT NAME
 													  All input fields coming from the form should go here.
													  The first value is the name attribute used and the second value
													  on the right the name displayed on the outputed data.

													  Any required field that contains the word "email" will have
													  it"s value validated as an email address. */
		   	"name" => "First Name",
			"email" => "E-mail",
			"work_email" => "Work Email",
			"phone" => "Telephone",
			"-sep1" => "This is a separator",		/* This is a separator. Any variable starting with the sign "-"
														will act as a content separator. */
			"color" => "Color Option",
			"comments" => "Comments",
			"-sep2" => "This is Another separator",
			"newsletter" => "Subscribe to our Newsletter?",
			"interested[]" => "Im interested in",
			/* add more */
			)
	),

	2 => array(										/* Form 2. Same as above */
		"szFormTitle" => "",
		"szFormRequired" => array(),
		"szFormURL" => "",
		"aFormFields" => array(
			/* add more */
			)
	),

	3 => array(										/* Form 3. Same as above */
		"szFormTitle" => "",
		"szFormRequired" => array(),
		"szFormURL" => "",
		"aFormFields" => array(
			/* add more */
			)
		),

	/* add more */
);

/* RESPONSE CONFIGURATION
/////////////////////////////*/

/* Response Messages: These are the variables that hold the messages
the system prints as response. You can modify them to suit your project needs. */

 // Form has been sent.
$aSettings["aMessages"]["szSubmitSucess"]  = "Your message has been sent succesfully. Thanks!";
// Missing fields.
$aSettings["aMessages"]["szMissingFields"] = "Please complete all required fields.";
// Unvalid email address.
$aSettings["aMessages"]["szUnvalidEmail"]  = "Please insert a valid email address.";
// Email not sent by system error.
$aSettings["aMessages"]["szSystemError"]   = "There was an error in the system. Please try again later. Thanks!";

/* ADVANCED CONFIGURATION
/////////////////////////////*/

// Name of the GET variable to pass response messages
define( "GET_NAME", "response");
// Debug mode ( prints email content, and system errors )
define( "DEBUG_MODE" , false );
/* Check if the domain of the submited email addresses exists.
False by default as it may bring problems with some servers. ) */
define( "CHECK_EMAIL_ADDRESS_DNS" , false );

INTEGRATING SIMPLEFORM WITH YOUR FORMS

Below you’ll find the things you need to do to your form page ( must be php file ) for SimpleForm to work. I also have included a full example at bottom.

A. Add Javascript and CSS files

Add simpleform.css and checkform.js ( or checkform.mini.js ) inside the <head> element:

	<link rel="stylesheet" href="simpleform.css" type="text/css" media="screen"/>
	<script type="text/javascript" src="checkform.mini.js"></script>
	

B. Define the path to the config file and Include simpleform.php in the document ( before your form/s ):

	<?php
	define( "CONFIG_PATH", "place/here/the/path/to/sf-congif/dir/" );
	require_once "simpleform.php";
	$sForm = new simpleForm();
	?>
	

C. Add SimpleForm Responses function

Prints the systems response and can reside anywhere on the document.

			<?php
 		   	// Example: <p class="message-box error">Please insert a valid email address.</p>
 		   	$sForm->handleMessage(); ?
 		   	>
		

Output example:

Please insert a valid email address.

D. Add SimpleForm Form function

This function generates the required hidden input fields for simpleForm to work. The value passed is the ID assigned to the current form in the configuration file. This function must reside in between the <form></form> elements.

 <?php
 //Prints necessary data for the form with the ID = 1
$sForm->printData(1);
?>

E. Edit the <form> attributes:

Point the form’s action attribute to simpleform.php and then add the checkform function to enable the js data pre-checking.

	<form action="simpleform.php" method="post" onsubmit="return checkform(this)">

The checkform() function supports an optional string parameter which alters the text you
want to display on the js alerts. The variable #name is provided as a wildcard for the field Name.

Examples:
“Please complete the field #name”
“The field #name is missing”
“Por Favor complete el campo #name”

				onsubmit="return checkform(this,'The field #name is missing')"
				

Full Example

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>SimpleForm Example</title>
			<link rel="stylesheet" href="simpleform.css" type="text/css" media="screen"/>
			<script type="text/javascript" src="checkform.mini.js"></script>
		</head>
		<body>

			<?php
			define( "CONFIG_PATH", "../secure/" );

			require_once "simpleform.php";
			$sForm = new simpleForm();

			$sForm->handleMessage();
			?>

			<form action="simpleform.php" method="post" onsubmit="return checkform(this)">
		 	<fieldset>
		 	<?php $sForm->printData(1); ?>
				<legend>Personal Details:</legend>
		        <label for="name" >Name</label>
		        <input name="name" id="name" type="text" value="" />
		        <label for="email">Email <span class="required">(required)</span></label>
		        <input name="email" id="email" type="text" value="" />
				<label for="work_email">Work Email</label>
		        <input name="work_email" id="work_email" type="text" value="" />
				<label for="phone">Telephone <span class="required">(required)</span></label>
		        <input name="phone" id="phone" type="text" value="" />
		        <label for="color">Color Options: <span class="required">(required)</span></label>
		        <select name="color" id="color">
					<option value="-">Choose a color</option>
					<option value="Red">Red</option>
					<option value="Green">Green</option>
					<option value="Blue">Blue</option>
				</select>
		        <label for="comments">Comments</label>
		        <textarea name="comments" id="comments" rows="10" cols="50"></textarea>
		        </fieldset>
		        <fieldset class="radio">
		            <legend>Subscribe to our Newsletter? <span class="required">(required)</span></legend>
		            <label><input type="radio" name="newsletter" value="Yes" /> Yes</label>
		            <label><input type="radio" name="newsletter" value="No" /> No</label>
		        </fieldset>
				<fieldset class="checkbox">
		            <legend>Im interested in: <span class="required">(required)</span></legend>
		            <label><input type="checkbox" name="interested[]" value="Arts" /> Arts</label>
					<label><input type="checkbox" name="interested[]" value="Science" /> Science</label>
					<label><input type="checkbox" name="interested[]" value="Sports" /> Sports</label>
		        </fieldset>

		        <p><button type="submit">Submit this!</button></p>
		    </form>

		</body>
		</html>

RELEASE NOTES

ver 1.1.4 – Another Email Bug fixed ( Courtesy of megabonez ).
ver 1.1.3 – Email Bug fixed ( Mayor thanks to Jim from cpscreative.com ).
ver 1.1.2 – Minor Bugs fixed.
ver 1.1.1 – Optional Email DNS checking.
ver 1.1 – Easier path deployment, Configurable response variable name, Debug function and minor bug fixes.
ver 1.0 – First Release.

Related posts

• PHP Contact form script (4)
• WordPress: Output Clean and Valid HTML Content (10)
• Ternary Conditionals in PHP (5)
• ScrnshotsRSS plugin 2.0 update (2)
• Manipulate images from WordPress post’s content with Regular Expressions (24)

function is_subpage( $iID = null )
	{
		global $post, $wpdb;

		if ( is_page() AND isset( $post->post_parent ) != 0 )
		{
			$aParent = $wpdb->get_row( $wpdb->prepare( "SELECT ID FROM $wpdb->posts WHERE ID = %d AND post_type = 'page' LIMIT 1", $post->post_parent ) );

			if ( is_int( $iID ) > 0 )
				if ( $aParent->ID == $iID ) return true; else return false;
			else
				if ( $aParent->ID )	return true; else return false;

		}
		else
		{
			return false;
		}
	}

/* EXAMPLE */

if ( is_page('producs') OR is_subpage( 8 ) )
{
  //do something
};

Cheers!

Related posts

• WordPress: Output Clean and Valid HTML Content (10)
• List recent posts in WordPress (3)
• Custom Query: List WordPress Users (63)
• Correct way of adding CSS and Javascript references to WordPress themes (10)
• Useful custom functions for WordPress (61)

GOALS:

There were a couple of things I had in mind when creating this form, first of all the code would have to be valid XHTML, clean semantic and well formated. This would need to have a good balance between accessibility and flexibility to make it portable and easy to style. This way you have more chances to easily copy and modify to adjust to different needs.

The Markup:

Beyond the input elements XHTML gives us a set of tags to build our forms in an accessible way. I like to use Fieldsets, Legends and Labels. To display nicely aligned radio and checkbox buttons I use classes in the fieldsets: .checkbox and .radio. To style the overall form correctly I use the class .cleanform.

<form class="cleanform" action="#">
	<fieldset>
        <legend>Personal Details:</legend>
        <label for="name" >Name <span class="required">(required)</span></label>
        <input name="name" id="name" type="text" value="Example text." />
        <label for="email">Email <span class="required">(required)</span></label>
        <input name="email" id="email" type="text" value="Example text." />
        <label for="inquiry">Inquiry</label>
        <select name="inquiry" id="inquiry">
            <option value="comment">Comment</option>
            <option value="suggestion">Suggestion</option>
            <option value="feedback">Feedback</option>
        </select>
        <label for="comments">Comments</label>
        <textarea name="comments" id="comments" rows="10" cols="50">Example text.</textarea>
    </fieldset>
    <fieldset class="radio">
        <legend>Subscribe to my Newsletter? <span class="required">(required)</span></legend>
        <label><input type="radio" name="newsletter" value="Yes" /> Yes</label>
        <label><input type="radio" name="newsletter" value="No" /> No</label>
    </fieldset>
	<fieldset class="checkbox">
        <legend>Aditional information</legend>
        <label><input type="checkbox" name="foo" value="Foo yes" /> Foo</label>
        <label><input type="checkbox" name="bar" value="Bar yes" /> Bar</label>
    </fieldset>
    <p><button type="submit">Submit Form</button></p>
</form>

As you may see its a very simple and clean markup, I group related form elements in fieldsets and make use of the legend and label elements.

I also have the required labels. A common practice for this is to add an asterisk in red, I am not against that but I prefer to use the word “required” when possible. To achieve this I use the span element with a class named .required.

Optionally I add a little intro to make the form more intuitive:

<div class="formInfo">
    <h2>Contact me Form</h2>
    <p>Please complete the following form to reach me. Thank you!</p>
</div>

The CSS

CSS code for the cleanform class and its elements:

/* CLEAN FORM
/////////////////////////////*/

/* General */

.cleanform {
	font-size:1em;
	width:40em;
	color:#1b1b1b;
	text-align:left;
	margin:1em auto
}

/* Elements */

.cleanform  label,.cleanform legend{
	padding:0;
	margin:0.3em 0
}

.cleanform fieldset{
	padding:0.7em;
	border:1px solid #ddd;
	margin:0 0 0.5em 0
}

.cleanform label {
    font-weight:bold
}

.cleanform fieldset input {
    width:70%;
    line-height:1.5em;
	padding:0.15em
}

.cleanform .radio input,
.cleanform .checkbox input {
    width:auto;
    border:none;
    margin:0 1.5em 0 0
 }

.cleanform input, .cleanform textarea, .cleanform select {
    display:block;
    margin-bottom:1em;
    font-size:1em;
    border:1px solid #bbb;
    padding:0.15em;
    margin-right:1em
 }

.cleanform .radio label, .cleanform .radio input,
.cleanform .checkbox label, .cleanform .checkbox input {
    display:inline;
    margin:0 1.5em 0 0
}

.cleanform .radio input, .cleanform .checkbox input {
    margin:0 0.3em 0 0
}

/* Button */

.cleanform button {
	margin:0.3em 0;
	border:1px solid #ccc;
	background-color:#eee;
	font-size:1em;
	cursor:pointer;
	padding:0.5em
}

.cleanform button:hover {
	background-color:#e6efc2;
	border:1px solid #c6d880;
	color:#529214
}

.cleanform button:active {
	background-color:#333;
	color:white;
	border:1px solid #000
}

/* information */

.cleanform .formInfo {
    margin-bottom:1em;
    padding-bottom:0.5em;
    border-bottom:0.1em solid #ddd
}

.cleanform .formInfo h2 {
	color:#00889e;
	font-weight:bold;
	font-size:1.2em;
	margin-bottom:1em
}

.cleanform .formInfo p{
	text-align:justify
}

.cleanform .required {
	color:#ff3838;
	font-weight:bold;
	font-size:0.8em
}

With the styles above you have a clean, accessible and valid foundation from where you can style the form accordingly to your project needs.

Conclusion

I hope you found it useful and of course I suggest you to always choose the method/solution that you feel most comfortable with. Critics and comments are welcomed,
Cheers!

This method has been tested in: IE6, IE7, Firefox 3 ( Mac & PC ), Google Chrome, Opera ( Win ) and Safari 3.1 ( Mac ).

Related posts

• From the lab: CSS Navigation Bar Code Generator (9)
• Daily Calendar Dates With CSS (6)
• CSS Text based navigation bar with images (35)
• WordPress: Output Clean and Valid HTML Content (10)
• SimpleForm: Easy PHP multi-form email handler (48)

— This web tool will help you generate the code you need to build a navigation bar with the technique described in this article: CSS Text based navigation bar with images.

The result is a valid and accessible text based imaged navigation bar with one sprite image, XHTML and CSS. I have included a short video as well to showcase the process.

Please let me know if you have any comment. You can download the generated code in a zip file.

Hope you find it useful. Enjoy!

Related posts

• CSS Text based navigation bar with images (35)
• Daily Calendar Dates With CSS (6)
• Clean Accessible Form Foundation (33)
• WordPress: Output Clean and Valid HTML Content (10)
• Message Boxes with CSS (10)