NordSecurity.Design

Form

Overview

Forms are used to gather specific information from users with a set of input controls and then submit that data to the system.

When to use

To submit information, such as initiating a process, signing into an account, requesting information, or buying a product.

Anatomy

  1. Title
  2. Slot
  3. Google ReCaptha
  4. Button
  5. Required

Variants & States

Content

Our forms have great flexibility when it comes to adding content. You can use content slots to add form field components, enabling users to enter or select data. These fields can be customized with components like input, select checkboxes and radio buttons.

Form Fields

The Form Field is a wrapper component that consists of Label, Input, and ErrorMessage components. You can customize the input fields with components such as input, select, and checkbox.

Labels

Effective labeling helps users understand what information to enter into a text input. Text fields should always have a label.

Best practices for labels:

  • Capitalize only the first letter of labels, unless you’re dealing with product names or proper nouns.
  • Keep labels short and straightforward.
  • Don’t put colons after label names.

Required fields

The recommended method for required fields is to include an asterisk next to the field label.

Validation

Use validation and error messages to indicate when a form submission fails or requires additional information. Keep the error message as short and clear as possible.

After successfully submitting a form, provide users with immediate feedback through a “Success” alert, or a “Thank You” page, particularly in scenarios like e-commerce confirmations.

If a form submission encounters an issue, display an “Critical” alert message to inform users of the problem and guide them on what to do next.

Internationalization

For RTL (right-to-left) languages, there are no custom adjustments made.

Properties

Name Type Values Description
inputs Array An array of input components that form the structure of the form.
component Boolean true
false		 Specifies the component to be used as the input field.
props Properties for the input component.
required Boolean true
false		 Indicates whether the input is mandatory.
type String text
password
number
email		 The type of the input field.
label String Label text for the input field.
isTextArea Boolean true
false		 Specifies if the input field should be a textarea.
classes String Custom CSS classes for the input field.
inputDebounceMs String number Time in milliseconds for debouncing input events.
onData String Callback when data is entered or changed in the input.
errorMessage String Specifies the error messages to display.
invalidEmail String General error message for invalid input.
invalid String Error message for missing required input.
required String Custom CSS class for the error message.
errorMessageClass String Google ReCaptcha site key for form validation.
captchaSiteKey String The POST request URL where the form data will be sent.
action String The URL to which the user will be redirected after a successful form submission.
onSuccessUrl String The URL to which the user will be redirected after a successful form submission.

Usage Guidelines

DoAll input components need labels.
Don’tDon't rely solely on placeholders as labels.
DoUse sentence case for labels and placeholders.
Don’tDon’t use capital letters in labels. They are harder to read and so make it harder to complete the form.
DoClearly communicate fields that are required. For required fields, add an asterisk next to the label.
Don’tDon't leave users guessing which fields are optional or mandatory.
DoOnly use the provided styles for the form.
Don’tDon't change the default stylings for color, text or borders to create a new look.
DoAlways include a submit button in forms.
Don’tDon't create forms without a submit button

Content Guidelines

We use forms to collect only specific information, avoiding optional or sensitive details unless they are essential, and we explain why each piece of information is needed. The text should be aligned with this goal.

Voice and tone

Short, clear, and instructional, prioritizing user-friendliness over technical terms.

Copy

Title

  • We state the purpose of the form in a short, descriptive way.
  • We omit articles and possessive pronouns.

For input guidelines, see the Input component page.

Accessibility

  • Hints that disappear when typing should be avoided or contain non-essential information, since users can’t recheck them without deleting their progress.
  • Errors should be narrated immediately after appearing on the screen
  • Mind where the focus drops after the form is closed. This change of the content may introduce issues such as phantom elements, screen jumps, and element skipping.
DoEnter website or IP address [hint] example.com or 000.000.0.0
Don’tDomain or IP address [hint] Type your answer
DoReport a website issue
Don’tFill this out below to continue