Welcome to FormGenics.com!

FormGenics is a HTML Form code generator. It creates the necessary HTML and JavaScript code for any form that you create using the easy question and answer styled wizard.

What kind of forms can you create with FormGenics? You can create email contact forms, membership sign-up forms, log in forms, application forms, cool HTML forms, download forms, comment forms, polls, support ticket forms, simple forms, complex forms...

If you have ever had difficulties creating a HTML form or are just too busy to write one from scratch, then you are in the right place!

Easy, simple, and free. Click here to get started right away or quickly view the Quick Start Instructions. For more advanced help, check out the Comprehensive Help Guide and our Support Forum.

home
  
create form
  
support forum
  
contact
  
terms of use
  
Introduction
Quick Start Guide
Comprehensive Help Guide
Support Forum
FAQs


Articles
Back to Basics
Forms Part 1
Back to Basics
Advanced Forms Part 2
Back to Basics
Form Tips & Tricks Part 3
Designing Consistent Form Field Sizes
Getting the Most Out of Your Form
Form Processing - Working with CGI


 


 


You don't need to fill out any forms to get a parabolic satellite dish, satellite dish receivers, a satellite tv dvr or a dish network satellite television from Tv-Providers.com!
author

Back to the Basics and Beyond

Form Tips & Tricks


Part 3
By Shelley Lowery

In part one of this series we focused on setting up a basic form on your website. We discussed the Form Element Attributes and began the Form Element Properties.

In part two of this series, we continued with the Form Element Properties and moved on to some more advanced form options.

In part three of this series we will focus on some great tips and tricks you can use to spice up your forms.

If you missed part one, you can find it here: https://formgenics.com/articles/form basics part 1.php

If you missed part two, you can find it here: https://formgenics.com/articles/form basics part 2.php

Form Tips and Tricks

Now that you have a basic understanding of forms and how you can place them within your website, we'll now focus on a few "tips & tricks" you can use to spice up your forms.

Creating A Default Form Option

The OPTION tag is used to create options listed in a drop down box of a form. You can select a default option, by adding the word "selected" within your OPTION tag.

<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT>
Customizing Your Input Boxes

You can specify the size of your INPUT box by changing the SIZE value. In addition, you can change the amount of text input by changing the MAXLENGTH value. When specifying the MAXLENGTH value, make sure you provide your visitors with enough space to type in the necessary information.

<INPUT type="text" SIZE="10" MAXLENGTH="40">
Adding Color to Your Input Boxes (IE)

The INPUT tag is used to create input fields within a web page form. You can change the font, input text color, input text size and the background color of your INPUT box by using STYLE tags.

<FORM>
<INPUT type="text" STYLE="color: #FFFFFF; 
font-family: Verdana; font-weight: bold; font-size: 12px;
background-color: #72A4D2;" size="10"
maxlength="30"> </FORM>
Disappearing Form Text

You can display default text within your text input boxes that magically disappears when you click inside the box. This will enable you to provide your visitors with an example of text they should place within your text box.

<INPUT type="text" name="url"
value="http://www.yourdomain.com" size="30"
onfocus="value=''">

Change the "value="http://www.yourdomain.com" text to the default text you would like to be displayed within your text box.

Flashing Cursor in Form on Load

You can set up your forms so that when the page loads your visitor's cursor will be flashing within your text box.

Place the following code witin your <BODY> tag. This code tells the browser to place the cursor within the "customer" form in the "email" text box.

<body onLoad="focus();customer.email.focus()">

The "customer" text represents the name of your form. The name attribute should be added to your form like this:

<form name="customer">

You can change the name to whatever you'd like. However, make sure you also change it within your <BODY> tag as well. They must be the same.

The "email" text represents the name of your form element. The <input> attribute should be written like this:

<input type="text" name="email">

You can change the "email" name to whatever you'd like. However, make sure you also change it within your <BODY> tag as well. They must be the same.

Tabbing Through Forms

You can enable your visitors to tab through your form fields simply by adding "tabindex" to your INPUT tags.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" name="name" 
size="20" maxlength="30" tabindex="1"> <INPUT type="text" name="address"
size="20" maxlength="30" tabindex="2"> <INPUT type="text" name="email"
size="20" maxlength="30" tabindex="3"> <INPUT type="text" name="url"
size="20" maxlength="30" tabindex="4"> <INPUT type="Submit" VALUE="Submit"> </FORM>

