Freeola Internet Get Dotted Domains Blog Guides Chat

Viewing Thread:
'Creating a web form, using HTML'

Sun 03/12/06 at 19:21:
cjh
Regular
"It goes so quickly"
Posts: 4,083
HTML Web forms

Many web pages are simply designed to show content to a user, but there are times when you'll want your web site to allow that user to interact with either you, or your web site.

This can be done using web forms, HTML code which adds user input fields or selection options to your web page. Such a web form can be used for a simple search engine, like Google, or for accepting an order from an online store, such as amazon.

This knowledge base entry is intended to show you how you can accept user input from an HTML web form. This article won't teach you how to use that data beyond this point, however (though there are a few notes about using the Freeola Form to Mail script at the end). You will need to create your own PHP / CGI scripts for that, or acquire them from many of the free web sites that offer them. You can enquire about such scripts on the Freeola web forum.

This article also assumes a basic grasp of the HTML language, so wonít contain any explanation as to how to create a fully working web page; merely how to add a web form to an existing web page.

The beginning of the HTML form

The first step in any web form is to define it within the HTML source, which is done using the
element. This element can contain a number of attributes. One such attribute is action, which contains the web address that the web browser should send the form data to, such as action=" http://freeola.co.uk/formdata.php".

The element can also contain an id attribute, so that you can refer to it when using CSS or JavaScript.

Another attribute that can be placed with the element is method, which tells the web browser how to send the data to the web address referred to in the action attribute. This value can be either method="get", or method="post". A get method means the form data is sent as one long web address, known as a query string, and is the default value if a method isnít set, while a post method means the form data is sent hidden within the web address request. Depending on which method you use may depend on how you can access this form data from a PHP or CGI script.

Even though the default method is set to get, a lot of web sites choose to use the post method, which is what weíll be using here.

An example of defining a web form in HTML may look like this:


id="myform" method="post" action="http://freeola.co.uk/formdata.php">
Ö HTML form elements go here Ö



Ö where the value of the action attribute would need to be changed to whichever web address you wish the form data to go, which for Freeola customer sites, could be a PHP or CGI script.

One other attribute you may need to use is enctype. The default value for this is application/x-www-form-urlencoded, and is the most common used enctype, so you wonít usually need to add it. If youíre using a web form which asks a user to upload a file, however, such as a photo, then youíll need to use the enctype attribute, and set the value to multipart/form-data. For example:


enctype="multipart/form-data" action="http://freeola.co.uk/formdata.php">
Ö HTML form elements go here Ö



If your web form doesnít contain a file upload option, you donít need to add the enctype attribute. There are a couple other attributes available to the
element, but arenít really necessary for the majority of web sites.

Form controls

Now that the web form has been defined, we can now create some control elements to go within it. Most control elements are created using the element with the type attribute, but can also be created via the

You canít set a maximum character limit for a

Linking text and a form control together, using

You can associate a form control and text together using the element, and this will allow the web browser to link the two, enabling the user to click on the text to activate the form control. This is also important for screen reader software, so using the element should always be considered.

There are two ways in applying a , the first being to simply surround the text and form element, for example, First Name: , and this would cause the text First Name to be associated with the form control.

However, you may not always be able to do this, because the text and form control may not be next to each other within the HTML source code (even though they may appear so in the web browser). Such an example would be if you were to set out your form in an HTML table, with the text in the left column, and the form control in the right. This is where the for and id attributes come in handy.

When giving a form control an id, it allows it the be referenced later on, by CSS, JavaScript, and a . Using the for attribute within a will link it with whichever form control is being referenced. For example:




id="firstname">



id="surname">


... or when using an HTML table:











id="firstname">
id="surname">



If you wish, you may also add a title attribute, which can contain a small piece of text that the user will see displayed in a tool tip when they hover their mouse over the main screen text. For example:







... will display "Please enter your firstname" and "Please enter your surname" respectively when the mouse is moved over the form controls associated text.

