Posted on April 30, 2009, Filled under JavaScript, PHP, 
Bookmark it
This is a PHP Contact Form having an Image Verification (Captcha) and fields’ validator (PHP & JavaScript). It will work best with the right web hosting provider.
First, let’s create the page where the data will be parsed:
form.php
<?php
include_once 'common.php';
include_once 'process.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
function new_captcha()
{
var c_currentTime = new Date();
var c_miliseconds = c_currentTime.getTime();
document.getElementById('captcha').src = 'image.php?x='+ c_miliseconds;
}
function validate(field_name, field_value)
{
switch (field_name)
{
// E-MAIL
case "email":
var email_enter = "<?php echo $errors['email_enter']; ?>";
var email_not_valid = "<?php echo $errors['email_not_valid']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("email_status").innerHTML = '<div class="field_error">'+ email_enter +'</div>';
}
else
{
if(!regIsEmail(field_value))
{
document.getElementById("email_status").innerHTML = '<div class="field_error">'+ email_not_valid +'</div>';
}
else
{
document.getElementById("email_status").innerHTML = '';
}
}
break;
// NAME
case "name":
var name_enter = "<?php echo $errors['name_enter']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("name_status").innerHTML = '<div class="field_error">'+ name_enter +'</div>';
}
else
{
document.getElementById("name_status").innerHTML = '';
}
break;
// SUBJECT
case "subject":
var subject_enter = "<?php echo $errors['subject_enter']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("subject_status").innerHTML = '<div class="field_error">'+ subject_enter +'</div>';
}
else
{
document.getElementById("subject_status").innerHTML = '';
}
break;
// MESSAGE
case "message":
var message_enter = "<?php echo $errors['message_enter']; ?>";
if (field_value == null || field_value == "")
{
document.getElementById("message_status").innerHTML = '<div class="field_error">'+ message_enter +'</div>';
}
else
{
document.getElementById("message_status").innerHTML = '';
}
break;
}
return true;
}
function regIsEmail(field_value)
{
var reg = new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");
return reg.test(field_value);
}
-->
</script>
</head>
<body>
<center>
<h1>Contact Us</h1>
<div align="left" style="width: 500px;">
<?php
if(isSet($status))
{
echo $status;
}
if(!$mail)
{
?>
<form name="register" method="post" action="">
<span id="name_status"><?php if($error['name'] != "") { ?><span class="field_error"><?php echo $error['name']; ?></span><?php } ?></span>
<label>Name</label><input id="name" onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" size="30" type="text" name="name" value="<?php echo $name; ?>"><br />
<span id="subject_status"><?php if($error['subject'] != "") { ?><span class="field_error"><?php echo $error['subject']; ?></span><?php } ?></span>
<label>Subject</label><input id="subject" onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" size="30" type="text" name="subject" value="<?php echo $subject; ?>"><br />
<span id="message_status"><?php if($error['message'] != "") { ?><span class="field_error"><?php echo $error['message']; ?></span><?php } ?></span>
<label>Message</label><textarea onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" id="message" name="message" rows="5" cols="31"><?php echo $message; ?></textarea><br />
<span id="email_status"><?php if($error['email'] != "") { ?><span class="field_error"><?php echo $error['email']; ?></span><?php } ?></span>
<label>Your E-mail</label><input onchange="validate(this.id, this.value);" onblur="validate(this.id, this.value);" id="email" size="30" type="text" name="email" value="<?php echo $email; ?>"><br />
<label> </label><img border="0" id="captcha" src="image.php" alt=""> <a href="JavaScript: new_captcha();"><img border="0" alt="" src="images/refresh.png" align="bottom"></a><br />
<div class="field_error"><?php if($error['security_code'] != "") echo $error['security_code']; ?></div>
<label>Security Code</label><input size="13" type="text" name="security_code"><br />
<label> </label><input class="button" type="submit" name="submit" value="Submit"><br />
</form>
<?php
}
?>
</div></center>
</body>
</html>
Read the rest of this entry…
Posted on April 29, 2009, Filled under Design, Bookmark it
Choosing a color palette for your website may be one of the most important decisions you make when starting a new website. Believe it or not but the colors you choose could dictate the real success of your site when and if it becomes popular. If you choose really poor colors then people will typically tend to turn away and leave. Hence try to choose a palette that is inspiring and makes visitors come back. There are a number of factors to take into consideration when choosing a color palette. First good tip is to look at what other, successful websites, are doing with their choices of website colors? Check out 3 to 5 other sites (preferably in a niche related to yours) and note the color design parts that appeal you the most. Do you like bright and vibrant colors, Earthly tones (blue, mild brown to green) or maybe even pastel textures? Don’t be afraid to put a little of your own taste and imagination in your site. It is a reflection of you and it has to be something you believe in as well.
Read more from this entry…
Posted on April 26, 2009, Filled under HTML & CSS, Bookmark it
Breadcrumbs are a form of website navigation that keep track on the path followed by a website visitor. They are sequential links telling the user the location of the page within the website (example: category / subcategory / sub-sub subcategory / product).
Here is a list of tutorials that will give you an idea of how you can setup a CSS based breadcrumb on your site:
Simple scalable CSS based breadcrumbs
CSS Breadcrumbs from Dynamic Drive
Create apple.com-like breadcrumb using simple CSS
CSS Design: Taming Lists – Breadcrumb trails
Posted on April 25, 2009, Filled under AJAX, JavaScript, jQuery, Bookmark it
![Shows up when the user is going to click close [X] button](http://www.bitrepository.com/wp-content/uploads/2009/04/exit-modal-box.jpg "exit-modal-box")
Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.
To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.
Read the rest of this entry…
Posted on April 24, 2009, Filled under AJAX, JavaScript, Bookmark it
Do you need to integrate an AJAX Login Form into a Modal Box? This tutorial will show you how you can do that using the powerful library JQuery. The modal box that I’ve chosen is a JQuery Plugin written by Eric Martin.
Let’s start making the html file where the modal box is triggered:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Modal Ajax Login Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.simplemodal.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>
<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />
<link type='text/css' href='style/basic.css' rel='stylesheet' media='screen' />
</head>
<body>
Click the login link to launch the modal box:<br />
<span style="font-size: 15px;">
<a id="login_link" href="#">LOGIN</a> | MEMBERS AREA</a>
</span>
<div id="login_form" style='display:none'>
<div id="status" align="left" style="margin-top: 20px; width: 310px;">
<center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1>
<div id="login_response"><!-- spanner --></div> </center>
<form id="login" action="javascript:alert('success!');">
<input type="hidden" name="action" value="user_login">
<input type="hidden" name="module" value="login">
<label>E-Mail</label><input type="text" name="email"><br />
<label>Password</label><input type="password" name="password"><br />
<label> </label><input value="Login" name="Login" id="submit" class="big" type="submit" />
<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif"> Processing...
</div>
</form>
</div>
</div>
</body>
</html>
Read more from this entry…
Posted on April 12, 2009, Filled under JavaScript, Bookmark it
Do you want to change the default look of your form elements? Checkout the following scripts that will help you to do that! Some of the libraries used to stylish the inputs are JQuery and MooTools.
prettyCheckboxes is a script useful if you want to have a consistent look for the checkboxes and radio buttons of your forms. The usability of the inputs remain the same after you apply the new effect.
[Go to Project Page | View Demo]
FancyForm is a powerful and flexible checkbox replacement script for your classical HTML Input Checkboxes and Radios.
A quick feature list:
- Quick Setup (just 2 lines or markup are required)
- Has extendibility (many customization options)
- Degrades gracefully (forms are working on old browsers)
[Read more]
Tips and tricks for accessible stylish HTML controls is a tutorial that shows you how to create stylish form buttons, checkboxes and radio buttons. A simple PHP Helper Script is provided that automatically generates the code.
[Go to Project Page | View Demo]
Custom Form Elements is a UI library that enhances checkboxes, radio buttons, input file uploads, text inputs, textareas, selects, submits, resets & images.
Features include:
- Modular and small in size
- CSS Customizable
- Unobstrusive
- Maintains usability and accessibility of form elements
- Supports custom events
- Enable sliding doors CSS Technique for your text fields/textarea
- Select all / Deselect all functionality to specified groups of checkboxes
[Go to Project Page | View Demo]
Posted on April 11, 2009, Filled under jQuery, MooTools, Bookmark it
Are you looking to setup a carousel on your website? Checkout this list!
The YUI Carousel Control is an excellent tool if you need to offer your website’s a way to browse images/content arrayed vertically or horizontally in an overloaded page region. Some of the featured provided by this awesome library include:
- Circular Carousel
- Partial revealing previous and next items
- Usage of both images and text within an item
- AJAX usage for deferred loading of items
- Paginator
- Usage with the ARIA plugin
Read more from this entry…
Posted on April 3, 2009, Filled under Photoshop, Bookmark it
Would you like to add rounded corners to your images? Here is a list of tutorials that will help you to do that using one of the most popular graphics editing program: Adobe Photoshop.
1. Round Corners in Photoshop from Website Magazine – A complete step by step tutorial with screenshots that will guide you through the whole process of creating rounded edge corners for rectangles and squares.
2. Tutorial: Photos with Rounded Corners using Photoshop
This is a short, yet very good tutorial that teaches you how to add rounded corners to photos using an easy and flexible method: the clipping mask.
3. Fast rounded corners in Photoshop
This fast Photoshop CS tutorial helps you to create nice and smooth corners.
Read more from this entry…