The "tabindex" value determines the order in which you will tab through the text boxes. If you would like the tab order to skip a certain area, such as check boxes and radio buttons, simply use a negative value beginning with "-1" then "-2" and so on. Each negative value will be bypassed when tabbing through your form.

Customizing Form Colors

You can completely customize the look of your forms simply by using STYLE tags.

Each of the following examples will enable you to customize your forms in specific colors. You can change the colors by changing the hexadecimal color codes.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6
cols=20 STYLE="scrollbar-face-color: #317B9C;
scrollbar-track-color: #87B4C9; scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color: #B8D7E6; scrollbar-shadow-color: #1E6180; scrollbar-highlight-color: #7CBCDA; scrollbar-darkshadow-color: #1E6180">
This example displays the scrollbars in an alternative color.
You can change these colors to whatever
you'd like simply by changing the hexadecimal color codes. </TEXTAREA> <INPUT type="Submit" VALUE="Submit"
STYLE="color:#FFFFFF; background: #317B9C; font-weight: bold"> <INPUT type="Reset" VALUE="Reset"
STYLE="color:#FFFFFF; background: #317B9C; font-weight: bold"> </FORM>

The following example displays a form with colored scrollbars and text. The text is displayed in a specific font and the face of the button displays an image background.

This example will require you to include an image. Simply create a small patterned 2x2 .gif image and upload it to your server. You will need to replace the (yourimage.gif) text within the "Submit" and "Reset" background values to the URL of your image.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual"
name="comments" rows=6 cols=20
STYLE="scrollbar-face-color: #317B9C; scrollbar-track-color: #87B4C9; scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color: #B8D7E6; scrollbar-shadow-color: #1E6180; scrollbar-highlight-color: #7CBCDA; scrollbar-darkshadow-color: #1E6180">
This example displays the
scrollbars in an alternative color.
The text is displayed in a specific font and
the face of the button displays an image background. </TEXTAREA> <INPUT type="Submit" VALUE="Submit"
STYLE="color: #FFFFFF; background: url(yourimage.gif);
font-family: Verdana, Helvetica; font-weight: bold"> <INPUT type="Reset" VALUE="Reset"
STYLE="color: #FFFFFF; background: url(yourimage.gif);
font-family: Verdana, Helvetica; font-weight: bold"> </FORM>

The following example displays a form with a colored background, scrollbars and text. The text is displayed in a specific font and the face of the button displays an image background. You will need to replace the (yourimage.gif) text within the "Submit" and "Reset" background values to the URL of your image.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TEXTAREA wrap="virtual" name="comments" rows=6
cols=20 STYLE="background:#EAE8E8;
scrollbar-face-color: #317B9C; scrollbar-track-color: #87B4C9; scrollbar-arrow-color: #54A1C4; scrollbar-3dlight-color: #B8D7E6; scrollbar-shadow-color: #1E6180; scrollbar-highlight-color: #7CBCDA; scrollbar-darkshadow-color: #1E6180">
This example displays a form with a
colored background, scrollbars and text.
The text is displayed in a specific font
and the face of the button displays an image background.
</TEXTAREA> <INPUT type="Submit" VALUE="Submit"
STYLE="color: #FFFFFF; background: url(yourimage.gif);
font-family: Verdana, Helvetica; font-weight: bold"> <INPUT type="Reset" VALUE="Reset"
STYLE="color: #FFFFFF; background: url(yourimage.gif);
font-family: Verdana, Helvetica; font-weight: bold"> </FORM>

Keep in mind, if you change the colors of your scrollbars and buttons, make sure your selected colors match your website's color scheme. In addition, always make sure your text is clearly visible through your background colors.

Forms provide you with an excellent alternative to snail mail. Your visitor's information can be instantly processed right over the Internet. This information might include taking orders, collecting customer information, or even allowing your visitors to provide you with feedback. The possibilities are endless.

Copyright © Shelley Lowery

About the Author:

Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery. http://www.webdesignmastery.com And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book. http://www.ebookstarter.com Visit Web-Source.net to sign up for a complimentary subscription to Etips and receive a copy of the acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net

forum  |  contact  |  articles  |  donate  |  privacy policy  |  site map  |  link to us
copyright ©2011 FormGenics.com | all rights reserved