Hidden form control values, using

You can create hidden form controls that a user cannot directly see or alter. This is so youíre able to pass certain values to a PHP or CGI script. The same element is used for this, using the type attribute with the value hidden, along with just a name and value attribute, for example:


type="hidden" name="hideme" value="hidden 1" >
type="hidden" name="hidemealso" value="hidden 2" >
type="hidden" name="hidemetoo" value="hidden 3" >


These hidden values will be available to you in the same way user entered data is. Because these are hidden elements, they do not need to have an id, size or maxlength attribute, nor do they need to have a , because the user wonít see or use them themselves. This is to benefit you, the web site owner, in passing values which you feel are required (for example, if you use the same script for multiple web forms).

File upload form control, using .

If you want your users to be able to send you a file, (in the same way they may attach a file to an email) you can use an upload form control, which will place a text input and button on your web page. The user will be able to use the button to browse their hard drive, and select which file they would like to upload. Youíll again using the element, with the type attribute set to file:





You canít set a maxlength attribute for this form control, nor can you set the text which appears on the button.

As mentioned previously, if you want to use this type of form control, you will need to add the enctype="multipart/form-data" attribute to your element. You will also need to set up your receiving PHP / CGI script to handle the uploaded file.

Bullet point selection list, using

A bullet point selection list, or radio button, presents the user with a list of options, where only one option from a group can be selected. This is done using the radio keyword within the type attribute, for example type="radio">. The name attribute must be the same for each form control, otherwise the web browser wonít know which radio button belongs to which group. If you wish to have more than one group of options using a radio button list, you will need to give each group a separate name, but ensure each form control within the same group share the same name, for example:


Do you own 1 or more cars?



Do you own 1 or more bikes?




The value element allows you to set the text that is sent for the selected option. If you do not add your own value attribute to each radio button, the web browser will set its own text, such as "checked", "ticked" or "on". Each web browser can set different text, so it is best to set your own, so you know what to expect.

The checked="checked" attribute allows for one option to be pre-selected for the user within each group of radio buttons. If you placed the checked="checked" attribute within more than one radio button within the same group, the final radio button in the list will be selected, for example (code striped down slightly):


apple
checked="checked"> lemon
carrot
checked="checked"> cake
chocolate


... would result in cake being the pre-selected option, as it is the final radio button with the checked="checked" attribute within the same named group.

In the first radio button example above, each form control (radio option) and the text which relates to it are placed within the element, so the id attribute within each control and the for attribute within the arenít needed (unless you wish to use the id attribute for CSS and JavaScript references).

Tick box selection list, using

The tick box, or checkbox element as itís called, works in the same way as a radio option, except that they arenít grouped in the same way, so you can have multiple checkboxes, and tick them all, or none, or half, rather than just the one. The code for a checkbox is type="checkbox">, and requires the same attributes as a radio button, for example:






Again, because each form control (checkbox) and the text which relates to it are within the element, the id and for attributes arenít needed.

One quick PHP note: If you are going to be using PHP, you can give each checkbox the same name if you append square brackets [ ] to the end, such as name="vehicle[]" and PHP will automatically put the results in an array.

A checkbox also makes use of the checked="checked" attribute, pre-selecting any option which includes it. Unlike a radio button, you can pre-select more than one checkbox, even if they share the same name (as noted in the previous paragraph).

Menu selection box, using and elements, where and closing </select> elements.

An example selection list could be asking the user which is their favourite games console, and offering up pre-defined selection of answers:






You can decide if the selection menu should appear as a single drop-down or larger menu using the size attribute within the size="4"
>. By default, the value is 1, which means only 1 option is shown, therefore producing a single drop-down menu. If the value is higher, for example, 4, then a larger, possibly scrollable, menu is produced (scrollbars will appear if there are more than 4 options).

If you make use of the multiple="multiple" attribute within the multiple="multiple">, the menu becomes a multiple selection menu, allowing the use to make more than one selection. When doing this, be sure to specify a larger size, to make it easier for the user.






