Current version: 1.1 3/4/10

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

RELEASE NOTES

ver 1.1 – Improvements to configuration conveniences. *
ver 1.0 – First Release.

* Big thanks to Rémy Tourbiez for this contribution to the code.

This is a post from: Matt Varone

UItoTop jQuery Plugin

Somewhat related posts

• ScrnshotsRSS: Scrnshots.com Plugin For Wordpress (25)
• ScrnshotsRSS plugin 2.0 update (2)
• Free Mini Calendar Icons Set (9)
• Free Daily Calendar Icons Set For CSS (19)
• Dynamic To Top WordPress Plugin (11)

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.

This is a post from: Matt Varone

SimpleForm: Easy PHP multi-form email handler

Somewhat related posts

• PHP Contact form script (5)
• WordPress: Output Clean and Valid HTML Content (10)
• Ternary Conditionals in PHP (5)
• ScrnshotsRSS plugin 2.0 update (2)
• Query Post And Pages With Multiple Meta Values (3)

— As soon as you drop tables you find that making nicely formated and accessible forms is not that simple. There are many discussed methods to achieve this and there will always be something to argue about them. Having said that I present you here with a solution that in most of the cases works for me. I hope you find this useful.

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. If the form requires multiple colomun-aligned checkboxes or radio buttons I use the class .multiple. 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>
	<fieldset class="checkbox multiple">
		<legend>Multiple Checkboxes</legend>
		<label><input type="checkbox" name="foo2" value="Foo yes" /> Foo</label>
		<label><input type="checkbox" name="bar2" value="Bar yes" /> Bar</label>
		<label><input type="checkbox" name="foo3" value="Foo yes" /> Other</label>
		<label><input type="checkbox" name="bar3" value="Bar yes" /> Example</label>
		<label><input type="checkbox" name="foo4" value="Foo yes" /> Multiple</label>
		<label><input type="checkbox" name="bar4" value="Bar yes" /> Checkboxes</label>
		<label><input type="checkbox" name="foo5" value="Foo yes" /> More</label>
		<label><input type="checkbox" name="bar5" value="Bar yes" /> Select</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
}

.cleanform .multiple label{
	float:left;
	width:29%;
	overflow:hidden;
	padding-left:1px
}

.cleanform .multiple input {
	cursor:pointer
}

/* 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.

This is a post from: Matt Varone

Clean And Accessible Form Foundation

Somewhat related posts

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

— 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

From the lab: CSS Navigation Bar Code Generator

Somewhat related posts

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

if ($iExample == 1)
{
    $bVariable = true;
}
else
{
    $bVariable = false;
}

In the example above, if the statement is true then, it will set $bVariable to true or else it will set it to false. This is a regular conditional statement where if a condition is true something happens or else (if the condition is false) other thing happen. Conditional statements like that could be easily handled with a ternary conditional:

$bVariable = ($iExample == 1) ? true : false;

As you can see the syntax of the Ternary Conditional is pretty simple and looks good as its fits all in one line.

Variable = (condition) ?  its true : its false;

I hope you find this post useful, Cheers!

This is a post from: Matt Varone

Ternary Conditionals in PHP

Somewhat related posts

• WordPress: Output Clean and Valid HTML Content (10)
• SimpleForm: Easy PHP multi-form email handler (54)
• ScrnshotsRSS plugin 2.0 update (2)
• Query Post And Pages With Multiple Meta Values (3)
• PHP Contact form script (5)

PREPARING THE XHTML

I’m gonna simulate we are doing this for a blog:

<div class="post">

     <div class="date month-09">10th</div>
     <h2>This is my Post Title</h2>        

     <div class="entry">
             <p>&amp;amp;mdash;  Lorem ipsum dolor sit amet, consectetur...</p>
     </div>

</div>

Note that I added a .month-09 class to the date div. In most common scenarios this class would come from a CMS or PHP function and eventually help to style the div with the correct month background image:

The CSS

.date {
    float:left;
    display:block;
    font-size:11px;
    text-align:center;
    line-height:45px;
    width:32px;
    height:45px
}

.date.month-01 { background: url(images/jan.gif) no-repeat 0 0 }
.date.month-02 { background: url(images/feb.gif) no-repeat 0 0 }
.date.month-03 { background: url(images/mar.gif) no-repeat 0 0 }
.date.month-04 { background: url(images/apr.gif) no-repeat 0 0 }
.date.month-05 { background: url(images/may.gif) no-repeat 0 0 }
.date.month-06 { background: url(images/jun.gif) no-repeat 0 0 }
.date.month-07 { background: url(images/jul.gif) no-repeat 0 0 }
.date.month-08 { background: url(images/aug.gif) no-repeat 0 0 }
.date.month-09 { background: url(images/sep.gif) no-repeat 0 0 }
.date.month-10 { background: url(images/oct.gif) no-repeat 0 0 }
.date.month-11 { background: url(images/nov.gif) no-repeat 0 0 }
.date.month-12 { background: url(images/dec.gif) no-repeat 0 0 }

The CSS above is pretty clear, first I float the div with the .date class, display it as a block and apply desired dimensions and font size. Then, as mentioned before, I assign the correct background image based on the month number class.

WORDPRESS

If you are using WordPress you can use the_time() function to get the correct date and month to display:

<div class="post">

        <div class="date month-<?php the_time('m'); ?>"><?php the_time('dS'); ?></div>
        <h2><?php the_title(); ?></h2>

        <div class="entry">
            <?php the_content(); ?>
        </div>

</div>

Conclusion

And thats it! Simple technique that looks good. I hope you find the article useful, Cheers!

This technique has been tested in:
IE6, IE7, Firefox 3 ( Mac/PC ), Google Chorme ( Win ) and Safari ( Mac/PC ).

This is a post from: Matt Varone

Daily Calendar Dates With CSS

Somewhat related posts

• From the lab: CSS Navigation Bar Code Generator (11)
• CSS Text based navigation bar with images (39)
• Message Boxes with CSS (10)
• Dynamic To Top WordPress Plugin (11)
• CSS Reusable Classes (7)