To make things in HTML we use a series of tags, which are interpreted by a web browser and converted into something more meaningful to a user. Making a form is no different; we use a series of HTML tags which are interpreted by a browser to create the text fields, buttons and checkboxes we see as a user of the page. If you are creating a form, you will need to read through the page linked below before doing so: http://publish.ucc.ie/doc/siteowner?sectoc=4#forms
Another thing you have to do before you create a form is contact the webmaster with the following information:
1.
The full, exact URI (the address of the page) of your form. We need to know where the form is.
2.
The email address you want the data to appear to come from.
3.
The email address(es) you want the form data sent to. The data will be emailed to you; we need to know where to send it.
4.
The URI of the page you want users sent to afterwards.
We need this information so that the form can be registered on the web form script. If the form is not registered, it will be treated as unofficial and will not work.
Adding a form to a page will require editing the HTML of that page. To do this you will need to use the built-in HTML editor in the Content Management System. To open this HTML editor, first open the piece of content you are adding the form to.
On the menu of tools at the top of the “main_body” section, there is a tool titled HTML. Click on this to open the HTML editor.
This will open a window with the title “HTML Source Editor”. If you have already entered any content into the text area you will see this appear in this window, surrounded by HTML tags. This is where we will enter the HTML necessary to create your form.

To create a form you have to use a pair of tags. These tags go at the start and end of your form.
Everything to do with your form is put in between these two tags. At the start of your form is the <form> tag. This shows that you are creating a form. You can also apply different attributes to the form within this tag. These are declared between the “<form” and the “>”. We’ll get to this later on.
To end the form we use the </form>. In this tag, the forward slash signifies that the form is ending. In any element in HTML which requires two tags, the closing tag uses a forward slash to show the end of the element.
A form on any UCC site requires the form tag to have a certain set of attributes. The form attributes required are the method and action attributes. The method specifies how the data will be sent. The action attribute specifies where the data is sent once the form is submitted. More accurately, it points to the webform script, which processes the data and sends it on to the email you provide.
The attributes will be added inside of the form tag like so:
<form method= " post " action= " http://www.ucc.ie/cgi-bin/uncgi/webform " >
Creating a form in HTML
The rest of the elements in the form are placed between the two form tags. Most of these will require only one tag, unlike the form element itself, which requires two. Most of these elements are in fact created using the Input tag, which defines different types of input based on the attributes assigned to it.
We’ll go through creating the main input elements here, including text fields, checkboxes and radio buttons and submit buttons. We will also cover a few of the hidden input elements your form will need to ensure the data is collected in the right format.
Text Fields
A text field is a one line input field into which a user can enter text. The default width of a text field is 20 characters. Text fields are very useful for taking names or a line of an address. They are somewhat limited by the fact that they are only one line. The text field is created using the Input tag. As this is used to create a number of different input types of element, the tag is given a specific attribute to define

which type of input is being created. The element is also given a name attribute to identify it when the data has been submitted. It looks like this:
Creating a Text Field: <input type= " text " name= " firstname " />
It’s also worth noting that at the end of the input tag, we see a forward slash. In the case of single-tag elements, the forward slash is added to the end of the tag. This shows that the tag is a standalone, or self closing tag, and the browser does not have to go looking for a second tag to close off the pair.
When assigning the name attribute, you must be careful of how you name the field. Only certain characters are accepted in the name field, A-Z, a-z, 0-9 or underscore (_).The name must start with a letter. If you use any other characters, or don’t start the name with a letter, the form script will not recognise it and create an error.
Radio Buttons
Radio Buttons provide a user with a list of options. The user can only select one of these options. If a user tries to select a second option, the first option will be de-selected. Again, we use the input tag to create radio buttons.
Creating Radio Buttons: <input type= " radio " name= " gender " value= " male " />Male<br/>
One thing to note here is that both input tags have the same name value. This identifies the tags as being part of the same list, so that only one can be selected at any time. When a number of lists of radio buttons are created, each list must use a different name value.
Check Boxes
Check boxes perform a similar function to radio buttons, the difference being that while radio buttons only allow users to select one option, check boxes allow users to select one or more options from the

list. When an option is selected, clicking on it again will deselect it. Here’s a sample of creating a check box.
Create a Check Box: <input type= " checkbox " name= " transport " value= " car " />
The value attribute will not be shown next to the check box when you have created your form. It is necessary to put a piece of text next to the option to illustrate what each of the options is. The tag at the end of each line, <br/>, is there to end that line and put the next option on the line below. This is known as a line break.
Select List
A select list is a drop down list of options. A user can view the list by clicking on the arrow at the side of the box. The user can then select one option from the list. The select list is made using two separate tags. The first is the <select> tag, which defines the select list itself. The second is the <option> tag, which is used to define the options on the list. Each requires two tags, one to open the element, and one to close it. One of the major advantages of a select list over radio buttons is that it takes up less space on the page. However, it is not suitable as a replacement for check boxes, as the select list will only allow you to choose one option from a list, whereas you can select multiple options from a list of checkboxes. The select element uses the name attribute of the select tag and the value attribute of the option tag.
Select List: <select> and </select> to create the list. Options created using<option value= " train " >Train</option>
Submit Buttons
The submit button is used to send data to the address you specified in the <form> tag. At the top of your form you can specify an email address for the form data to be sent to, using a hidden input element.
When the submit button is clicked, the form data will be sent to this address, as well as any other actions you may have specified such as loading a new page when data has been sent etc. To create a submit button:

Adding a submit button: <input type= " submit " name= " submit " value= " Submit " />
In this case, the value " Submit " will be printed on the button, so there is no need to enter it separately to the input tag.
When you create a form it is required that you add certain hidden input elements. These will determine the file type used when sending the data, the address the data is sent to etc. A full list of the usable hidden input elements is available here: http://publish.ucc.ie/doc/siteowner?sectoc=4#forms .
Webform_dataformat
This defines the format for sending the data. Currently, there are 3 types accepted. The default is CSV comma separated values (, suitable for a spreadsheet). The others are XML (an XML file) and txt (a plaintext file of name= " value " pairs).
<input type= " hidden " name= " webform_dataformat " value= " txt " />
Webform_Datadest
The webform_datadest type is used to set the email address to which he data will be sent when the form is submitted. The data will be sent to you in the file format specified in the data format element.
Copy and paste the following code into the HTML editor in the CMS and replace “YourEmail@ucc.ie” with your own email address.
<input type= " hidden " name= " webform_datadest " value= " youremail@ucc.ie
" />

Webform_accumulate
This specifies the name of a file into which the form data will be accumulated. The file can then be downloaded for later processing. You must contact the Webmaster before using this field, to agree a suitable name and location for the file.
<input type= " hidden " name= " webform_accumulate " value= " fileLocation/Name " />
Webform_display
If this is set to a non-null value (if a value is entered for this type) this will cause the acknowledgement page to display the form data in a table for the user to read or print. If you use this, set the webform_nextpage_delay type to a suitable value in seconds (e.g. 60) to allow the user time to review the data and click print if they want.
<input type= " hidden " name= " webform_display " value= " 60 " />
Webform_email_response
If you wish to use this type, you will have to include an email address field in your form. The user puts their own email address into this field. You give this type the name of that field. The form script retrieves the email address and sends an acknowledgement to the user. Form data is not sent to this address.
<input type= " hidden " name= " webform_email_response " value= " emailField " />

Webform_formuri
This is the URI of the page the form is supposed to be at. If the form isn’t where it’s supposed to be, such as when it’s hosted on another page or sent as an email attachment, and thus has no URI of its own, this allows the webform script to identify the form by the URI it should have.
<input type= " hidden " name= " webform_formuri " value= " http://ww.ucc.ie/department/form " />
Webform_nextpage
Use this type to specify the URI of the page the user should be taken to once the page has been submitted.
<input type= " hidden " name= " webform_nextpage " value= " http://www.uccc.ie/nextpage " />
Webform_nextpage_delay
This sets the time-delay in seconds between submitting the form and going to the URI specified in webform_nextpage. This can be set to any positive whole number: 10 or 15 is usually long enough to allow users to read the submission acknowledgement. For minimum delay, set it to zero.
<input type= " hidden " name= " webform_nextpage_delay " value= " 10 " />

Webform_owner
This holds the email address of the person who is responsible for maintaining the form. Any form mailer errors get sent to this address for handling.
<input type= " hidden " name= " webform_owner " value= " email@ucc.ie
" />
Webform_reformat
This type enables the script to reformat the data as a typographically-formatted PDF document using a named XSLT script. Currently this option is restricted. If you think you need it, contact the webmaster.
<input type= " hidden " name= " webform_reformat " value= " scriptname " />
Webform_sender
This is the email address that the data will appear to come from when sent to the email address provided in webform_datadest. The default is webmaster@ucc.ie.
<input type= " hidden " name= " webform_sender " value= " webmaster@ucc.ie
" />
Webform_spam
Used to control forms spam (where spammers flood your form with the URIs d their financial scams, medication sites, porn sites etc.). By default (if you omit this field) the form data is allowed to contain one URI without causing rejection. If you set it to “reject” then no URIs will be allowed. If you set it to any other value, data containing URIs can be sent without restriction (not recommended)
<input type= " hidden " name= " webform_spam " value= " reject " />

There are two ways of going about this. The first is to create a table normally in the CMS. The easiest way to do this is to draw out a plan of the table as it will appear once the form is in place. This will show how many rows and columns will be needed, to fit the entire form. Bear in mind that if one row needs to have 8 cells, then you need to set the number of columns to 8. You can then delete or merge cells as you go to make the table neater. You will still need to understand the HTML used to create the table as you will have to fit each form element into a table. Using this method will make creating the table itself quicker though.
Let’s take a simple example.
This table started as a table with 4 columns and 2 rows, with 4 cells in each row. The main options you will need in the Insert/Modify Table menu is the number of columns and rows. You can also set the border thickness. The default is to not have any border, but it can be easier to see what cell you are editing if you have a border. This can be removed afterwards.
When the table is created, you can then merge the top 4 cells into one wide cell. Right click on the table in the row you want to merge the cells, go to cell and select merge table cells.
This will open a small dialogue box, in which you select how many rows and columns you want to merge.
In this case I selected only one row, and 4 columns, to merge the 4 cells in the first row into one cell.

Now you have to add the form elements into the table, in this case the four radio buttons. You can enter the text in the first row now. Open the HTML editor and look at the HTML that is already in place. You should see the four cells in the second row appear as a line of elements similar to: <td>&nbsp ;< /td>.
You can simply replace the &nbsp; with the HTML to implement a radio button.
This should leave you with a two row table, the first row containing one cell and the second row containing 4 cells. The same method can be used for creating longer forms.
Alternatively you can write the HTML yourself around the form code to create the table. There are 3 main tags used to create a table. The first is the <table> tag. This is the equivalent of the form tag above.
This tag starts off the table, and is paired with the </table> tag, which ends the table. Everything you want to put in your table goes in between these two tags.
Inside the table you then create rows and cells. To make a row you use the <tr> and </tr> tags, placed at the start and end of a row. Inside each row you can create cells. These are created using the <td> and
</td> tags, again going at the start and end of a cell.
It may be easier in many cases, particularly if you have no experience of HTML to use the Create Table function in the CMS than to write the HTML yourself.