If you are using a PHP script, you must use square brackets [ ] at the end of the name attribute, otherwise PHP will not have all the user selected options available to it.

In the same way that the checked="checked" attribute pre-selected your default option for a radio and checkbox menu, you can apply the selected="selected" attribute to whichever you would like to be selected by default within a
label="group heading">





If we were to divide our previous example up in to , we could choose to use the name of the company who makes the consoles as our label (each group heading):






As you can see from the final code, you donít have to place every option within an .

The element can be used in both single and
multiple selection lists.


Submit and reset buttons, using , or

The final part of a web form is the submit button, which enables the user to actually send what they have filled in to you. There are two types of submit button, a bog-standard general button, and a custom image button. The image button basically allows you to design your own button in an image-editing program, and use that in place of a regular button.

Regular submit button:
type="submit" name="submit" value="submit">

Ö the text on the button will be that of the value attribute.

Image submit button:
type="image" src="submit.png" name="submit" value="submit" alt="submit">

Ö like an element, the image location is referred to via the src attribute, and the alt attribute is used in place for screen readers, or if the image fails to load.

When using an image button, web browsers will also send the coordinates that were clicked, although you will rarely (if ever) find a use for them.

You can also include a reset button, which will clear the form of user data and revert back to any default values. This is done using the reset keyword, rather than submit within the type attribute. The name and value attributes work in the same way as the submit form control.

type="reset" name="reset" value="clear form">

For whatever reason, youíre not able to directly use an image button for the reset option, so you either have to use a regular button, or make the image a regular link back to the current page.

However, not many sites use a reset button anymore, because if a user were to hit it by mistake, they can become quite annoyed, and lay blame on the web site, rather than their own miss-click. For this reason, it is generally recommend that you donít include a reset button, unless you really feel the need.

Button controls donít require a element, as they are self-explanatory (i.e the text that goes with it appears on the button itself).

There is also a button control that doesnít cause a submit or reset, which can be created using type="button". This doesnít really have any use unless youíre using JavaScript.

Group your form together, using
and

For larger web forms, you can divide up the form by grouping form controls together by using the
element, and giving it a title or heading via the element, for example:



Section A: about you
Ö HTML form controls here Ö



Section B: about your career
Ö HTML form controls here Ö



Section C: about your schooling
Ö HTML form controls here Ö



Giving each
its own id allows you to reference it using CSS or JavaScript individually. Because no form data for a
or exist as such, you do not need to give them a name attribute.

And that, is that - see for yourself

Take a look at an example of a web form, which make use of the above mentioned form elements. The script that the form submits to is a basic PHP script that simply lists the form data that is received, as well as the associated form control names.

Freeola Form Mail Script

As mentioned at the beginning, Freeola offer a pre-coded Form to Mail PHP script, which is automatically available to you via your web space. This script allows you to create your own HTML web form, and have the data filled in by a user sent to one of your Freeola email addresses.

The web address of this script will depend on your domain name. The script is located under your domain name, as /cgi-bin/form_to_mail.php, so if your domain name was johnsmith.com, the web address to the PHP script would be http://www.johnsmith.com /cgi-bin/form_to_mail.php, and so when writing your element, it may look something like this:



Ö rest of form code here Ö



You will also need to set some pre-defined values for the PHP script, which you can do using the element, as mentioned near the top of this guide. This MUST include the email address you want the results to go to (one of your Freeola addresses), but may also include:

- The email address you want the results email to appear from.
- The subject you want the results email to contain.
- A list of required form fields the user must fill in before the results are sent.
- The web address of a thank you page once the results are sent.

To have the results sent to you, add your email address as a hidden form element, using the code: recipient" value="your Freeola address">, where your Freeola address should be replaced with which ever Freeola email address you would like to use.

