Advanced HTML forms
Form Elements
A CGI form is made up of elements that are inserted into your HTML document. There are several element types that are available to insert into your form, the following section will explain some of the most popular.
Text Box
A text box element allows you to have a field where text can be entered.
The text box can be set to any length along one line. The syntax for the above text box would be as follows:
<label>Please enter your name: <br />
<input type="text" name="textbox" id="textbox" />
</label>
Text Area
The text area element is basically a larger version of the text box, text areas allow you to have scrolling rows and columns therefore allowing the user to enter more information.
The text area can be set to any amount of rows and columns. The syntax for the above text area would be as follows:
<label>Please provide comments:
<br />
<textarea name="textarea" id="textarea" cols="60" rows="5"></textarea>
</label>
Radio Buttons
Radio buttons are commonly used as option buttons i.e. to choose one option or another.
The syntax for the above radio buttons would be as follows:
<p>Choose Yes or No:</p>
<table width="200">
<tr>
<td><label>
<input type="radio" name="radiogroup" value="yes" id="radiogroup_0" />
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="radiogroup" value="no" id="radiogroup_1" />
No</label></td>
</tr>
</table>
Checkbox
Checkboxes are similar to radio buttons but allow the user to choose more than one option.
The syntax for the above checkbox would be as follows:
<label>Do you accept our Terms and Conditions? <br />
<input type="checkbox" name="checkbox" id="checkbox" />
</label>
Submit/Reset Button
The submit button is always necessary when designing a form, as without it the form will not be sent to anyone. The reset button clears all the fields and allows the user to start again.
The syntax for the above buttons would be:
<label>Submit Form:<br /> <input type="submit" name="submit" id="submit" value="Submit" /> </label> <label>Clear Form:<br /> <input type="reset" name="clear" id="clear" value="Reset" /> </label>
Form Fields
As well as the form elements it is important to have various form fields, these specify what to do with the form when it is submitted. The different form fields are listed below.
Necessary Form Field
There is only one form field that you must have in your form, for FormMail to work correctly. This is the recipient field.
| Field: | recipient |
| Description: | This form field allows you to specify where your form results will be mailed to. Most likely you will want to configure this option as a hidden form field with a value equal to that of your Madasafish e-mail address. |
| Syntax: | <input type="hidden" name="recipient" value="YOUR EMAIL ADDRESS"> |
Optional Form Fields
| Field: | subject |
| Description: | The subject field will allow you to specify the subject that you wish to appear in the e-mail that is sent to you after this form has been filled out. If you do not have this option turned on, then the script will default to a message subject: WWW Form Submission |
| Syntax: | If you wish to choose what the subject is: <input type="hidden" name="subject" value="Your subject"> To allow the user to choose a subject: <input type="text" name="subject"> |
| Field: | |
| Description: | This form field will allow the user to specify their return e-mail address. If you want to be able to return e-mail to your user, I strongly suggest that you include this form field and allow them to fill it in. This will be put into the From: field of the message you receive. |
| Syntax: | <input type="text" name="e-mail"> |
| Field: | realname |
| Description: | The realname form field will allow the user to input their real name. This field is useful for identification purposes and will also be put into the From: line of your message header. |
| Syntax: | <input type="text" name="realname"> |
| Field: | redirect |
| Description: | If you wish to redirect the user to a different URL, rather than having them see the default response to the fill-out form, you can use this hidden variable to send them to a pre-made HTML page, perhaps a thank you page. |
| Syntax: | <input type="hidden" name="redirect" value="http://your.address.to/direct/to/"> |
| Field: | required |
| Description: | You can now require for certain fields in your form to be filled in before the user can successfully submit the form. Simply place all field names that you want to be mandatory into this field. If the required fields are not filled in, the user will be notified of what they need to fill in, and a link back to the form they just submitted will be provided. |
| Syntax: | If you want to require that they fill in the e-mail and phone fields in your form, so that you can reach them once you have received the mail, use a syntax like: <input type="hidden" name="required" value="e-mail,phone"> |
| Field: | sort |
| Description: | This field allows you to choose the order in which you wish for your variables to appear in the e-mail that FormMail generates. You can choose to have the field sorted alphabetically or specify a set order in which you want the fields to appear in your mail message. By leaving this field out, the order will simply default to the order in which the browsers sends the information to the script (which isn't always the exact same order they appeared in the form.) When sorting by a set order of fields, you should include the phrase "order:" as the first part of your value for the sort field, and then follow that with the field names you want to be listed in the e-mail message, separated by commas. |
| Syntax: | To sort alphabetically: <input type="hidden" name="sort" value="alphabetical"> To sort by a set field order: <input type="hidden" name="sort" value="order:name1,name2,name"> |
| Field: | print_config |
| Description: | print_config allows you to specify which of the config variables you would like to have printed in your e-mail message. By default, no config fields are printed to your e-mail. This is because the important form fields, like e-mail, subject, etc... are included in the header of the message. However some users have asked for this option so they can have these fields printed in the body of the message. The config fields that you wish to have printed should be in the value attribute of your input tag separated by commas. |
| Syntax: | If you want to print the e-mail and subject fields in the body of your message, you would place the following form tag: <input type="hidden" name="print_config" value="email,subject"> |
| Field: | title |
| Description: | This form field allows you to specify the title and header that will appear on the resulting page if you do not specify a redirect URL. |
| Syntax: | If you wanted a title of 'Feedback Form Results': <input type="hidden" name="title" value="Feedback Form Results"> |
| Field: | return_link_url |
| Description: | This field allows you to specify a URL that will appear, as return_link_title, on the following report page. This field will not be used if you have the redirect field set, but it is useful if you allow the user to receive the report on the following page, but want to offer them a way to get back to your main page. |
| Syntax: | <input type="hidden" name="return_link_url" value="http://address.to.your/page"> |
| Field: | return_link_title |
| Description: | This is the title that will be used to link the user back to the page you specify with return_link_url. |
| Syntax: | <input type="hidden" name="return_link_title" value="Back to Main Page"> |
| Field: | background |
| Description: | This form field allows you to specify a background image that will appear if you do not have the redirect field set. This image will appear as the background to the form results page. |
| Syntax: | <input type="hidden" name="background" value="http://address.to.your/background/image.gif"> |
| Field: | bgcolor |
| Description: | This form field allow you to specify a bgcolour for the form results page in much the same way you specify a background image. This field should not be set if the redirect field is. |
| Syntax: | For a background colour of white: <input type="hidden" name="bgcolor" value="#FFFFFF"> |
| Field: | text_color |
| Description: | This field works in the same way as bgcolor, except that it will change the colour of your text. |
| Syntax: | For a text colour of black: <input type="hidden" name="text_color" value="#000000"> |
| Field: | link_color |
| Description: | Changes the colour of links on the resulting page. Works in the same way as text_color. Should not be defined if redirect is. |
| Syntax: | For a link colour of red: <input type="hidden" name="link_color" value="#FF0000"> |
| Field: | vlink_color |
| Description: | Changes the colour of visited links on the resulting page. Works exactly the same as link_color. Should not be set if redirect is. |
| Syntax: | For a visited link colour of blue: <input type="hidden" name="vlink_color" value="#0000FF"> |
| Field: | alink_color |
| Description: | Changes the colour of active links on the resulting page. Works exactly the same as link_color. Should not be set if redirect is. |
| Syntax: | For an active link colour of blue: <input type="hidden" name="alink_color" value="#0000FF"> |
Has this page helped you solve your problem? Your feedback helps us to improve the help we provide.
Rate this page : 
Please note: We cannot reply to individual feedback through Rate My Page. If you need more help with a problem please use Contact Us.
: General Information
: Planned Maintenance
