QuestionPoint
Select language:

Adding Custom Fields to Your Question Form

Contents

Introduction
Procedure
Sample Code for Custom Fields

Introduction

You can add up to 10 custom fields to your institution's question form. The fields can be any of the standard HTML form elements (text, textarea, radio buttons, checkboxes, or drop-down lists). This document includes a step-by-step procedure for creating custom fields.

If you are using a question form template with sample custom fields, you can use its custom fields as prototypes for creating other fields. You can also modify the size, label, and selections (for radio button fields and drop-down lists) for any of these fields.

This document provides a step-by-step procedure for adding new fields to your question form. It also includes the HTML code for several types of fields to copy, paste into your form, and then modify as needed. We will do our best to provide support on this procedure as written. The procedure assumes a certain level of familiarity with the appropriate Web technologies, and our support staff is not equipped to provide instruction in HTML, JavaScript, or Web design

If you are not familiar with HTML we recommend collaborating with your library's Webmaster to complete this task. Refer to Additional Resources in Adding the Patron Question Form to Your Web Site for links to some Web sites with basic HTML tutorials.

Back to top

Procedure

Step Action
1 Open your form (HTML file) in a text editor.
2

Use the samples below to obtain HTML code for to the type of field that you want to add.

3

Locate a line like that corresponds to the place in the form where you want to add the field:

<!-- You can insert added field(s) here -->

Position the cursor below this line and paste the code you copied in step 2. You can paste by pressing Control-V, selecting Edit -> Paste from your text editor's menu, or clicking your right (secondary) mouse button and selecting Paste from the context menu that pops up.
4

Regardless of the field type, make these modifications to the code for the new field:

  • Change "X" in fieldX and labelX to a numeric identifier for the field. Use numbers starting with "1" and subsequent numbers in sequence to represent the fields that you add to the form.

    Note:

    You must identify your custom fields as field1, field2, and so on, and their corresponding labels as label1, label2, etc. If you do not use these identifiers, they do not become part of the question when the patron submits the question to your library. Refer to the HTML code in the Example #2 and Example #3 question form templates as models for field naming.

    See the Exception below if you are adding a Name text field to your form.

  • Replace ZZZZZ with the label for the field that you want to display on the form.
  • Replace the Y with the letter that you want the patron to use to position the cursor in the field. Do not use N, E, or Q, since other fields in the form use these letters.

Example:

<! -- You can insert added fields here -- >
<! - Added field entry -- >
<tr>
   <th width="30%">
     <label for="field1" accesskey="F">Fax number:</label>
   </th>
   <td width="70%">
     <input type="hidden" name="label1" value="Fax number">
     <input type="TEXT" name="field1" id="field1" maxlength=255 size=50>
   </td>
</tr>

 

Exception:

If you are adding a Name text field to the form:

  • Change "fieldX" and "labelX" to "name".
  • Remove this line from the example code:

         <input type="hidden" name="labelX"
         value="ZZZZZ">

    • Identifying the field this way allows QuestionPoint to insert the patron's name into the appropriate field in its interface. For an example, look at the HTML code for the Name field in the Question Form Example #2 template.
    5

    Make the other modifications applicable to the field type, as described underneath the box that contains the field's code.

    Example:

    <!-- Added field entry -->
    <tr>
      <th width="30%" align="right">
         <label for "field3" accesskey="R">*Reason
    for research:</label>
       </th>
      <td width="70%">
        <input type="hidden" name="label3" value="Reason for research">
        <select name="field3" id="field3">
          <option value="0" selected>Select one</option>
          <option value=">General interest">General interest</option>
          <option value=">Publication/media project">Publication/media project</option>
          <option value=">School assignment">School assignment </option>
          <option value=">Work assignment">Work assignment</option>     
        </select>
      </td>
    </tr>
    <!-- End of added field -->
    6 Save the HTML file. View the file through a Web browser to make sure that the field appears correctly on the form.
    7 Back up your customized form with a new name. This preserves the changes you've made so far and allows you to start over from this point if necessary.
    8 Repeat steps 2-7 for other custom fields (up to 10).
    9 Return to Adding the Patron Question Form to Your Web Site and complete the remaining steps in this procedure.
    Back to top

    Sample Code for Custom Fields

    This section contains code samples for various types of custom fields:

    To copy a code sample to your form:

    • Click the Highlight All button above the box that contains the code.
    • With the code highlighted, right-click (click your secondary mouse button) anywhere in the box.
    • Select Copy from the context menu to copy the code to the clipboard.

    Text Field



    Modifications for text fields:

    • (Optional) Change the width of the field as it appears in the form (size=50).
    • (Optional) Change the maximum number of the characters that the field can hold (maxlength=255). The maxlength value cannot be greater than 255.

    Textarea Field



    Modifications for text area fields:

    • (Optional) Change the width of the field as it appears in the form (cols=50).
    • (Optional) Change the height of the field as it appears on the form (rows=6).

    Drop-Down List Field



    Modifications for drop-down list fields:

    • In <option> lines, change Value1 (or Value2, Value3, and so on, respectively) to the item as you want it to appear on the drop-down list.
    • Create additional <option> lines if you need them.
    • Remove the <option> lines that you do not need.

    Do not change the line that reads:

    <option value="0" selected>Select one</option>

    except that you can change "Select one" to another phrase of your choice.


    Radio Button Field



    Modifications for radio button fields:

    • In <input> lines, change Value1 (or Value2, Value3, and so on, respectively) to the item as you want it to appear on the drop-down list.
    • Create additional <input> lines if you need them.
    • Remove the <input> lines that you do not need.
    Back to top