For the other options, to set the from address, use the code from" value="from address here">, which must also be one of your Freeola email addresses. You could previously set this to any email address you liked, which allowed you to use the email address of the person filling in the form, but this was altered by Freeola to prevent spam abuse.

To set the subject of the email sent to you, use the code subject" value="email subject">, where email subject will be the text that appears in the email subject line.

To prevent the form from being emailed to you with empty form controls, you can use the code require" value="firstname,age,comments">. The value of this element must be the exact values you used in each form controls name attribute, divided by a comma. In this example, the form controls with the name attributes set to firstname, age and comments must be filled in by the user before the form will submit.

Finally, to send them to a custom web page once theyíve submitted the completed form, use the code success_redirect" value=" http://www.johnsmith.com/thanks.htm">, where http://www.johnsmith.com/thanks.htm is the full web address of your thank you page.

When putting together your web form, make sure your own name attributes don't clash with the pre-set ones above.

If you have any questions or are in need of a little help with your HTML web forms, you are always welcome to post as such on the Freeola web forums.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
Wed 06/05/09 at 08:28:
Moderator
"Are you sure?"
Posts: 4,853
rockhopper wrote:
> Hi,
> I wonder if you could help. I am about to create a form
> following the Form_to_mail code example that Freeola have so
> thoughtfully provided. But I need to send the resulting data to
> two recipients. Can I just add an address as example below? or do
> I have to use another method.
>
> > name="recipient" value=
> "[email protected],
> [email protected]">

>
> Thanks
> Matt

Hi rockhopper and welcome to the forums!
Blimey you've dug up an old thread here :¨)

Yes the syntax you provided works - I've just tested it to make sure...




Search Freeola Chat
Tue 05/05/09 at 18:10:
Regular
Posts: 7
Hi,
I wonder if you could help. I am about to create a form following the Form_to_mail code example that Freeola have so thoughtfully provided. But I need to send the resulting data to two recipients. Can I just add an address as example below? or do I have to use another method.



Thanks
Matt
Thu 22/03/07 at 15:18:
Regular
Posts: 1,014
Fingers and legs crossed they will make that decision soon many thanks for this posting

Kev

cjh wrote:
> UPDATE (22nd March 2007):
>
> Due to recent changes to the form to mail script by Freeola to
> prevent spam abuse, you can no longer set the > type="hidden" name="from" value="from
> address here">
field to the email address of the
> person filling in the form. This field now must also be set to
> an email address listed under your Freeola account.
>
> Because of this change, you can no longer use your email
> software's reply function as easily as before. A request
> has been made to Freeola to add the option > type="hidden" name="reply-to"
> value="user-email">
to their form to
> mail script, so hopefully this will be considered soon.
Thu 22/03/07 at 14:07:
cjh
Regular
"It goes so quickly"
Posts: 4,083
UPDATE (22nd March 2007):

Due to recent changes to the form to mail script by Freeola to prevent spam abuse, you can no longer set the field to the email address of the person filling in the form. This field now must also be set to an email address listed under your Freeola account.

Because of this change, you can no longer use your email software's reply function as easily as before. A request has been made to Freeola to add the option to their form to mail script, so hopefully this will be considered soon.
Sun 03/12/06 at 19:21:
cjh
Regular
"It goes so quickly"
Posts: 4,083
HTML Web forms

Many web pages are simply designed to show content to a user, but there are times when you'll want your web site to allow that user to interact with either you, or your web site.

This can be done using web forms, HTML code which adds user input fields or selection options to your web page. Such a web form can be used for a simple search engine, like Google, or for accepting an order from an online store, such as amazon.

This knowledge base entry is intended to show you how you can accept user input from an HTML web form. This article won't teach you how to use that data beyond this point, however (though there are a few notes about using the Freeola Form to Mail script at the end). You will need to create your own PHP / CGI scripts for that, or acquire them from many of the free web sites that offer them. You can enquire about such scripts on the Freeola web forum.

This article also assumes a basic grasp of the HTML language, so wonít contain any explanation as to how to create a fully working web page; merely how to add a web form to an existing web page.

