Design Reviver » web forms

Three Fresh CSS Frameworks

speckyboy — Thu, 28 Oct 2010 11:00:48 +0000

CSS Frameworks are those marvelous and innovative tools that will speed up your web development process by taking care of the multitude of repetitive processes you would have to cover for every project, and on top of that, they (mostly) take care of any cross-browser compatibility issues. They have also never been as popular, with new frameworks cropping out from week-to-week. As such, in this design news round-up we have selected our favorites from recent months.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

Round-Up of Fresh jQuery Tutorials

speckyboy — Thu, 12 Aug 2010 09:58:14 +0000

There really is no limit to what can be achieved with jQuery. And when it is in the right hands those limits are challenged all the time, constantly pushing back its seemingly endless boundaries by developing fresh and creative techniques. In this design news round-up we have collected our favorite recent jQuery tutorials.

Achieving Higher Conversion Rates with Your Web Forms

Joel Reyes — Wed, 11 Aug 2010 13:22:30 +0000

Web forms are used for all different types of data submission, video submitting, contacting, blogging, registering, or for ordering items online. All the forms come in different flavors, large or small, black or white, short or long. Therefore, forms are very important to you and your users, thus, making them just right is the key to increase usage.

Below we cover six tips to improve your forms for better exposure and usability.

Not Too Large, Not Too Small

A major issue with many forms out there is their sizes, many developers or designers try to fit long forms into small spaces, reducing the size of the input boxes greatly making it difficult for users to proofread what they enter. A good ideal size for each input box, which includes large text boxes and the likes, really depends on the amount of data you expect a user to input.

For example, let us say you run a blogging service, you know that blogs can be short or long, thus, giving the textbox a good width and height is really the key. Users want to be able to easily proofread their blog post before it makes it live via the textbox, so fairly large text is also a plus, so they can easily catch typing mistakes or missing punctuation.

JavaScript Effects

A great addition to form textbox fields would be some simple JavaScript effects such as auto expanding features or character counting features, depending on the type of data being imported. Despite these effects sometimes being of no relation to your service or form, users do find them handy, especially if a lot of text is being submitted or edited.

To give a good example of a situation where an effect like this can help, let us look at a forum script. Suppose you are creating a forum script where users will be able to discuss certain topics, as you know, posts can be short or long. If a user’s post happens to be long, scrolling through the textbox is an undesired thing to do, as the user cannot quite view the entire posting. Therefore, providing an auto-expanding effect is quite helpful. As the user’s text gets near the bottom of the textbox, it will automatically expand a few lines, keeping your users satisfied.

Easy to Understand

Many users are turned away from forms that are difficult to work with. Hence, it is a definite must to be clear and precise about the information being collected as if they cannot understand what you need, chances are you will not receive what you needed. Another aspect to look at is just because it may be understandable to you, does not mean it will be understandable to your audience. Therefore, it is in your best interest to ask for feedback on understandability of your forms.

Not Too Much, Not Too Little

Another key aspect that causes users to turn away from completing your forms is that your forms ask for too much information. Users want to be completing the form to continue rather than spend the time filling them out. Thus, it is key for you to keep your forms as short as possible. For example, if your form is a registration form to an online service, leaving account settings whether optional or not out of the registration forms makes the form look shorter and easier to fill out increasing the chances of user registrations.

Moreover, leave the information you do not need immediately out of the form, and have them choose to enter the information later at their own leisure or when it becomes necessary. If the information that you may taken out is absolutely necessary within a few days of signing up, have them fill the information out a day later, such as when they sign back in, you can easily prompt them to fill the information out before continuing. This splits the lengthy form into two easy to fill and understand forms, keeping them happy.

A Simple Uncluttered Design

The design of a form additionally impacts the users experience. Your users do not want to bounce back and forth to get to each form field in order; they want to be able to easily fill the fields sequentially without trouble. Therefore, the design for the form should be as simple as possible leaving the fields easily accessible in the order intended.

Understandable Security Measures

While users understand security measures applied to forms help prevent spam, they also do not want to struggle to complete a form. With that said, complex spam prevention tools such as CAPTCHA images cause less completed form submissions from frustrated users. I myself have left many forms that I had intended to fill out due to their hard to work with security measures. Thus, as a developer or creator, creativity is what is needed to avoid the spammers but not the users.

