Current version: 1.1.3 7/13/09

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

* 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.3 )
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.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.

This is a post from: Matt Varone

Related posts

• PHP Contact form script (4)
• Ternary Conditionals in PHP (5)
• ScrnshotsRSS plugin 2.0 update (2)
• Manipulate images from WordPress post’s content with Regular Expressions (22)
• List recent posts in WordPress (3)

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!

This is a post from: Matt Varone

Related posts

• List recent posts in WordPress (3)
• Custom Query: List WordPress Users (50)
• Correct way of adding CSS and Javascript references to WordPress themes (10)
• Useful custom functions for WordPress (55)
• Ternary Conditionals in PHP (5)

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

This is a post from: Matt Varone

Related posts

• From the lab: CSS Navigation Bar Code Generator (9)
• Daily Calendar Dates With CSS (6)
• CSS Text based navigation bar with images (30)
• SimpleForm: Easy PHP multi-form email handler (41)
• PHP Contact form script (4)

— 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!

This is a post from: Matt Varone

Related posts

• CSS Text based navigation bar with images (30)
• Daily Calendar Dates With CSS (6)
• Clean Accessible Form Foundation (32)
• Message Boxes with CSS (10)
• CSS Reusable Classes (7)

Example

Same way as you use is_page, is_home, etc.

<?php if (have_posts()) : ?>

	<?php while (have_posts()) : the_post(); ?>

		<?php if ( is_subpage() ): ?>
			<p> This is a subpage </p>
		<?php endif ?>

	<?php endwhile; ?>

The Function

function is_subpage()
{
	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 ( $aParent->ID ) return true; else return false;
	}
	else
	{
		return false;
	}
}

Im not sure why WordPress didn’t include a function like this by default, i hope you find it useful.
Cheers!

This is a post from: Matt Varone

Related posts

• ScrnshotsRSS plugin 2.0 update (2)
• PHP Contact form script (4)
• List recent posts in WordPress (3)
• Custom Query: List WordPress Users (50)
• WordPress SEO: Control Search Engines (11)

Why you should control search engines

It’s very important to know what and how you want search engines to index your site, if you don’t take the time to do it you are relying on them to “figure it out” for you, and that is not good. In a default WordPress installation you get different instances of your content repeated trough the site. For example take a post. It will appear in the homepage, in it’s single version, listed under a category, in the author pages, in search result, etc. Are you comfortable having duplicated content indexed and letting Search Engines pick/guess which version of it is the one you consider the most relevant? I bet you wont. Thats why it’s good to take this into consideration.

What to index

There’s a lot of dicussion around the web of what you should and shouldn’t index. Unfortunately for us there isn’t one solution that will fit perfectly for all sites, to achieve the best results it will usually require planning ahead and even doing some experimenting and tweaking on the road. The type of content, the blog structure even the theme structure and its elements are things that affects these plans and should be taken into consideration prior making a decision. For example, not all themes will always show duplicate content. If your theme category pages show excerpts of the content that you previously took the time to write, then it certainly is good to index that page. Same thing could happen with tags, author and archives pages as well. If those provide different or extra content then why would you not index them.

How can you control this?

Create a robots.txt file

Im sure most of you know what a robots.txt file is for. For those who don’t know, it’s basically a file that goes in the root folder of your site with instructions of what specific files or directories you want to allow or disallow Search Engines to index. Here is a sample of a WordPress robots.txt file:

User-agent: *
Disallow: /tag
Disallow: /author

To prevent duplicated content, in the sample above I decided to disallow the indexing of everything under /tag and /author. Remember not all themes/sites should have these same instructions, you have to choose carefully what you’ll want to remove. As a live example you can see my robots.txt file. If you feel uncomfortable editing files in your server there’s a nice plugin to create this file from within the Admin panel.

Add the correct robots meta tags to your theme pages

If you feel you want to have a more specific control, or if you don’t trust enough your robots.txt file, you can always opt to use the robots meta tag. You can use this tag to tell Search Engines not to index the content of a page, and/or not scan it for links to follow. Joost de Valk has put together a great plugin to handle this easily from within WordPress control panel.

Conclusion

Your site might had been loosing relevance in search results because of this so I encourage you to think about it and give it the time it deserves. If you have any tip or suggestion feel free to add it in the comments.

Hope you enjoyed,
Thanks!

This is a post from: Matt Varone

Related posts

• Custom Query: List WordPress Users (50)
• WordPress Textmate bundle (3)
• Using Stacks for Screenshots (0)
• Useful custom functions for WordPress (55)
• Taking Advantage of Functions.php in Wordpress Themes (38)