The beginning of the HTML form

The first step in any web form is to define it within the HTML source, which is done using the
element. This element can contain a number of attributes. One such attribute is action, which contains the web address that the web browser should send the form data to, such as action=" http://freeola.co.uk/formdata.php".

The element can also contain an id attribute, so that you can refer to it when using CSS or JavaScript.

Another attribute that can be placed with the element is method, which tells the web browser how to send the data to the web address referred to in the action attribute. This value can be either method="get", or method="post". A get method means the form data is sent as one long web address, known as a query string, and is the default value if a method isnít set, while a post method means the form data is sent hidden within the web address request. Depending on which method you use may depend on how you can access this form data from a PHP or CGI script.

Even though the default method is set to get, a lot of web sites choose to use the post method, which is what weíll be using here.

An example of defining a web form in HTML may look like this:


id="myform" method="post" action="http://freeola.co.uk/formdata.php">
Ö HTML form elements go here Ö



Ö where the value of the action attribute would need to be changed to whichever web address you wish the form data to go, which for Freeola customer sites, could be a PHP or CGI script.

One other attribute you may need to use is enctype. The default value for this is application/x-www-form-urlencoded, and is the most common used enctype, so you wonít usually need to add it. If youíre using a web form which asks a user to upload a file, however, such as a photo, then youíll need to use the enctype attribute, and set the value to multipart/form-data. For example:


enctype="multipart/form-data" action="http://freeola.co.uk/formdata.php">
Ö HTML form elements go here Ö



If your web form doesnít contain a file upload option, you donít need to add the enctype attribute. There are a couple other attributes available to the
element, but arenít really necessary for the majority of web sites.

Form controls

Now that the web form has been defined, we can now create some control elements to go within it. Most control elements are created using the element with the type attribute, but can also be created via the

You canít set a maximum character limit for a

Linking text and a form control together, using

You can associate a form control and text together using the element, and this will allow the web browser to link the two, enabling the user to click on the text to activate the form control. This is also important for screen reader software, so using the element should always be considered.

There are two ways in applying a , the first being to simply surround the text and form element, for example, First Name: , and this would cause the text First Name to be associated with the form control.

However, you may not always be able to do this, because the text and form control may not be next to each other within the HTML source code (even though they may appear so in the web browser). Such an example would be if you were to set out your form in an HTML table, with the text in the left column, and the form control in the right. This is where the for and id attributes come in handy.

When giving a form control an id, it allows it the be referenced later on, by CSS, JavaScript, and a . Using the for attribute within a will link it with whichever form control is being referenced. For example:




id="firstname">



id="surname">


... or when using an HTML table:











id="firstname">
id="surname">



If you wish, you may also add a title attribute, which can contain a small piece of text that the user will see displayed in a tool tip when they hover their mouse over the main screen text. For example:







... will display "Please enter your firstname" and "Please enter your surname" respectively when the mouse is moved over the form controls associated text.

Hidden form control values, using

You can create hidden form controls that a user cannot directly see or alter. This is so youíre able to pass certain values to a PHP or CGI script. The same element is used for this, using the type attribute with the value hidden, along with just a name and value attribute, for example:


type="hidden" name="hideme" value="hidden 1" >
type="hidden" name="hidemealso" value="hidden 2" >
type="hidden" name="hidemetoo" value="hidden 3" >


These hidden values will be available to you in the same way user entered data is. Because these are hidden elements, they do not need to have an id, size or maxlength attribute, nor do they need to have a , because the user wonít see or use them themselves. This is to benefit you, the web site owner, in passing values which you feel are required (for example, if you use the same script for multiple web forms).

File upload form control, using .

If you want your users to be able to send you a file, (in the same way they may attach a file to an email) you can use an upload form control, which will place a text input and button on your web page. The user will be able to use the button to browse their hard drive, and select which file they would like to upload. Youíll again using the element, with the type attribute set to file:





You canít set a maxlength attribute for this form control, nor can you set the text which appears on the button.

As mentioned previously, if you want to use this type of form control, you will need to add the enctype="multipart/form-data" attribute to your element. You will also need to set up your receiving PHP / CGI script to handle the uploaded file.

Bullet point selection list, using

A bullet point selection list, or radio button, presents the user with a list of options, where only one option from a group can be selected. This is done using the radio keyword within the type attribute, for example type="radio">. The name attribute must be the same for each form control, otherwise the web browser wonít know which radio button belongs to which group. If you wish to have more than one group of options using a radio button list, you will need to give each group a separate name, but ensure each form control within the same group share the same name, for example:


Do you own 1 or more cars?



Do you own 1 or more bikes?




The value element allows you to set the text that is sent for the selected option. If you do not add your own value attribute to each radio button, the web browser will set its own text, such as "checked", "ticked" or "on". Each web browser can set different text, so it is best to set your own, so you know what to expect.

The checked="checked" attribute allows for one option to be pre-selected for the user within each group of radio buttons. If you placed the checked="checked" attribute within more than one radio button within the same group, the final radio button in the list will be selected, for example (code striped down slightly):


apple
checked="checked"> lemon
carrot
checked="checked"> cake
chocolate


... would result in cake being the pre-selected option, as it is the final radio button with the checked="checked" attribute within the same named group.

In the first radio button example above, each form control (radio option) and the text which relates to it are placed within the element, so the id attribute within each control and the for attribute within the arenít needed (unless you wish to use the id attribute for CSS and JavaScript references).

Tick box selection list, using

The tick box, or checkbox element as itís called, works in the same way as a radio option, except that they arenít grouped in the same way, so you can have multiple checkboxes, and tick them all, or none, or half, rather than just the one. The code for a checkbox is type="checkbox">, and requires the same attributes as a radio button, for example:






Again, because each form control (checkbox) and the text which relates to it are within the element, the id and for attributes arenít needed.

One quick PHP note: If you are going to be using PHP, you can give each checkbox the same name if you append square brackets [ ] to the end, such as name="vehicle[]" and PHP will automatically put the results in an array.

A checkbox also makes use of the checked="checked" attribute, pre-selecting any option which includes it. Unlike a radio button, you can pre-select more than one checkbox, even if they share the same name (as noted in the previous paragraph).

Menu selection box, using and elements, where and closing </select> elements.

An example selection list could be asking the user which is their favourite games console, and offering up pre-defined selection of answers:






You can decide if the selection menu should appear as a single drop-down or larger menu using the size attribute within the size="4"
>. By default, the value is 1, which means only 1 option is shown, therefore producing a single drop-down menu. If the value is higher, for example, 4, then a larger, possibly scrollable, menu is produced (scrollbars will appear if there are more than 4 options).

If you make use of the multiple="multiple" attribute within the multiple="multiple">, the menu becomes a multiple selection menu, allowing the use to make more than one selection. When doing this, be sure to specify a larger size, to make it easier for the user.






If you are using a PHP script, you must use square brackets [ ] at the end of the name attribute, otherwise PHP will not have all the user selected options available to it.

In the same way that the checked="checked" attribute pre-selected your default option for a radio and checkbox menu, you can apply the selected="selected" attribute to whichever you would like to be selected by default within a
label="group heading">





If we were to divide our previous example up in to , we could choose to use the name of the company who makes the consoles as our label (each group heading):






As you can see from the final code, you donít have to place every option within an .

The element can be used in both single and
multiple selection lists.


Submit and reset buttons, using , or

The final part of a web form is the submit button, which enables the user to actually send what they have filled in to you. There are two types of submit button, a bog-standard general button, and a custom image button. The image button basically allows you to design your own button in an image-editing program, and use that in place of a regular button.

Regular submit button:
type="submit" name="submit" value="submit">

Ö the text on the button will be that of the value attribute.