Many new ideas and techniques have become apparent such as mathematical questions, slider prevention systems, as well as others. My personal favorite that I found very intuitive and easy to use is a drag and drop security measure. The user simply drags a shape requested from a palette of shapes right into the shape box, if you selected the requested shape, the form will submit. As it is simple and easy to use, your users will enjoy playing with the tool, as well as keep spammers out of the way.

To Conclude

Overall, getting your users to complete your form is a process that requires thought and ingenuity. With that said, creating a form is easy, but getting it properly designed, formed, and well laid out is tricky however an attainable aspect, but if it is done correctly, it can rewarding. To conclude, keep your forms as simple as possible and as down to the point as it can possibly get.

Ask around for feedback about the design and layout for whether the form can be easily filled out, whether it is easy to understand, and if it is easy to follow. Improve your form accordingly, and it would be ready to hit mainstream.

Awesome Resource: User Interface Design Framework

speckyboy — Tue, 27 Jul 2010 09:33:09 +0000

Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.

License: The framework has been released as a complete web designer kit for free, even for commercial use.

You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:

GUI Library

The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.

Vector Icons Library – 260 Minimal Icons for Free

This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.

Graphic Styles Library

The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

You can download the UI Design Interface here: User Interface Design Framework

By Paul Andrew (Speckyboyand speckyboy@twitter).

Fresh jQuery and CSS3 Tutorials

speckyboy — Tue, 06 Jul 2010 13:28:26 +0000

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

4 Awesome Recently Released jQuery Plugins

speckyboy — Wed, 17 Feb 2010 08:56:55 +0000

Where would web design be without the wonderful jQuery and its marvelous library of free plugins? Of course there are other Javascript libraries, but none of them have had such a dramatic impact on modern web design as jQuery. It really is indispensable.

For today’s news we take a look at four very different recently released jQuery plugins and, as we try to do, keep you up to date with its development.

jDigiClock – Digital Clock (HTC Hero inspired)

jDigiClock is a jQuery plugin that has been inspired from the distinctive HTC Hero Clock Widget.

For such a complex looking plugin it is surprisingly easy to install and offers a multitude of options that control the appearance and behavior of the clock.

jDigiClock Downloads & Docs

Quicksand

Quicksand is a very functional jQuery plugin for reordering and/or filtering items with a sleek and smooth shuffling animation.

This awesome plugin simply replaces a collection of items with another and also comes with a fair few options – like setting the duration or the easing type of the animation (optionally, Easing plugin can be used for more easing types).

Quicksand Downloads & Docs

Uniform – Sexy forms with jQuery

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Uniform Downloads & Docs

Ketchup Plugin – Form Validation

Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

The plugin has been designed to be styled and extended by you and it does already looks tasty and gives you the most common validations by default, but should you need to change things a little, its very easy to do.

Ketchup Downloads & Docs

By Paul Andrew (Speckyboy and speckyboy@twitter).

A Selection of Useful jQuery Plugins

speckyboy — Wed, 27 Jan 2010 09:28:50 +0000

For the last few years jQuery has been the jewel in Javascripts crown. Its rapid rise in popularity not only reflects how powerful a tool it is but also how relatively easy it is to work with. It is because of these two factors that developers have been churning out plugins and new techniques at a phenomenal rate.

Thanks to all of those developers for making our life easier!

30 Stylish jQuery Tooltip Plugins For Catchy Designs

Tooltips can be an important factors on a web site,although little and not always visible, they do offer so much. Although important, they also happen to be a very badly misunderstood and a poorly implemented component.

30 Stylish jQuery Tooltip Plugins For Catchy Designs

45 jQuery Navigation Plugins and Tutorials

As many of us know, the initial 15-20 seconds of a new user’s visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it’s vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can either learn easily or already understands.

The biggest part of this process is developing a menu that is both easy to use and intuitive, as well as styling it to fit into your site’s design. Having said all that, an easy-to-use menu should not put the shackles on creativity.

In this article they’ve listed 45 jQuery plugins and tutorials that demonstrate not only how powerful jQuery is, but also how your website’s navigation can be both creative and usable.

45 jQuery Navigation Plugins and Tutorials

25 jQuery Plugins for Working with Forms

Almost every website uses a form of some kind. Contact forms and other types of forms can be enhanced with the use of a number of jQuery plugins that are readily available. In this post they feature 25 useful plugins that you may be able to use in your own work with forms.

25 jQuery Plugins for Working with Forms

By Paul Andrew (Speckyboy and speckyboy@twitter).

40 Eye-Catching Registration Pages

Joel Reyes — Thu, 23 Jul 2009 19:00:03 +0000

It’s incredible the amount of sites that have acquired a bad taste for web form design. A good registration form is assertive, and collected, however a great registration page is clean and offers a creative edge that forces you to take a second glance at the design. Some of the pages listed below were chosen for their attention demanding illustrations, while others because of their cleanliness and ease of usability.

When a visitor registers on your site, it’s because they have been convinced of how beneficial it will be to register. With this being said, if your registration area provides a dull design, then you’re more likely to turn away the attention of your visitor.

Because it’s fairly easy to steer towards the wrong direction when designing a registration page, we’ve provided 40 eye-catching pages for your inspiration. Each of these pages posses vital characteristics in the succession of a complete registration on your site.

Light Paintings, Creative Web Forms and I Saw a Wooden Workstation Today and I Think I’m In Love

speckyboy — Thu, 16 Jul 2009 19:00:50 +0000

Todays news features amazing light paintings from from professional photographers Jan Wöllert and Jörg Miedza, beautifully crafted web forms, and finally, quite possibly the most amazing work station you have ever seen.

Amazing Light Paintings

If you haven’t seen example of long exposure photography involving light effects, you are missing out on a beautiful photographic style. This inspirational post from Abduzeedo.com, features the work from professional photographers Jan Wöllert and Jörg Miedza.

Amazing Light Paintings.

20 Creative Web Forms For Design Inspiration

Web forms are traditionally boring and dull, and, for some, difficult to style. Have a look at these web forms, as showcased by Webdesign.dev.com, they are amazing.

20 Creative Web Forms For Design Inspiration.

Dear Diary, I Saw a Wooden Workstation Today and I Think I’m In Love

Yep, it really is a work station made out of wood, and yes the PC does work!!! The computer is embedded in a traditional wooden desk, a wooden keyboard laser cut into and out of the surface of the desk with a screen to match. Cool.

Dear Diary, I Saw a Wooden Workstation Today and I Think I’m In Love.

By Paul Andrew (Speckyboy and speckyboy@twitter).

10 Tips for Incredible Web Forms!

Joel Reyes — Wed, 10 Jun 2009 16:52:05 +0000

What I’ll be showing you is how to have perfect working web forms with stunning visuals to produce the desired form for you every time!

I’ll be taking you through the core principles, and making your web forms stand out from the rest! At the end of it all you can see many examples of stunning web forms across the net.

1. Your Equipment

Before you begin to create your web forms you need to know what coding language you’re going to use. You should start by asking yourself these three questions:

What are my options? What are the different benefits of certain coding languages and also what’s the most effective way?

Different kinds of languages vary depending on the type of backend design. Your web form will be nested within the XHTML / HTML file, and then accompanied by some CSS for the desired style. To make it all work, your form can either be designed in PHP, JavaScript, Pearl, ASP, Ajax and more. Here you’ll be able to find detailed information on the various types of languages used for web forms.

“So Now, Which One to Use?!”

If you’re after a quick, simple, and efficient method for coding your web from then PHP is probably for you.

PHP is sort of a hybrid script-based language. It is widely supported because it is an open source language. Implementing PHP does not require buying a server.

Example of Working PHP Web Form:

Code:


  Contact
  I’m available for freelance work
  
    
      
         First Name: 
        
      
      
         Last Name: 
        
      
      
         E-Mail: 
        
      
      
         Message:

You can find out a lot about PHP on the website of the creators of this fantastic language.

“Is PHP Really the Best Language For You?”

You can’t just summarize a language as the best choice; everyone has different needs and preferences. If I were asked to choose one, my personal choice would be JavaScript and PHP as these languages possibilities are unbelievable and leave you with stunning results.

You should analyze your web form’s needs by considering its design and overall functionality.

You can find another example of a working PHP web form here.

2. On to the HTML Mark Up

We can’t forget the mark up! For most of your web forms you shouldn’t have the need to alter them from the HTML aspect. You might need to tweak the most of complicated requests, but this should cover most of your needs.

Here you can see the most basic HTML code for any form layout:


  
    Contact form
    
      Name
      
    
    
      Email
      
    
    
      Website
      
    
  
  
    
      Message

And here you’re able to see the basic CSS code to bring it all together:

body{  	background:#f8f8f8;
	font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
	color:#333;
	line-height:160%;
	margin:0;
	padding:0;
	text-align:center;
	}
	table, input, textarea, select, li{
	font:100% Trebuchet MS, Arial, Helvetica, Sans-Serif;
	line-height:160%;
	color:#333;
	}
 img{
	border:none;
	}
 hr{
	display:none;
	}
table{
	margin:1em 0;
	width:100%;
	border-collapse:collapse;
	}
th, td{
	padding:2px 5px;
	}
 th{
	text-align:left;
	 }
 li{
	display:list-item;
	}
 #container{
	margin:0 auto;
	background:#fff;
	width:600px;
	padding:20px 40px;
	text-align:left;
	 }

The codes above are of the most basic and should be easy to break down and bring together to create working web forms. You should try out the code and see what you get!

3. Let’s Get It to Work

Forms don’t exist just to sit there and look pretty, they need to work. There are two primary functions a web form can have: To cooperate with a database or to produce an email. Web Form Factory is an open source service that takes your form and generates the proper code needed to make it do what it needs to do for free.

If you’re feeling a bit stuck when generating your codes for a web form, then I would suggest making use of this service.

Also, if for some reason your code seems to be ready however you’re having minor issues, then thoroughly revise your code and make sure all of your values and paths are correct within your HTML and CSS mark-up.

4. Double Check your Form

We don’t want say our forms are finished until they are properly working; this eliminates issues and problems that may arise at a later time. Thus, always go back and check your code.

If need be, I would recommend setting up a blank test page on your site and making sure your web form is functioning to its highest ability before you release it to the entire web.

5. Beginning to Style Your Form

Now, let’s move on to the creative part. Here is a CSS style alteration to make your forms come to life!

CSS:


 /* form */  	

#form{
	margin:1em 0;
	padding-top:10px;
	}
#form fieldset{
	margin:0;
	padding:0;
	border:none;
	float:left;
	display:inline;
	width:260px;
	margin-left:25px;
	}
#form legend{
	display:none;
	}
#form p{
	margin:.5em 0;
	}
#form label{
	display:block;
	}
#form input, #form1 textarea{
	width:252px;
	border:1px solid #ddd;
	background:#fff url(form_input.gif) repeat-x;
	padding:3px;
	}
#form textarea{
	height:125px;
	overflow:auto;
	}
#form p.submit{
	clear:both;
	padding:0 25px 20px 25px;
	margin:0;
	text-align:right;
	}
#form button{
	width:150px;
	height:37px;
	line-height:37px;
	border:none;
	background:url(form_button.jpg) no-repeat 0 0;
	color:#fff;
	cursor:pointer;
	text-align:center;
	}

So what do the elements in the above CSS code mean?

fieldset – A group of related content, used to make the form easier for users to follow.
legend – The caption to a fieldset.
input – The actual field that you enter information into.
label – The description found in front of an input element – “Name” or “Phone Number”, for example.
textarea – Like an input field, except for longer answers – “Comments”, for example.
select – A drop-down menu used to present multiple choices for you to choose from.
option – One of the choices contained within a drop-down menu.

With the basics down now you can begin to style your forms so that it can match your current sites theme or you can simply create a whole new look!

6. Spicing It Up with a Few Tutorials

To really make your web form “Incredible” you need to jazz it up with these handy open source tips and tricks.

Changing Form Input Styles on Focus with jQuery

This tutorial will show you how to spice up your form with CSS classes and default values that change according to which form item is selected.

Form field hints with CSS and JavaScript

This tutorial will show you how to get a nice text effect. As you tab through each input field, some helper text appears in box out to the right.

View Live Demo

Improve form usability with auto messages

This tutorial explains how to improve form usability by adding an auto message, the message will appear and disappear with a nice fade-in and fade-out effect when a user select a field.

Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we you will be able to see how to create a sliding login/signup panel for your website using Mootools 1.2.

FancyForm

From the site: “FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.”

7. The Use of Illustrations

The use of illustrations can draw attention to the eye and capture viewer’s thoughts. After all, you want them to contact YOU.

Just by adding simple image styles in your CSS you can now turn a basic styled form into an eye catching and stunning visual! There are no limits to your images so go wild!

Here are some web forms with great use of illustrations:

8. Error Displays and Postbacks

Error Displays

When a user makes a mistake, it’s your duty to show them the errors quickly and efficiently. Here are some ideas to make your forms display errors a little better:

Don’t just show the user one error. If they left 3 required fields blank, make sure that you tell them they have three errors, this way they can correct them all in one fell swoop.

Provide as much information to the user beforehand as possible. Examples of this would be marking a field as required, or explaining the minimum password length.

Be aware of the three validation options at your disposal: You can give responsive feedback straight from the JavaScript. The user benefits from instant feedback, but you will have to duplicate your validation functions on the client and server.

You can provide Degradable Ajax Validation that gets rid of the duplicated code, but increases the server load.

You may validate only on form submit which leaves you with no duplicated code, no additional server load, and unfortunately, no instant feedback.

Put some effort into the display of your error messages. Make them bold, noticeable, and throw in a bit of creativity. It is also best to stick with colours that the user is comfortable with red for errors, yellow for warnings, green for success. Obviously you can switch those up based on your evaluation, but going to far and making an error message pink could cause some confusion.

Postbacks

There is nothing more irritating than filling out a form, encountering an error, and having to retype all of your information all over again. In order to save your users from needless frustration, we need to ensure that all data is preserved. This means if there is an error, the fields should be repopulated. If we have a multistep form, back and forward navigation should also keep the form populated. A common approach is to set a form’s action to its current URL. That way, you can read in the form value and populate the fields immediately if there is an error. For example, just set the value to the post:

" />

And the field will be populated. If there is no error, just redirect the page to the form completion page.

9. On Focus

On Focus allows the user to see clearly what field they are entering in.

Visual cues, such as changing a field’s border color, help show the user which field has focus, and more. CSS provides an easy solution for adding borders with the border selector element, but this feature isn’t currently supported in IE and doesn’t work at all with select elements. Our solution creates custom borders and backgrounds by adding a span to each form element using a little J-Juice.

The concept here is that by enclosing our form element within a span, we can produce a unique effect. Don’t worry, you don’t need to hand code the span – this unobtrusive JavaScript function will dynamically add and remove it automatically.

The nice part is that the span can have background images, borders, and any other desired combination of the two to create an effect that will work on text, text area, and select elements.

Here is how everything looks when it is done:

The reason a state is needed for the span when the field does not have focus is to prevent shifting of the page. For example, if our custom span has 3 pixels of padding on focus, we need 3 pixels of transparent padding when there is no focus, so that we do not see form elements “jumping” as the user navigates them.

10. Experiment and Research

The last tip in order to create amazing web forms, contact forms, and eye-catching material, involves heavy experimenting and research. Search the web, gather ideas, and learn from them.

You need to plan ahead and become of aware of what tools you’ll be using, get your basic HTML and CSS down, and then get it to work with the desired backend code (PHP, Ajax, JavaScript, etc).

You should double check if your form is working, experimenting with a few different versions of your forms will allow you to better choose which form is more suitable for your site.

A few links to find inspiration for your web forms:

Beautiful Forms – Design, Style, & make it work with PHP & Ajax

HTML 101: How to Create Web Pages With HTML

HTML Forms and Input

Web Form Design: Modern Solutions and Creative Ideas

25 Web Form Optimization Tips

Try to spice up your form to make it stand out from the rest. You can add Illustrations and images to complete the styling for your form and correct all errors and postback values, apply onfocus to finish it up and there we have it: 10 tips for incredible web forms!