Yup! Lots of ideas, but no step-by-step fix to the problems that was occurring with this phone. I spent around 14 hours on this phone in 2 days trying to get it up and running. What really annoyed me the most, is it's not really hard to get it up and working, after around 8 hours youll probally get the hang of it on your own, it's just when you’re not a expert with IP phones like myself, it can be very difficult to work with.

If you have this phone you probably will no the problems that comes up, if you fix something you might find something else will be the cause for it not working. Hopefully in this post you will get it back up and running with the latest firmware and how I managed to recover the phone.

TERMS: Before you start, I just want to let you know that I am not an expert with IP phones, nor am i cisco certified, so if anything happens to your phone or you BRICK your phone for trying anything of these steps provided by me, I’m not responsible for it. You’re using my information at your own risk.

How to fix the blank screen issue or stuck on upgrading issue.

I'm going to start off with the hard reset option. If you have done this option using code "3491672850*#" and it's not booting back up and is stuck at a blank screen. Don't worry about it! It's looking for the firmware. If you are stuck at the upgrading screen, then it's the same, its just looking for the firmware to upgrade the phone.

DO NOT TURN OFF THE PHONE!

I just want everyone to know, you might think the phone is dead if its not doing anything, but sometimes it is and it's not dead, so don't keep unplugging it and plugging it back in, as this could brick the phone.

1. Alright, let’s get started. First of all, you need to connect the phone directly to your computers Ethernet port. Unplug your Ethernet from your PC/Modem/router and connect the Ethernet directly to the phone then the other end straight to your computers Ethernet port from the phone. Yes, this will cause your computer to have no internet, so Make sure you got all the firmware files first and everything you need, scroll down this post. Also make sure the power cord is plugged in the phone too.

2. Next you will need to assign an IP address to the computer. Control Panel > Networking & Internet > Network and Sharing Centre > Change Adapter settings (On the left). Find your Local area connection (Ethernet). Right click and select 'properties'. Then Double click on IPv4.

Use the same settings:

Click OK and OK again.

If you did this correctly, you will see at the bottom right hand corner a network adapter with a yellow explanation icon through it.

3. Now you have the IP assigned on '192.168.1.108' the Next step, you need to have a TFTP server running, Note: i'm not going to provide support for MAC/linux. Sorry about that, it's just for this post, im using windows. I'm using TFTPD32 on a Windows 7 box. I recommend using tftpd32 or solarwinds. For this post im going to use TFTPD32 and i will be using Windows 7 32-bit.

4. Once you have downloaded/installed TFTPD32, open the program found on the desktop.

5. Now you have the program open, same as the screenshot above. Click on 'Settings' in tftpd32. This will open a new tab. Use the same information below on all 2 screenshots found below. Global & DHCP Tab.

Click OK

6. Once you have the settings saved. You'll need to configure a directory for the phone to find the firmware files. Again, this is done in the Settings tab and on the main program. Create a Folder on your Desktop called Firmware. Browse to the folder.

Again, Navigate to the settings tab and select TFTP tab Do the same for the Base Directory. Then click OK. Once your back on the main TFTPD32 program, (Not settings tab) Select Log Viewer, on the main TFTPD32 Window.

Now your up and running and ready to connect to the phone. Here you can see the logs between the connections from the TFTPD Server and the Phone. You might see some information, this is because the phone is trying to connect.

Firmware Files

If you don't have the firmware files, you will need to navigate to cisco website CLICK HERE (Products > Cisco Unified IP phone 7900 Series > Phone version. You'll need to signup to download the files. Alternatively, you can visit HERE to get older versions of the files. SCCP & SIP.

Once you have located the correct firmware and phone version, put the firmware files in the Firmware folder on your Desktop. Download the cop.sgn & the zip file. Extract all the files from the zip into the Firmware folder on the Desktop, also put the cop.sgn file in there too.

You should have something that looks like this in your firmware folder:

Getting the phone to communicate with the TFTP Server

