Forms

Page 2 Page 3 Page 4 Page 5
Learn to ...

If you haven't put a form on a web page before, please start here, where we will make a form.

If you know how to do that but not how to make it work - so you receive the information you need from visitors to your site - you can jump to Making it work.

Also, if you'd like to see an animated form tutorial, Michael Ahgren has a very nice one here.

I am still using Golive 6, so if you are using Golive CS, things may look a bit different.

Find the form tab of your object palette. If you hover your mouse over each of the items, you will see a message telling you what it is. If you go Window > Hints, you will see more detail as you hover over each item, with links to the help file - that might be all you need!

I will describe some of the items as we use them.

If you want to know about a particular one, just click on it in the image on the right. If you find yourself on another page, come back via the links at the top or bottom of each page. Hover over the links at the top for what's on each page.

Some of the icons on the right don't have a link, (look for the pointing finger) because they are not explained in detail here. For the moment please refer to your manual or online help for these.

Michael's video tutorial covers more of the options in the site referred to above, and there is a more complete list in the FAQ on the Adobe site here.

Forms TabList BoxPop UpRadio ButtonCheck BoxText AreaText FieldReset and SubmitForm Object

form objectThe most important item is the Form object. You start by dragging this onto your page and your whole form must be inside this object.

Here is what you see in layout view.
form object on page
Now drag a table inside the form object. Check that it is inside, and don't go any further until it is. I've made it a 2-column, 6-row table and centred it with the centering button on the toolbar. Like this. (I don't use the grid, but that works too).
table in form object
Name your form - this is important. Select the form icon itself on the page (the small square with an F in it) and look at the inspector. Overtype FormName with a sensible name for your form. The 'Empty Reference' will now be causing a green bug in your site window, and if you go View > Show Link Warnings, your entire form object will be red. Don't panic - this is because your form doesn't go anywhere yet. We will fix this when we come to 'Making it Work'.

Leave everything else for now, what you do with it depends on how you make your form work.

inspector
Text FieldNow we need to ask our visitor for some information - name and email address would be usual. You need the Text Field from the forms tab of the objects palette. In Golive 6, the icon we need is at the right hand end of the first row - hover over it to make sure you select 'Text Field' and not 'Text Area'. Drag it into the right hand side of your form and, with it selected, look at the inspector.

Overtype textfieldName with a suitable name for this field - 'name', without the quotes, would be good.

One thing to get used to right now - the names of your fields are case-sensitive. You may well want to refer to them later in hidden fields and 'phone' is not the same as 'Phone'. I suggest keeping to lower case, also don't use spaces or strange characters.

inspector

If you leave 'Content' blank, that's how your field will appear. (Fields are the parts of the form your visitor fills in). If you type anything in this box in the inspector, that text will appear in the box in your form, and your visitor will need to overtype it. I think that's confusing, but it's up to you.

'Visible' specifies how many characters will be seen in the box in the form. If you put a number in 'Max' then any characters after the maximum you specify will be cut off and lost. Mostly this is left blank.

Don't get excited about the 'Is Password Field' check box - if you check it, anything typed will appear as blobs, but there's more to making a truly password-protected form than this, just checking the box won't do it.

If you want to, you can check 'Tab' and type a number in the box. If you do this for each field, then people will be able to tab from one field to the next in the order you specify - so you could put '1' in here, then when you make the next field, put '2' and so on. I usually go back and do this last in case I change my mind while making the form.

So, we have made a start. To see where we've got to, Click here. I have colourised the table, made a heading, set the left hand column to 50%, added some cell padding and aligned the cells on the left to the right, adding text so people know what I am asking for. You can use the label object for this from the forms palette, check the manual, but I don't. (If my spelling looks funny, it's because I'm British!). You can type in the fields in the sample form in the popup, but of course you can't send the form

Page 2 | Page 3 | Page 4 (Make it work) | Page 5

golivebasics.com home page