HTML Tips for Form Creation

When you are creating or editing a Profile Update Form, this quick HTML reference may help you alter the form to meet your needs. For additional instructions on how to use HTML code, see a Web site such as http://www.w3schools.com/html/

Form elementExampleHTML codeResult
Input text field<input name="campo5" type="text" maxlength="100" />The text entered by the user will be saved in the recipient field that has ID campo5
Checkbox<input type="checkbox" name="campo2" value="Action" /> Action <input type="checkbox" name="campo2" value="Adventure" /> AdventureThe value associated with the checkbox selected by the user will be saved in the recipient field that has ID campo2. In this case, if the user selects both of them, the value saved will be "Action, Adventure"
Radio button<input name="campo7" type="radio" value="M" /> Male <input name="campo7" type="radio" value="F" /> FemaleThe value associated with the radio button selected by the user will be saved in the recipient field that has ID campo7. In this case, if the user selects "Male", the value saved will be "M"
Dropdown<select name="campo9" id="campo9"> <option value="rrrr">rosa</option> <option value="gggg">giallo</option> </select>The value associated with the drop-down menu item selected by the user will be saved in the recipient field that has ID campo9. In this case, if the user selects "rosa", the value saved will be "rrrr"
List<select name="campo8" size="4"> <option value="bbbb">bianco</option> <option value="vvvv">viola</option> <option value="libero">grigio</option> </select>The value associated with the list item selected by the user will be saved in the recipient field that has ID campo8. In this case, if the user selects "bianco", the value saved will be "bbbb"
Multiple selection list<select name="campo5" size="4" multiple="multiple"> <option value="bbbb">bianco</option> <option value="vvvv" selected="selected">viola</option> <option value="liber">grigio</option> </select>The value associated with the list items selected by the user will be saved in the recipient field that has ID campo5. In this case, if the user selects "bianco" and "viola", the values saved will be "bbbb,vvvv"
Groupsname=group

You can use check boxes, radio buttons, lists, etc. For example, with checkboxes, you would have:

<input type="checkbox" name="group" value="10" /> Volleyball
<input type="checkbox" name="group" value="11" /> Basketball
<input type="checkbox" name="group" value="12" /> Tennis

The user will be assigned to the groups selected on the form.

Please note:

  • Use the Codes Table to look up the Group IDs (they are always integers).
  • To set whether a field should be required, configure that property in your Recipient fields
  • Each recipient field can accept up to 100 characters. You can use the maxlenght attribute of an input field to limit the input to 100 characters. For more information on this, see for example: http://www.w3schools.com/tags/att_input_maxlength.asp
  • You can submit a value invisibly when then form is submitted by setting a field as hidden (type="hidden")
  • You can pre-fill a field with the value that currently exists in the database by using dynamic fields. For example, value="[name]" to pre-fill the first name text input field with the recipient's name
  • The form must always include a hidden or visible field with name="email" and value="[email]". Otherwise an error message will be shown when the form is submitted.
  • Remember that Recipient fields are shared across all Lists in the same account.
  • Anybody that fills out a Profile update form is automatically assigned to a new group that is created with the name of the form. To prevent this from happening, remove the following line of code from the HTML that is created by default by the system when you add a new form:

    <input type="hidden" id="apgroup" name="apgroup" value="ID of the new group added automatically">
 Examples
 1Changing an input text field into a radio button (e.g. gender)
 Original

Gender <input name="campo5" type="text" maxlength="100" />

 NewGender: <input name="campo5" type="radio" maxlength="100" value="M"/>Male <input name="campo5" type="radio" maxlength="100" value="F"/> Female
 2Changing from a group of input text fields to a set of radio buttons
Original 

<input id=group84 type=checkbox value=84 name=group> Male  <input id=group78 type=checkbox value=78 name=group> Female <input id=group67 type=checkbox value=67 name=group> Skip question

New<input id=group84 type="radio" value="84" name=group> Male <input id=group78 type="radio" value=78 name=group> Female <input id=group67 type="radio" value=67 name=group> Skip question
 3Changing from an input text field to a drop-down
Original

State:  <input name="campo8" type="text" maxlength="100" />

New

State: <select name="campo8">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>

Related Topics