Now you have got all the files in the correct place, the IP is set and the Ethernet is plugged from the phone into the computer port. You're ready to get the phone connecting to the TFTPD Server.

Next, complete these steps:

1. Unplug the power cable from the phone, and then plug in the cable again.

   The phone begins its power up cycle.

2. Immediately press and hold # and while the Headset, Mute, and Speaker buttons begin to flash in sequence, release #.

3. Press 123456789*0# within 60 seconds after the Headset, Mute, and Speaker buttons begin to flash.

Now the phone will try to connect with the TFTPD Server on your computer. If you have a blank screen, don't worry. This is normal. If you are stuck at the upgrading… that’s fine too. It's all about time with this phone, don't unplug it and plug it back in, just be patient.

On the TFTPD Server on the Log viewer, you should see some information starting to come up. I'll provide you some examples below, since I no longer have this phone I’m not going through the process with you as I’m writing this post, so ill provide some screenshots from the internet below.

Example (Found from the internet):

Another example (Connected) – Found from the intertnet:

If the TFTPD32 server is successfully connected to the phone and it's located the firmware, you will see the TFTPD server transferring files.

Once done, your phone will reboot and the firmware will be loaded back onto the phone. If you're having issues getting the TFTPD32 to transfer the firmware, see the bottom of this post on some troubleshooting methods to help you.

__________________________________________________

Troubleshooting:

Most people will be looking through this troubleshooting methods as I bet most didn't succeed above, I was like you once, stuck in a horrible position trying to get it to work. Although, I’m sorry to say there isn’t much help i can give you in the post, but I can provide information, I advise you to post a comment on the comments below to get further help from me and other people. But for now, ill provide you with some methods that could be causing the issue on not transferring the firmware.

Method 1

If you are getting some information on the log viewer on TFTPD32 but the files are not transferring, then it could be the firmware. If you are using the latest firmware from cisco then I recommend you to click here and try another firmware. Version 8.2 or 8.0. Keep going down. 8.3 > 8.2 > 8.1 > etc. Till the phone does eventually communicate with the TFTPD32 server. Remember, don't keep clicking off TFTPD Server, don't unplug the phone, give it at least 10 minutes to properly communicate.

Method 2

If you are not getting any information at all, then there's something wrong. Repeat the steps again above. Make sure you haven't missed anything when going through the process. Make sure you are on the Log View Tab on TFTPD32. Not tftp client, DCHP Server, etc.

Method 3

Sometimes the Windows firewall can interrupt the connection between the TFTPD32 server and the phone, I recommend you to turn off your Windows firewall. Don't allow a program; just turn the firewall completely OFF.

Method 4

If you have tried all the solutions above, tried the firmware, checked all the settings. Click off TFTPD32 server and Re-open it. Click settings and make sure all of the IP information is correct again. Click here

Method 5

If you are still having issues, turn off the phone and repeat all the steps again, you need to make sure on the log viewer there is information coming up. If no information is coming up then there is a definite problem between your phone and your computer/TFTP Server. If you are getting information, it should look something like this example below.

Rcvd DHCP Rqst Msg for IP 0.0.0.0, Mac 00:21:55:D5:B2:FC [14/03 01:11:58.234]
Previously allocated address 192.168.178.201 acked [14/03 01:11:59.750]
Connection received from 192.168.178.201 on port 49152 [14/03 01:11:59.781]
Read request for file <term65.default.loads>. Mode octet [14/03 01:11:59.781]
Using local port 4591 [14/03 01:11:59.781]
3596 Request 2 not processed [14/03 01:11:59.796]
<term65.default.loads>: sent 2 blks, 642 bytes in 0 s. 0 blk resent [14/03 01:11:59.859]
Connection received from 192.168.178.201 on port 49153 [14/03 01:12:00.765]
Read request for file <term65.default.loads>. Mode octet [14/03 01:12:00.765]
Using local port 4592 [14/03 01:12:00.765]
<term65.default.loads>: sent 2 blks, 642 bytes in 0 s. 0 blk resent [14/03 01:12:00.828]
Rcvd DHCP inform Msg for IP 192.168.178.200, Mac 00:13:A9:3B:CA:17 [14/03 01:16:00.203]
Rcvd DHCP inform Msg for IP 192.168.178.200, Mac 00:13:A9:3B:CA:17 [14/03 01:16:03.218]