Image submit button:
type="image" src="submit.png" name="submit" value="submit" alt="submit">

Ö like an element, the image location is referred to via the src attribute, and the alt attribute is used in place for screen readers, or if the image fails to load.

When using an image button, web browsers will also send the coordinates that were clicked, although you will rarely (if ever) find a use for them.

You can also include a reset button, which will clear the form of user data and revert back to any default values. This is done using the reset keyword, rather than submit within the type attribute. The name and value attributes work in the same way as the submit form control.

type="reset" name="reset" value="clear form">

For whatever reason, youíre not able to directly use an image button for the reset option, so you either have to use a regular button, or make the image a regular link back to the current page.

However, not many sites use a reset button anymore, because if a user were to hit it by mistake, they can become quite annoyed, and lay blame on the web site, rather than their own miss-click. For this reason, it is generally recommend that you donít include a reset button, unless you really feel the need.

Button controls donít require a element, as they are self-explanatory (i.e the text that goes with it appears on the button itself).

There is also a button control that doesnít cause a submit or reset, which can be created using type="button". This doesnít really have any use unless youíre using JavaScript.

Group your form together, using
and

For larger web forms, you can divide up the form by grouping form controls together by using the
element, and giving it a title or heading via the element, for example:



Section A: about you
Ö HTML form controls here Ö



Section B: about your career
Ö HTML form controls here Ö



Section C: about your schooling
Ö HTML form controls here Ö



Giving each
its own id allows you to reference it using CSS or JavaScript individually. Because no form data for a
or exist as such, you do not need to give them a name attribute.

And that, is that - see for yourself

Take a look at an example of a web form, which make use of the above mentioned form elements. The script that the form submits to is a basic PHP script that simply lists the form data that is received, as well as the associated form control names.

Freeola Form Mail Script

As mentioned at the beginning, Freeola offer a pre-coded Form to Mail PHP script, which is automatically available to you via your web space. This script allows you to create your own HTML web form, and have the data filled in by a user sent to one of your Freeola email addresses.

The web address of this script will depend on your domain name. The script is located under your domain name, as /cgi-bin/form_to_mail.php, so if your domain name was johnsmith.com, the web address to the PHP script would be http://www.johnsmith.com /cgi-bin/form_to_mail.php, and so when writing your element, it may look something like this:



Ö rest of form code here Ö



You will also need to set some pre-defined values for the PHP script, which you can do using the element, as mentioned near the top of this guide. This MUST include the email address you want the results to go to (one of your Freeola addresses), but may also include:

- The email address you want the results email to appear from.
- The subject you want the results email to contain.
- A list of required form fields the user must fill in before the results are sent.
- The web address of a thank you page once the results are sent.

To have the results sent to you, add your email address as a hidden form element, using the code: recipient" value="your Freeola address">, where your Freeola address should be replaced with which ever Freeola email address you would like to use.

For the other options, to set the from address, use the code from" value="from address here">, which must also be one of your Freeola email addresses. You could previously set this to any email address you liked, which allowed you to use the email address of the person filling in the form, but this was altered by Freeola to prevent spam abuse.

To set the subject of the email sent to you, use the code subject" value="email subject">, where email subject will be the text that appears in the email subject line.

To prevent the form from being emailed to you with empty form controls, you can use the code require" value="firstname,age,comments">. The value of this element must be the exact values you used in each form controls name attribute, divided by a comma. In this example, the form controls with the name attributes set to firstname, age and comments must be filled in by the user before the form will submit.

Finally, to send them to a custom web page once theyíve submitted the completed form, use the code success_redirect" value=" http://www.johnsmith.com/thanks.htm">, where http://www.johnsmith.com/thanks.htm is the full web address of your thank you page.

When putting together your web form, make sure your own name attributes don't clash with the pre-set ones above.

If you have any questions or are in need of a little help with your HTML web forms, you are always welcome to post as such on the Freeola web forums.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment