Tips

10 Tips for Incredible Web Forms!

June 10, 2009 • By

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:

<div id="contact-content">
  <h3 id="contact-text">Contact</h3>
  <div id="freelance">I’m available for freelance work</div>
  <form id="myForm" action="send.php" method="get" name="myForm">
    <div id="form_box">
      <div>
        <p> First Name: </p>
        <input class="fieldclass" name="first_name" value="" type="text">
      </div>
      <div>
        <p> Last Name: </p>
        <input class="fieldclass" name="last_name" value="" type="text">
      </div>
      <div>
        <p> E-Mail: </p>
        <input class="fieldclass" name="e_mail" value="" type="text">
      </div>
      <div>
        <p> Message: </p>
        <textarea class="fieldclass" name="message" cols="40" rows="5"></textarea>
      </div>
      <div class="hr">
        <!-- spanner -->
      </div>
      <input name="button" id="submitter" value=" " type="submit">
    </div>
  </form>
  <div id="log">
    <div id="log_res">
      <!-- spanner -->
    </div>
  </div>
</div>

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:

<form id="form" action="/" method="post">
  <fieldset>
    <legend>Contact form</legend>
    <p class="first">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" size="30" />
    </p>
    <p>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" size="30" />
    </p>
    <p>
      <label for="web">Website</label>
      <input type="text" name="web" id="web" size="30" />
    </p>
  </fieldset>
  <fieldset>
    <p>
      <label for="message">Message</label>
      <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </p>
  </fieldset>
  <p class="submit"><button type="submit">Send</button></p>
</form>

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:

<input type="text" name="fname" value="<?=$_POST["fname"] ?>" />

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:


<span class="focus">
    <input type="text" id="fname" name="fname" />
</span>

<script type="text/javascript">
function showFocus() {
    this.parentNode.className = "focusHover";

function hideFocus() {
    this.parentNode.className = "focus";
}
</script>

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!