If you have the same information as above, I recommend you to check another firmware version, i had the same information above on the log viewer and I tried different firmware version, i think it was 8.2.1 and the files uploaded to the phone correctly. If it's not reading the firmware files, search on Google for help on the issues you’re having, search the information what’s coming up in the Log viewer and see if there is any other fixes found. You might find other users are having the same problem as you and there is a fix for it.

If you are still having issues after looking everywhere, post a comment below and i will try my best to help you. I hope this information helped you a little on where to get started. Best of luck!

Below you can find 10 Hand picked websites which have been hand picked from the internet. Click the image to be taken for the wonderful browsing experience of jQuery, javascript, html and CSS.

1. Paul J. Noble

4. Hard Craft

iPad Cases, iPhone Cases, MacBook Sleeves and Leather Laptop Bags Handmade from Über Premium Vegetable Tanned Leather and 100% Wool Felt.

5.  Thomas Birke Photography

birke.net is the online photography portfolio of Thomas Birke, Berlin based urban Photographer. I showcase my freelance as well as my non commercial

6. Mustache

Mustache – kreativt digitalt bureau tilbyder markedsføring, hjemmeside design, web og mobil applikationer.

7. BlogHelpr

BlogHelpr helps you with blog maintenance and startup support for your blog; we also provides Custom Blog Design.

8. Jan-Eike Koormann

Creative communication and design from Hamburg (Germany) for websites, product & image branding, concept, corporate identity, print material.

9. Squarefactor

Squarefactor designs and develops interactive experiences for web, mobile, social and more.

10. Superlovers

Superlovers | Atelier de conception et création visuelle. we are made of love. L' atelier

It’s a very simple way which can help reduce spam comments on your wordpress site. We will be working with comments.php for this post.

What method is it?

The simple way to prevent spam is to make them tick a checkbox. Ive done a test on this method and i know that this works and prevents spam bots, manual spam won't be protected by this obviously. We are currently using it on Zenbix website, so if you wish to see a demo please see at the bottom of this post.

How does it work?

When commenting on your wordpress blog, they will be required to check the box in order to submit the form. Once the box has been checked the submit button will be unlocked allowing them to submit the comment. In your comments.php find the submit button. (id="submit")

Button Zenbix code:

<button class="formbutton rightalign" id="submit" tabindex="5" type="submit"><span>Add Comment</span></button>

Add below:

<p class="form-submit">
<input id="comment_post_ID" name="comment_post_ID" type="hidden" value="1120" />
<input id="comment_parent" name="comment_parent" type="hidden" value="0" />
</p>
<p id="gasp_p" style="clear:both;"></p>

Then we need the javascript to notify the user:

<script type="text/javascript">
                    // Human Check v1 (Zenbix)
                    var gasp_p = document.getElementById("gasp_p");
                    var gasp_cb = document.createElement("input");
                    var gasp_text = document.createTextNode("Please confirm that you are Human!");
                    gasp_cb.type = "checkbox";
                    gasp_cb.id = "gasp_checkbox";
                    gasp_cb.name = "gasp_checkbox";
                    gasp_cb.style.width = "25px";
                    gasp_p.appendChild(gasp_cb);
                    gasp_p.appendChild(gasp_text);
                    var frm = gasp_cb.form;
                    frm.onsubmit = gasp_it;
                    function gasp_it(){
                    if(gasp_cb.checked != true){
                    alert("Sorry, please check the box to confirm that you are human!");
                    return false;
                    }
                    return true;
                    }
</script>

Add below the JS code:

<input id="gasp_email" name="gasp_email" type="hidden" value="" />

This should be your code result (Click to enlarge)

Alright. So what is IETester?

