|
Often, a Fusionary will encounter a situation where he or she is designing a form which needs to use a CGI script which is already on the server that the NOF site is being published to, but only has a page of “Sample HTML” to work from to get the form set up. Rather than import the HTML code (which can cause more complications than we would like to deal with sometimes), you can “Reverse Engineer” the HTML source code, pull out the relevant bits, and implement the form in NOF with 100% accuracy. Here´s how:
- Look through the HTML code for a line that begins with <FORM -
this is the line that defines the Form “Action” and “Method” - the Form “Action” is the text following the word ACTION= and the “Method” is the text following METHOD= . Make a note of these two settings, as these will determine where the information from the form is going.
- Next, we need to pick out the “Input” fields of the form. There are several types of Input fields, each with its own HTML tag.
- type = text - one-line text input fields. Use our Text field tool to create a plain text field
- type = password - “password” one-line text input fields. Use our Text Field tool to create a plain text field, then check the “Password Input” checkbox
- type = radio - “radio” buttons. Usually these appear grouped together with a common “group” name. Use the Radio Button tool to create two or more Radio Buttons
- type = textarea - “multi-line” text input fields. Use our “Multiline” text field tool to create this field.
- type = checkbox - “checkboxes”. Use our “Checkbox” tool to create this item.
- type = submit - The Submit Button. Use our button tool to create this, and set the button type to “Submit”
- type = reset - a “reset” button. Use our button tool to create this, and set the button type to “Reset”
- type = button - a “plain” button. Use our button tool to create this, and leave the button type set to “Button”
- type = image - This is a button which uses an image rather than the default “form button” format. Use our button tool to create this, click on the “Image” setting and use the “Browse” button to point NOF to the image you wish to use for this button.
- type = hidden - “Hidden Fields”. You can create hidden fields in the “Form Settings” dialog box. See below...
- Click in the “Layout” area so that the “Layout Properties” window appears. Check the “Layout Area is a Form” checkbox.
(If you wish to embed the form elements in a table, do so, then check the “Table is a Form” checkbox in the “Table Properties” window. If you wish to embed the form elements in a text object, do so, then check the “Text Object is a Form” checkbox in the “Text Box” tab of the “Text Properties” window.)
- Enter the information you found in the line that begins with <FORM into the “Form Settings” dialog box:
- the information after ACTION= goes into the “Form Action” box (minus the quotation marks)
- The hidden field information should be entered into the “Hidden Field” list. Click the “+” button to add hidden field names and values one-at-a-time.
- Click on “OK”. That should do it.
This procedure, by the way, is how I developed the Response-O-Matic and FormMail usage notes, located elsewhere on this site... :)
|