Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips

Tuesday, July 28, 2009

16 Free Ajax Contact Forms - For A Better User Experience

Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site.

Creating a better user experience in this bridge definitely helps improving the effect created in the eyes of the site visitors.

Depending on the features (or JS frameworks to be used) you may need, you can choose from these 16 very nice free Ajaxed contact forms & implement them easily to any website.

LightForm - Ajax / PHP Contact Form - Demo

It uses FormCheck2 for validation of fields and NiceForms to style form objects.

There is a simple captcha-like validation which ask the user a sum of 2 numbers. E-mails are sent via PHP & displays user IP, user agent and referrer in the message.

Proto Form - Contact Form With Protoype

A lightweight (only 4KB) & unobtrusive contact form that is built with Prototype.

The fields are validated & highlighted accordingly. The e-mail message is sent via Ajax and a success result is displayed.

It is a very handy form which can be installed easily.

jQuery - Ajax Contact Form (Tutorial & Files) - Demo

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP.

The form has an input validation. After the message is sent in th ebackgroung a "success" message is displayed to the user.

Very Chic Contact Form (English version) - Demo

This contact form uses Script.aculo.us & WForms.

An unique feature of it is, it tries to connect to the server of the sender to verify that it accepts mail to the address mentioned.

Message size can be limited and remaining characters are displayed in a box.

jQuery Sliding Contact Form - Demo

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.

There is no form validation & mail sending code included.

Brett’s Beta Contact Form

A contact form that checks the validity of the fields & sends the e-mail accordingly. It is not updated for a while but the form works ok.

roScripts Form - MooTools Ajax Contact Form - Demo

This contact form is built with MooTools. Fields are validated via JavaScript & if there are no errors e-mails are sent with an Ajaxed interface (PHP backend).

Ajax Contact Form With Xajax & PHPMailer - Demo

A simple and safe Ajax form. A JavaScript validation mechanism controls the fields & displays a common warning for all fields.

Ajax function used is Xajax & the famous PHPMailer is used for sending the e-mail.

jQuery - Ajax Contact Form - Demo

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation.

Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page.

Contact Form With Script.aculo.us & WForms - Demo

A nice & free contact form script that can do required input validation by adding a class info to the form elements like: class="required".

Script.aculo.us is used for the "info box & text appearing effect" & WForms is used for controlling the inputs.

Ajax Contact Form With PHP & jQuery (Tutorial) - Demo

An unobstrusive contact form that has a PHP backend & uses jQuery.

It controls the required fields, displays warnings accordingly & sends the email with no page refresh.

A nice thing about this ajax contact form is, inputs are validated at the PHP side which means they will be controlled even if JavaScript is disabled.

Fancy Ajax Contact Form (French - Click For English)

This form is built with MooTools with a PHP backend.

It has a very nice look & there is no validation implemented.

MooTools Contact Form

A contact form built with MooTools.

Input is checked via JavaScript & PHP. Message field does not accept any http addresses considering most spams reach this way.

jQuery Contact Form - Demo

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh.

The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

Tableless Ajax Contact Form With jQuery (Tutorial & Files) - Demo

A nice contact form that uses jQuery & PHP.

It validates all the inputs, displays warnings when needed & sends the e-mail.

Easy Ajax Contact Form (jQuery) - Demo

Using jQuery & the jQuery Form plugin, this ajax contact form script validates inputs & sends the e-mail.

Labels: ajax

Thursday, June 4, 2009

10 Javascript Ajax Tabs

jQuery Coda Slider - The sliding effect is what the Coda-Slider is all about; Nice, slick content presentation

Perspective Tabs - Perspective tabs (formerly Sliding Tabs) is a simple mootools plug-in that allow for a large number of tabs to fit into a small space

jQuery ID Tabs - idTabs is a plugin for jQuery - It makes adding tabs into a website super simple, but it can also open the door to endless possibilities

Tab Accordion - Tabbed style accordion script written with Moo.FX

XP Style Tab Panes - It’s easy to configure this script. You put your content into separate DIVs and then call a JavaScript function which creates the tabs dynamically

Ajax Tabs - The purpose of doing Tabs in Ajax is not just to do something in Ajax. The context for which this is used is not for novelty

Tabbed Page Interface - There are quite a few JavaScript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from page tab to page tab without a page refresh

jQuery Nested Tab Set with Demo - Ok, there have been some changes, but I’ll try to keep it easy, with an example, and there will be an included .zip file. First, you’ll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here

Ajax Tabs Reloaded - From time to time you run across a cool site or test code and think that you may use it somewhere. I thought that about the HavocStudios Ajax tab system so I went back to the site to check it out

Tabs in Scriptaculous - This script will allow you to create interactive tabs for use in an application

Labels: ajax, javascript

Thursday, March 19, 2009

Top 10 Amazing JavaScript Image Libraries

Here are Top 10 Javascript libraries to make your images look better. With the good JavaScript support from Adobe AIR, they might same you some coding for images heavy AIR applications. I’m just wondering if there are a Flex library just does all the tricks?

Loupe.js

Did you ever want to add a lens to your page which will let you zoom into the images. This script will let you do that and much more using two versions of your image.

Instant.js

This javascript lets you add an instant picture effect to your images. You can add border, tilt and shadow to give your images that photo effect which you always wanted.

Edge.js

This javascript can help you in adding nifty edges to your images. You can even mask a second transparent image to generate some nice looking eye candy.

Corner.js

This javascript lets you add effects to your image corners like rounded corners, shadow (both inner and outer), shading etc.

Slided.js

You can add slide frames to your images by using this javascript in your web pages. I am sure it can be useful to some people.

Reflex.js

This javascript enables you to add a cover flow effect to any image on your web page. You can add reflection, tilt angles and also borders to your images.

Curl.js

This is an unobtrusive javascript to add page curl effect to your images and works on all the major web browsers. It can also produce the curl on mouseover where it animates the effect.

Glossy.js

Add a glossy effect to your images to make them stand out. This javascript also allows to add corners, shading and shadow

This javascript allows you to add film strips around your images. You can also add shadow and shine to your film strip edges.

Bevel.js

This javascript simulates a whole bunch of effects! It allows you to add bevels with glow, shading and shine to your images

Labels: ajax, javascript

50 Websites that make amazing use of javascript

The use of Javascript frameworks like jQuery, Mootools and Prototype, developers created stunning javascript solutions and effects for their websites.

Below are 50 inspiring Websites that make good use of Javascript, Websites which I have collected over time for inspiration purpose. Some of them are selected purely on look and feel, some have really extraordinary Javascript functions that have been implemented.

Tabs

Aviary - http://aviary.com/

Aviary uses very sleek tabs with a nice fading transition to give visitors a short introduction to the service. The javascript improved dropdown menu is very nice as well.

Toolani - http://www.toolani.de/

Billig telefonieren - (translation: cheap phoning), is not the only thing this german startup offers: the website includes very nice jQuery tabs at the bottom of the yellow content box along with various other effects like ajaxed form validation and a sliding login button.

Podcasttuneup - http://www.podcast-tuneup.com/

Slick tabs with an interesting slideup/slidedown motion. You should also check the sleek transparent login form, that fades in as soon as you click the login button.

Adworks - http://www.adworks.ro/

The tabs lack a stylish fading transitions like the aforementioned examples, but I really like the big icons, since they are really begging for a click =)

We are Sofa - http://www.madebysofa.com/

A good example if you want to use your tabs with some text instead of icons

Sliding Content - Transitions Everywhere

monofactor -http://www.monofactor.com/

The redesigned monofactor website shows recent portfolio entries in a neat contentslider.

Alex Buga - http://www.alexbuga.com/

Alex Buga, self proclaimed Webdesign Superstar, slides his recent entries horizontally. Be sure to check out his neat main menu as well. Last but not least the site makes heavy use of ajax.

Coda, one Window Web development - http://www.panic.com/coda/

This one is already known by everyone and their grandmother but always a good site to draw inspiration from, so no way this site could be ignored.

Kobe - http://www.arcinspirations.com/kobe/

A very sleek sliding content box along with some flash particles that are moved to the currently selected menu item, make this one a very unique experience.