In my day-to-day development, if new or old websites, using IETester is simply a browser that allows you to view your website in multiple tabs in different versions of Internet Explorer (IE) while keeping your standard install of internet explorer on your system, if you are like me then i don't even bother to have it since using this great tool.

This is more of a tool for the developers that are currently building websites, but if you want a bit more robust method of testing your designs against different IE browsers without using websites like NetRenderer or BrowserShots, IETester is a winner. IETester is freeware tool which is developed for windows only.

Known problems and limitations :

• The Previous/Next buttons are not working properly
• Focus is not working properly
• Java applets are not working
• Flash is not working on IE6 instance in user mode : A solution is to launch IETester as admin user and Flash will work.
• CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
• windows.open does not return the newly created window but null (IETester limitation)
   

How to test on a MAC?

As this tool is only for Windows, there is other ways to test a website in IE on a MAC. Personally myself im always on a mac, but since at my desk i have a Windows PC too. Although, sometimes it's not on and im in a rush. Here is a few tools below which will test your website in IE on a mac.

• Browser Shots
• Adobe BrowserLab
• Vmware Fusion

Please comment and tell us what you think.

The City is Burning

Volkswagen Beetle

Pixel Odyssey

Pink Turkey

Hyundai Veloster

The Uprising Creative

Html5lab

Teixido

Vision18

Webstandardssherpa

Desiign

When you go ahead and have a website, it grabs users attention with a nice value image slider design that promotes your products  which users will admire. In this tutorial im going to show you a apple-like slideshow gallery which is a simillar way to the one they use on apple.com to showcase their apple products. It will be totally front-end, no php code or databases will be required.

DEMO | DOWNLOAD

Step 1 – XHTML

As said above, there will be no need for php coding. We will just be focusing on CSS, XHTML + Jquery. There will be no databases needed, this means that it is really easy to add this to your website, you only need to change a few lines of html coding.

Demo.html

<div id="main">

<div id="gallery">

<div id="slides">

<div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>

</div>

<div id="menu">

<ul>
<li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
</ul>

</div>

</div>

</div>

Step 2 – CSS

Now the html coding is their, lets see whats inside our CSS stylesheet. The styles found are the styles used directly by the gallery itself, you can view the rest of the other styles, used to show in the demo, which can be found in demo.css.

Demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}

body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;

	/* CSS3 Rounded Corners */

	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;

	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;

	border:1px solid white;

	background:url(img/panel.jpg) repeat-x bottom center #ffffff;

	/* The width of the gallery */
	width:920px;
	overflow:hidden;
}

#slides{
	/* This is the slide area */
	height:400px;

	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:920px;
	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:45px;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}

li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}

We have used a number of CSS3 specific properties in this slideshow gallery:

• box-shadow, whichthis will make the gallery cast with an light shadow around its edges.
• border-radius, which rounds the bottom corners of the gallery.

Step 3 – jQuery

As above, the gallery doesn't use any php code or databases, so its all up to the front end to make the slideshow work.

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	var totWidth=0;
	var positions = new Array();

	$('#slides .slide').each(function(i){
		/* Loop through all the slides and store their accumulative widths in totWidth */
		positions[i]= totWidth;
		totWidth += $(this).width();

		/* The positions array contains each slide's commulutative offset from the left part of the container */

		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
	});

	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e){

		/* On a thumbnail click */
		$('li.menuItem').removeClass('act').addClass('inact');
		$(this).parent().addClass('act');

		var pos = $(this).parent().prevAll('.menuItem').length;

		$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
		/* Start the sliding animation */

		e.preventDefault();
		/* Prevent the default action of the link */
	});

	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
});

The whole main idea of the jquery script is to loop through the slides and sim up the width and assign the sum to the slides container. The div with the id ="slides". As the slides are floated to the left side and have enough room, they align next to each other. This means when you click the thumbnail, the script calculates the on which slide to show and scrolls the #slides div.

Finished Result

Having problems? Don’t understand the the tutorial, too lazy? Download the source files

