blogfreakz.com » Forms

Make Blinking Neon Forms with CSS3 and jQuery

Keith@Blogfreakz — Mon, 23 Jan 2012 13:12:25 +0000

This cool form effect has the usual attributes we enjoy — rounded corners, stroke edges and other CSS-generated qualities. But thanks to web developer Rakesh Menon, this one’s got another thing up its sleeve: it’s got a glowing neon border that pulsates!

Here’s the demo for you to really appreciate it. Click here for the source files (/zip).

Now let’s start the tutorial with the xHTML to setup the layout.

xHTML

Form Tutorial

If you would rather use Google’s API instead of downloading a copy of jQuery, you can just replace this part of the code “” with the one below:

Once you’ve decided where to get the source for your jQuery, let’s move on to CSS.

CSS

margin:0;

padding:0;

}

textarea, input{

outline:none;

}

body{

background:#3D3D3D;

}

#page-wrap{

width:350px;

min-height:500px;

height:auto;

margin:0 auto;

position:relative;

padding-top:50px;

font:15px Arial;

}

#myform{

width:375px;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

margin:0 auto;

position:relative;

}

#myform label{

top:10px;

position:relative;

color:white;

}

.field{

background:gray;

padding:15px 15px 0 10px;

height:50px;

width:350px;

}

#myform div:first-child{

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

#myform div:last-child{

-moz-border-radius-bottomleft: 8px;

-moz-border-radius-bottomright: 8px;

-webkit-border-bottom-left-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

.area{

padding:15px 15px 0 10px;

min-height:195px;

}

.inputfield{

padding:0 10px 0 10px;

float:right;

width:200px;

font:15px Arial;

border:2px aqua inset;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

}

.textfield{

height:25px;

padding-top:5px;

}

.textarea1{

padding-top:10px;

padding-bottom:10px;

height:150px;

max-height:200px;

max-width:250px;

}

If you take a look at the result at this point you’ll notice that you still have the default look for the submit button. If you want to change it, just copy/paste and add this code in your CSS.

.submitbutton{

border: 0px;

float:right;

width:75px;

height:40px;

font:20px Arial;

position:relative;

top:20px;

right:10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

-webkit-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’); /* IE6,IE7 */

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’)”; /* IE8 */

}

.submitbutton:hover{

background: #3cdfdf;

color:white;

}

The last piece of CSS code below will add the glowing effect to the neon edges of your input boxes. This part (@-webkit-keyframes) by the way, only works in browsers using the Webkit layout engine like Chrome and Safari:

@-webkit-keyframes pulsate {

0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }

25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }

50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }

75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }

100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }

}

.inputfield:focus{

-webkit-animation-name: pulsate;

-webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count: infinite;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

}

And lastly, we’ll work on the jQuery. This part of the tutorial can actually be considered as optional since it simply adds a black background to set off the highlighted input field (see comparison image below).

If you’d like to include it in your design then just copy/paste this code in to your .js file:

$(document).ready(function(){

var globalParent=null;

var mouse_is_inside=false;

/*The snippet below is activated when an inputfield is focused*/

$(‘.inputfield’).focus(function(){

globalParent=$(this).parent(‘div’);

globalParent.click();

});

/*This following part will be activated when the inputfield loses focus*/

$(‘.inputfield’).blur(function(){

globalParent.click();

});

/*Following part will be activated when the user clicks anywhere inside

the container div of the inputfield*/

$(‘.field’).click(function(){

if(!($(this).is(‘.dummy’))){

$(‘.dummy’).css(‘background-color’,'gray’);

$(‘.dummy label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

$(this).css(‘background-color’,'black’);

$(this).children(‘label’).css(‘color’,'#3cdfdf’);

$(this).addClass(‘dummy’);

}

});

/*The following code checks time and again whether the mouse is inside the form or not*/

$(‘form’).hover(function(){

mouse_is_inside=true;

function(){

mouse_is_inside=false;

}

);

/*If user clicks anywhere outside the form, all highlighting is removed*/

$(‘body’).click(function(){

if(!mouse_is_inside)

{

$(‘.field’).css(‘background-color’,'gray’);

$(‘.field label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

}

});

And that concludes this tutorial. Try to run or open your HTML and see if it’ll work on your browser. I personally have only tested it in the latest version of Chrome and IE9, and the blinking effect doesn’t work in IE9. Yet. Still, I hope you enjoy this one!

Incoming search terms for the article:

jQuery forms: Best plugins and tutorials for developers

Mufti Ali — Mon, 04 Apr 2011 17:20:06 +0000

On this article our attention focuses on forms, an essential part of any website and how jQuery can be truly resourceful for improving them both in terms of functionality and aesthetic; throughout this post you are about to see some of the most helpful plugins and tutorials that can give you some guide for working with forms.

Snow – A Slick And Modern Web UI Kit

Mufti Ali — Sat, 02 Apr 2011 06:03:33 +0000

This set of user interface elements was created specifically for light, modern websites and applications. Each of these elements will fit beautifully with subtle textured or solid backgrounds, making your site rich with design elements and beauty.

Each individual element has been hand-crafted with attention to detail for a truly pixel perfect result, and all layers are grouped and organized for ease of use. This UI kit was designed for spyrestudios by MediaLoot.

Website: http://spyrestudios.com/freebies/snow-modern-ui-kit/

Incoming search terms for the article:

jFormer – jQuery Form Framework

Mufti Ali — Sat, 05 Mar 2011 08:29:54 +0000

jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that validate client-side, validate server-side and without changing pages (using AJAX).

Features

Painless form validation
Easily customizable using CSS
User controlled field duplication
Bot prevention (no need for CAPTCHAs)
Users can save and resume forms
Form triggers lock or unlock form fields
One file for form generation and processing
Templates for common forms

At 18K gzipped, jFormer is one of the first frameworks that comes closure compiled with Google’s latest JavaScript compression technology.

Requirements: jQuery Framework
Demo: http://www.jformer.com/
License: MIT , GPL License

Incoming search terms for the article:

Vintage typewriter: The sexiest jQuery contact form ever

Mufti Ali — Wed, 02 Feb 2011 15:02:45 +0000

A fancy typewriter contact form powered with jQuery, CSS and PHP along with a nice vector illustration

New Form Features in HTML5

Mufti Ali — Sun, 19 Dec 2010 17:14:50 +0000

HTML5 includes many new features to make web forms a lot easier to write, and a lot more powerful and consistent across the Web. Opera is sharing article that gives a brief overview of some of the new form controls and functionalities that have been introduced. The article includes new form controls, new form attributes, new output mechanisms, validation, styling with CSS3, and cross browser compatibility.

To illustrate some of the new features, the article comes with a basic HTML5 forms example. Note: the look and feel of the new form controls and validation messages differs from brower to browser, so styling your forms to look reasonably consistent across browsers will still need careful consideration.

Source: http://dev.opera.com/articles/view/new-form-features-in-HTML5

Incoming search terms for the article:

SheepIt – Clone Form Elements Dynamically With jQuery

Mufti Ali — Sun, 05 Dec 2010 12:48:44 +0000

SheepIt is a jQuery plugin that allows you to clone form elements dynamically. It is very useful to develop advanced forms that require the same type of load data multiple times. In addition, for ease of use, sheepIt added advanced controls that allow the user to modify the form dynamically adding or removing clones.

It has configuration options for cuztomization such as limit the number of forms, form controls, number of initial forms, delete confirmation etc. SheepIt allow us to add multiple forms at the same time, remove the last one and remove all are some of the advanced controls that sheepIt provides.

Requirements: jQuery Framework
Demo: http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&sec=demos
License: MIT License

Incoming search terms for the article:

h5Validate – HTML5 Form Validation For jQuery

Mufti Ali — Fri, 15 Oct 2010 15:04:52 +0000

h5Validate is jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don’t yet support HTML5. In browsers that do support HTML5, h5Validate adds some much-needed features, such as the ability to customize the user interface when an input fails validation.

This HTML5 form validation is support for various validation rule such as required attribute and pattern attribute. Sometimes, you’ll want to re-use the same validation pattern for several elements on a page.

You could copy and paste the same pattern over and over again to a bunch of different form fields. h5validate offer better solution which is to attach the pattern with a class selector. Use $.h5Validate.addPatterns() to add your pattern, make sure the class Prefix variable is set correctly (it’s h5- by default), and add the class to the input fields.

There are a ton of options you can override by passing key: value pairs when you call .h5Validate(). For example, we can change the CSS class that indicates validation errors.

Requirements: jQuery framework
Demo: http://ericleads.com/h5validate
License: MIT License

Incoming search terms for the article:

Building An Emotional Connection With Your Audience Through Anthropomorphic Forms

Mufti Ali — Wed, 08 Sep 2010 01:53:37 +0000

An anthropomorphic form is one that exhibits human-like qualities. As designers we can use this tendency to find anthropomorphic forms more appealing to attract attention to design elements, establish a positive frame or tone for our designs, and even build relationships and make emotional connections with our audience.

jQuery Live Form Validation- Easy Form Validations

Mufti Ali — Wed, 01 Sep 2010 16:55:27 +0000

jQuery Live Form Validation is a free jQuery plugin which helps create easy form validations with high flexibility and a large set of options.

Features

Supports custom validations
Options to toggle between live and onsubmit validations
Completely customizable CSS

For advanced users, this plugin support this various options:

expression: The javascript code which should have two outputs
or . The value of the field is given by . As this is a string escape characters for backslash and other non standard characters must be used. (Default: return true;)
message: The validation message for the field. (Default: “”)
error_class: The CSS class of the error message container. (Default: “ValidationErrors”)
error_field_class: The CSS class added to the field when found invalid. (Default: “ErrorField”)
live: Sets whether the validation of the field should be live or on form submit. (Default: true)

Requirements: jQuery Framework
Demo: http://www.geektantra.com/projects/jquery-form-validate/
License: Apache License 2.0