Address Fields

Address fields are a collection of input boxes that are formatted to accept addresses. Address fields include input boxes for:

  • Street Address
  • Address Line 2
  • City
  • State / Province / Region
  • Postal / Zip Code
  • Country

Settings

Editing an Address Field in the Form Designer

  1. Select the field on the canvas, and the options will appear in the right pane.
  2. Under Field label, enter the field label that will appear next to the field on the form.
  3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label.
  4. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert variable button to include a variable with this text.
  5. Under Display options, select Required if users must fill in this field before submitting the form. Select Read-only if users should not be allowed to modify this field.

    6. Note: If a required field is hidden with a field rule, it is no longer required. A required field is only required when it appears on the form.

  6. Under Address Field Options, you can set alternate labels (including the use of variables) for each of the subfields, and whether the fields are shown on the form.
  7.  To configure advanced options, click the Advanced tab.
    • In the Advanced tab under Tooltip, specify the help text that will appear when users hover over the field.
    • Under CSS class, specify a CSS class to assign this field. Learn more about using CSS.
  8. Your field changes will be applied to the form automatically.

Note: The labels, tooltip, text above, and text below settings in the form designer support the use of simple HTML markup for formatting purposes.

Editing an Address Field in the Classic Form Designer

  1. Select the field on the canvas and click Edit.
  2. Under Field label, enter the field label that will appear next to the field on the form.
  3. Under Variable, specify a name for the field variable associated with this field. If you do not specify a variable name, Forms will automatically assign the field one based on its label. Learn more about variables.
  4. Under Field options, select Required if users must fill in the each part of the address field, with the exception of the Address Line 2 input box, before submitting the form. Select Read-only if users should not be allowed to modify this field when filling out the form.

    5. Note: If a required field is hidden with a field rule, it is no longer required. A required field is only required when it appears on the form.

  5. Under Text above field and Text below field, you can enter any additional text that should appear with the field. Click the Insert variable button to include a variable with this text in either designer.
  6. To configure advanced options, click the Advanced tab.
    • In the Advanced tab under Tooltip, specify the help text that will appear when users hover over the field.
    • Under CSS class, specify a CSS class to assign this field. Learn more about using CSS.
  7. When you are finished editing the field settings, click Done. Your changes will be applied to the form automatically.

The following features apply only to the classic form designer.

Modifying an address field's input box labels

You may want to change the labels associated with an address field. For example, you might want to hide the "Country" input box or change "City" to "Pais." These changes go beyond what is possible from the field's settings on the Edit page but are easily accomplished with JavaScript on the CSS and javaScript page in the classic form designer. Learn more about CSS and JavaScript.

Address field selectors

Each of the fields within an address field has a CSS class you can use to select it.

  • To target Street Address, use .Address1
  • To target Address Line 2, use .Address2
  • To target City, use .City
  • To target State / Providence / Region, use .State
  • To target Postal / Zip, use .Postal
  • To target Country, use .Country

Hiding one of the address field input boxes

If you do not want to display the Country input box for an address field, you can hide it using JavaScript. Insert the following code into the JavaScript section of the CSS and JavaScript page.

$(document).ready (function () {
$(".Country").parent().children().css('display', 'none');
})

Be sure to replace the selector (i.e., .Country) in the code with one that matches your address field.

Changing the label of an address field input box

You can change the labels for each input box within an address field. For example, to change State / Province / Region to State, you'd insert the following code into the JavaScript section of the CSS and JavaScript page.

$(document).ready (function () {
$(".State").siblings().text('State');
})

Additional Resources