How do I create a form?

[fermenk]

I need to create a form similar to the information below though I have changed it from RMNET to colours for confidentiality purposes and to make it easier to follow.

All the information that needs to be included in the form is listed below.
I would like to know how to hide the options in step 2 until the relative option has been selected from the dropdown box in step 1.

I would also like to know how i can set up an attachment space (step 4) for customers to attach pdfs.

The trickiest bit I find however is making sure the selected information from each step is sent via a submit button to a chosen email address as an easy to read list of questions and answers.

How can I include all of this information (while keeping what needs to be hidden hidden) and have it submitted to an email address?




---+++ Step One: Choose a Colour
<br /> Please choose your favourite colour from the following: <br /> <select name="s_Category" > <option selected="selected" value+"">Colour</option> <option value="O1">Yellow</option> <option value="O2">Blue</option> <option value="O3">Red</option> <option value="O4">Green</option></select>

---+++ Step Two: Colour Preference Details

---+++++ Option 1 - Yellow
| Name a Yellow Object | <input type="text" name="f_name" />* |
| Name of Yellow Animal | <input type="text" name="f_name" />* |
| Favourite Shade of Yellow | <input type="text" name="f_name" />* |
| How long have you liked this colour | <input type="text" name="f_name" />* |
| What is your second favourite colour | <input type="text" name="f_name" /> |
| Would you get married in this colour | <select name="M" > <option value="NO">NO</option> <option selected="selected" value="YES">YES</option> </select> * |

---+++++ Option 2 - Blue
| Name a Blue Object | <input type="text" name="f_name" />* |
| Name of Blue Animal | <input type="text" name="f_name" />* |
| Favourite Shade of Blue | <input type="text" name="f_name" />* |
| How long have you liked this colour | <input type="text" name="f_name" />* |
| What is your second favourite colour | <input type="text" name="f_name" /> |
| Would you get married in this colour | <select name="M" > <option value="NO">NO</option> <option selected="selected" value="YES">YES</option> </select> * |

---+++++ Option 3 - Red
| Name a Red Object | <input type="text" name="f_name" />* |
| Name of Red Animal | <input type="text" name="f_name" />* |
| Favourite Shade of Red | <input type="text" name="f_name" />* |
| How long have you liked this colour | <input type="text" name="f_name" />* |
| What is your second favourite colour | <input type="text" name="f_name" /> |
| Would you get married in this colour | <select name="M" > <option value="NO">NO</option> <option selected="selected" value="YES">YES</option> </select> * |

---+++++ Option 4 - Green
| Name a Green Object | <input type="text" name="f_name" />* |
| Name of Green Animal | <input type="text" name="f_name" />* |
| Favourite Shade of Green | <input type="text" name="f_name" />* |
| How long have you liked this colour | <input type="text" name="f_name" />* |
| What is your second favourite colour | <input type="text" name="f_name" /> |
| Would you get married in this colour | <select name="M" > <option value="NO">NO</option> <option selected="selected" value="YES">YES</option> </select> * |

---+++ Step Three: List Friends
<br /> List 4 friends that also like this colour. <br />
| | Firstname or Initials | Surname | Gender |
| 1 | <input type="text" name="f_name" /> | <input type="text" name="f_name" /> | <select name="QA" > <option selected="selected" value="-">-</option><option value="Male">Male</option> <option value="Female">Female</option> </select> |
| 2 | <input type="text" name="f_name" /> | <input type="text" name="f_name" /> | <select name="QA" > <option selected="selected" value="-">-</option><option value="Male">Male</option> <option value="Female">Female</option> </select> |
| 3 | <input type="text" name="f_name" /> | <input type="text" name="f_name" /> | <select name="QA" > <option selected="selected" value="-">-</option><option value="Male">Male</option> <option value="Female">Female</option> </select> |
| 4 | <input type="text" name="f_name" /> | <input type="text" name="f_name" /> | <select name="QA" > <option selected="selected" value="-">-</option><option value="Male">Male</option> <option value="Female">Female</option> </select> |

---+++ Step Three: Attach Photo
Please attach a pdf of you dressed in the colour you chose.

Attach(?)

Submit(?)

[johny10151981]

OnChange of drop down box call a javascript function, and write code to unhide the certain filed in that function