Zenbix Team.

There is a total of 5 different scrollers which can be found by downloading the files at the bottom of this post. In this post i will only include 2 sliders, but more can be found on the demo and the source files at the bottom.

jQuery Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {

	//create scroller for each element with "horizontal_scroller" class...
	$('.horizontal_scroller').SetScroller({	velocity: 	 60,
											direction: 	 'horizontal',
											startfrom: 	 'right',
											loop:		 'infinite',
											movetype: 	 'linear',
											onmouseover: 'pause',
											onmouseout:  'play',
											onstartup: 	 'play',
											cursor: 	 'pointer'
										});
	/*
		All possible values for options...

		velocity: 		from 1 to 99 								[default is 50]
		direction: 		'horizontal' or 'vertical' 					[default is 'horizontal']
		startfrom: 		'left' or 'right' for horizontal direction 	[default is 'right']
						'top' or 'bottom' for vertical direction	[default is 'bottom']
		loop:			from 1 to n+, or set 'infinite'				[default is 'infinite']
		movetype:		'linear' or 'pingpong'						[default is 'linear']
		onmouseover:	'play' or 'pause'							[default is 'pause']
		onmouseout:		'play' or 'pause'							[default is 'play']
		onstartup: 		'play' or 'pause'							[default is 'play']
		cursor: 		'pointer' or any other CSS style			[default is 'pointer']
	*/

	//how to overwrite options after setup and without deleting the other settings...
	$('#no_mouse_events').ResetScroller({	onmouseover: 'play', onmouseout: 'play'   });
	$('#scrollercontrol').ResetScroller({	velocity: 85, startfrom: 'left'   });

	//if you need to remove the scrolling animation, uncomment the following line...
	//$('#scrollercontrol').RemoveScroller();

	//how to play or stop scrolling animation outside the scroller...
	$('#play_scrollercontrol').mouseover(function(){   $('#scrollercontrol').PlayScroller();   });
	$('#stop_scrollercontrol').mouseover(function(){   $('#scrollercontrol').PauseScroller();  });		

	//create a vertical scroller...
	$('.vertical_scroller').SetScroller({	velocity: 80, direction: 'vertical'  });		

	//"$('#soccer_ball_container')" inherits scrolling options from "$('.horizontal_scroller')",
	// then I reset new options; besides, "$('#soccer_ball_container')" will wraps and scrolls the bouncing animation...
	$('#soccer_ball_container').ResetScroller({	 velocity: 85, movetype: 'pingpong', onmouseover: 'play', onmouseout: 'play'  });

	//create soccer ball bouncing animation...
	$('#soccer_ball').bind('bouncer', function(){
			$(this).animate({top:42}, 500, 'linear').animate({top:5}, 500, 'linear', function(){$('#soccer_ball').trigger('bouncer');});
	}).trigger('bouncer');

});
//-->
</script>

Soccer CSS:

#soccer_ball_container{width:500px;height:80px;}
#soccer_ball_container .scrollingtext{width:40px;height:80px;}
#soccer_ball{display:block;position:absolute;top:0px;left:0px;}

</p>
<div class="horizontal_scroller" id="soccer_ball_container">
	<div class="scrollingtext"><img id="soccer_ball" src="http://www.vegabit.com/jquery_scroller/soccer_ball.gif" /></div>
</div>
<p>

</p>
<div class="horizontal_scroller" id="no_mouse_events">
	<div class="scrollingtext">this is a scrolling text!</div>
</div>
<p>

In another tutorial i will include more scrollers and more ways on how to edit the jQuery speed, pause, and more. This is for the people who know where to insert the code already in html, css and javascript.

More Scrollers [Demo] | Download jqScroller v1.0

Did this post help you? Please comment below.

Below you can find a simple tutorial on how to make a contact form that will make your site visitors say 'Great!'. A simple nice and smooth validation which is developed with AJAX.

DEMO | SOURCE

We are going to have 2 files, the first one is contact.html and the second one is send_email.php.

HTML (contact.html)

<div id='contact_form_holder'>
<form action='index.php' method='post' id='contact_form'>
<h2><img id='contact_logo' src='images/mail.png' /> Contact Us</h2>

<p>
Your Name:
<div id='name_error' class='error'><img src='images/error.png'> I don't talk to strangers.</div>
<div><input type='text' name='name' id='name'></div>
</p>

<p>
Your Email:
<div id='email_error' class='error'><img src='images/error.png'> You don't want me to answer?</div>
<div><input type='text' name='email' id='email'>
</p>

<p>
The Subject:
<div id='subject_error' class='error'><img src='images/error.png'> What is the purpose of the contact?</div>
<div><input type='text' name='subject' id='subject'></div>
</p>

<p>
The Message:
<div id='message_error' class='error'><img src='images/error.png'> Forgot why you came here?</div>
<div><textarea name='message' id='message'></textarea></div>
</p>

<div id='mail_success' class='success'><img src='images/success.png'> Thank you. The mailman is on his way.</div>
<div id='mail_fail' class='error'><img src='images/error.png'> Sorry, don't know what happened. Try later.</div>
<p id='cf_submit_p'>
<input type='submit' id='send_message' value='Send The Message'>
</p>

</form>
</div>

As you can now see from the contact form section are splitted with paragraphs. Inside every paragraph there is a description text. error div. and the div with the inport. Lets crack on with the CSS styling for the contact form when showing errors and success messages.

CSS (contact.html)

#contact_form_holder {
    font-family: 'Verdana'; /* this is a nice font-family, at least i think, if you don't like it change it <img src="http://web.enavu.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">  */
    font-variant: small-caps; /* making the small letter looks like capital but keeping the size of it to smaller, looks cool */
    width:400px; /* setting a fixed width of the contact form holder will make things easier later (like aligning and such) */
}
#contact_form_holder input, #contact_form_holder textarea {
    width:100%; /* make all the inputs and the textarea same size (100% of the div they are into) */
    font-family: inherit ; /* we must set this, so it inherits the font-family */
    padding:5px; /* and make a custom padding, you can set whatever you like */
}
#contact_form_holder textarea {
    height:100px; /* i never liked small textareas, so make it 100px in height */
}
#send_message {
    width:200px !important; /* the width of the submit button  */
    font-variant: small-caps; /* nicer font-variant (like explained before) */
    border:1px solid black; /* remove the default border and put a normal black one */
    cursor:pointer;
    cursor:hand;
}
#cf_submit_p { text-align:right; } /* show the submit button aligned with the right side */

/* styling */

.error {
    display: none; /* hide the errors */
    /* add some styling */
    padding:10px;
    color: #D8000C;
    font-size:12px;
    background-color: #FFBABA;
}
.success {
    display: none; /* hide the sucess div */
    /* add some styling */
    padding:10px;
    color: #044406;
    font-size:12px;
    background-color: #B7FBB9;
}

#contact_logo { vertical-align: middle; }
.error img { vertical-align:top; }

And now we get the nice, simple contact form.

JQuery(contact.html)

    $(document).ready(function(){
        $('#send_message').click(function(e){

            //stop the form from being submitted
            e.preventDefault();

            /* declare the variables, var error is the variable that we use on the end
            to determine if there was an error or not */
            var error = false;
            var name = $('#name').val();
            var email = $('#email').val();
            var subject = $('#subject').val();
            var message = $('#message').val();

            /* in the next section we do the checking by using VARIABLE.length
            where VARIABLE is the variable we are checking (like name, email),
            length is a javascript function to get the number of characters.
            And as you can see if the num of characters is 0 we set the error
            variable to true and show the name_error div with the fadeIn effect.
            if it's not 0 then we fadeOut the div( that's if the div is shown and
            the error is fixed it fadesOut.

            The only difference from these checks is the email checking, we have
            email.indexOf('@') which checks if there is @ in the email input field.
            This javascript function will return -1 if no occurence have been found.*/
            if(name.length == 0){
                var error = true;
                $('#name_error').fadeIn(500);
            }else{
                $('#name_error').fadeOut(500);
            }
            if(email.length == 0 || email.indexOf('@') == '-1'){
                var error = true;
                $('#email_error').fadeIn(500);
            }else{
                $('#email_error').fadeOut(500);
            }
            if(subject.length == 0){
                var error = true;
                $('#subject_error').fadeIn(500);
            }else{
                $('#subject_error').fadeOut(500);
            }
            if(message.length == 0){
                var error = true;
                $('#message_error').fadeIn(500);
            }else{
                $('#message_error').fadeOut(500);
            }

            //now when the validation is done we check if the error variable is false (no errors)
            if(error == false){
                //disable the submit button to avoid spamming
                //and change the button text to Sending...
                $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });

                /* using the jquery's post(ajax) function and a lifesaver
                function serialize() which gets all the data from the form
                we submit it to send_email.php */
                $.post("send_email.php", $("#contact_form").serialize(),function(result){
                    //and after the ajax request ends we check the text returned
                    if(result == 'sent'){
                        //if the mail is sent remove the submit paragraph
                         $('#cf_submit_p').remove();
                        //and show the mail success div with fadeIn
                        $('#mail_success').fadeIn(500);
                    }else{
                        //show the mail failed div
                        $('#mail_fail').fadeIn(500);
                        //reenable the submit button by removing attribute disabled and change the text back to Send The Message
                        $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                    }
                });
            }
        });
    });

Now we just need to make a simple php file that will process the email and tell JQuery if it succeded in that.

PHP(send_email.php)

    //we need to get our variables first

    $email_to =   'hello@zenbix.com<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementById("__cf_email__");a=l.className;if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>'; //the address to which the email will be sent
    $name     =   $_POST['name'];
    $email    =   $_POST['email'];
    $subject  =   $_POST['subject'];
    $message  =   $_POST['message'];

    /*the $header variable is for the additional headers in the mail function,
     we are asigning 2 values, first one is FROM and the second one is REPLY-TO.
     That way when we want to reply the email gmail(or yahoo or hotmail...) will know
     who are we replying to. */
    $headers  = "From: $emailrn";
    $headers .= "Reply-To: $emailrn";

    if(mail($email_to, $subject, $message, $headers)){
        echo 'sent'; // we are sending this text to the ajax request telling it that the mail is sent..
    }else{
        echo 'failed';// ... or this one to tell it that it wasn't sent
    }

If you decide you don't want to code any of this or learn how it's made, feel free to download the source files from top of this post.

Zenbix Team

In most cases, there are free sites available online, many which are very very useful to us, but not many people know them all. Here is a few sites that offer useful tools for you to use, hand picked.

1. Redmine

Redmine is a great, free alternative to other pricey project management apps available online.

2. Billing Boss

Billing Boss is a fantastic, free invoicing tool, designed especially for small businesses and freelancers.

3. Yuuguu

Yuuguu is a multi-platform screen-sharing tool, which allows Windows, Mac and Linux users to collaborate.

4. FavIcon Generator

Looking for a quick and easy way to create favicons for your website, then look no further.

5. Dropbox

For online storage, look no further than Dropbox, an ingenious tool for storing and sharing files.

6. BrowserShots

BrowserShots is a straightforward, free tool for checking what your website looks like in a wide range of different browsers

7. Toggl

toggl is the perfect time tracking tool for freelance web developers and designers who tend to get paid by the hour.

8. Pingdom Tools

Pingdoms Full Page Test imitates the way a web page is loaded in a browser, showing you exactly how long it takes for each object, including images, CSS, JavaScript, RSS, Flash and frames, to appear.

9. net2ftp

If youre stuck on a computer without an FTP client, try net2ftp. Its a free, web based FTP client.

10. W3C Markup Validation Service

The Markup Validator is a free tool and service that validates markup: in other words, it checks the syntax of Web documents, written in formats such as (X)HTML.

Did you find this post helpful? Please comment below.