Skip to main content

How Canada Life is supporting you during COVID-19. Learn more

Generic Contact Form

Demo of features, customizations and reusable schemas

Email address field required for confirmation emails

A field with the name emailAddress is required if you want to send a confirmation email to the user. This field should be set as an email type and use email validations.

Custom content in designated slots

This is the {text} slot. It can be used to add a title and description before a form that will be hidden upon submission. Use a separate content block above if that content should remain visible.

This is the {required-fields-message} slot. It can be used to override the "all fields are required unless marked optional" content that appears above inputs. If you're wondering why this content can't just be in the {text} slot, click the submit button without adding an email, to trigger the form error.

Input sizes for individual fields

There are 4 standard input sizes to choose from, with 2 special sizes reserved for field groups. These are the standard sizes.

First and last name in a field group

Choose a field group and add two fields, choosing one of the 2 special fieldgroup sizes:

  • "Auto" for evenly sized columns (3 items would be 33.3333%, 4 would be 25%)
  • "Pairs" for groups of two (50% width regardless of # of items)

Custom CTA content and config

You can change the button style and label in the design options tab

Number fields and min/max validation

Example number range (0-100) using a number input

Options

  • Set input type to number
  • Set a "Min" value
  • Set a "Max" value

Validations

  • Use minValue to set the floor for valid numbers (should match the "Min" value from options)
  • Use maxValue to set the ceiling for valid numbers (should match the "Max" value from options)

Masked input types

These inputs provide special placeholder and lock in user input to a specific format. It is recommended that you use the default size for these fields. Validation is not required, other then setting "required".

Textarea (multi-line text input)

These are very useful for longform user content and should not be validated. You may want to consider setting autocomplete to "off"

Affixed formatted inputs

These inputs are built on top of the number type and provide special formatting, along with an affix (prefix or suffix symbol).

%
$

Datepicker field

This input type is composed of three inputs (month, day and year) that can be rearranged.

Select and select provinces fields

A dropdown-like input with options for the user to select from. Options must be set in the schema

A specific select for provinces is also available, with an option to include territories.

Checkbox groups

A group of options where multiple options can be selected

Checkbox group
Checkbox group

Radio groups

A group of options where only one option can be selected

Radio group
Radio group

A note about styling and layout

The Generic Contact Form component does not have any built in spacing, background options, container sizing, etc.

It is an intentional decision that layout and structure should be handled by a parent component that wraps this component. It is recommended that Container Block be used as a wrapper for most use cases. Columns and Postcard may also be suitable.

This example uses a container block.

Another layout example

This time, the form is within a columns component, which is within a postcard component.

Componentception!