Anatomy

Form

Properties

Actions

FormField

'email' | 'phone' | 'url' |'dateFormat'

Adding a Form

To add a Form to your page:

1. Open the Insert Menu and navigate to Components.

2. Drag and drop the desired Form template onto your page.

Templates

Email Form

This template includes a simple email field & submit button. It ships with a placeholder, email validation and a REST POST action to get you started.

Contact Form

The contact form template comes with a common set of fields used in Contact Forms. It ships with a default validation method and an example REST POST action.

Full Form

The Full Form template provides an example with most existing input types. It doesn’t ship with validation and is mostly intended to serve as reference of what’s available to copy/paste.

Validation

Each FormField contains validation properties that you can configure to match your needs. These fields are validated on the client side. Please ensure your services contain their own validations or use Server Action Validation.

Server action validation & Error Handling

Validations done on actions will also work with our form components. For that to happen, the return values of actions need to follow a few rules. On the returned object:

• Specific field errors should be returned on an errors field array. The FormFields will render each error message.

  export async function myAction(email: string) { 
    if(!email) {
     return { errors: [ {field: 'email', message: 'Email is required' } ] 
    }
  } 

• General errors should be returned on an error property. The error message will be returned under the FormError component

  export async function myAction(email: string) {
    if(!email) {
      return { error: 'Could not submit form' } 
    }
  } 

• For a success response, successMessage should be used. It will be displayed on the FormSuccessMessage component

  export async function myAction(email: string) {
    return { successMessage: 'Submitted!' };
  }

Guides

Form submission POST

1. Insert the Contact Form template under Components > Form on the Insert library

   

2. Select the Contact Form that was just added

3. Update the REST action url to match the service URL and bind body to your form.

   

Redirect to new page

Whether you want to redirect after the submission is done or want the form to simply redirect to a different page, redirecting to a different page and/or setting parameters based on the form submission, the navigate action has got you covered.

Starting from your preferred template or already existing form:

1. Select the Form on your composition

2. Click “New Action” and select navigate

   

3. Choose the desired URL

4. If applicable, add Query Parameters and bind the values to form fields

   

Submit form on change

Starting from your preferred template or already existing form:

1. Select the Form on your composition

2. Click “More Properties” to see the additional properties

3. Add submitOnChange and set it to true

Form validation

Starting from your preferred template or already existing form:

1. Find the field that requires validation and select its FormField. We’re editing the Contact Form name in this example

   

2. Under “More Properties”, add the validations your input requires. We’re adding required, minLength and maxLength in our example

3. Update required to true and set minLength and maxLength props

   

Disabling Submit button

Starting from your preferred template or already existing form:

1. Select the Button inside FormSubmit on your composition

   

2. Find the disabled property, or click “More Properties” and add disabled if it doesn’t exist

   

3. Bind the property to the desired condition.

A common scenario is to disable the Submit button until any change was made on the form. To do so:

1. Start by binding disabled to the Function isFalsy

   

2. Then bind isFalsy value argument to isDirty

   

Custom Code Form handler

Starting from your preferred template or already existing form:

1. Select the Form on your composition

2. Create a new action file or pick an existing one

3. Write the desired server action

Extending and customizing form templates

You can extend the existing Form templates or build your own using the given Form components. To achieve your desired Form, you’ll need:

• A Form component at the root of your form

• As many Form Fields as you require. It is extremely important to name them

• One or more actions on the form

• A FormSubmit, unless the Form submitOnChange property is true

Although optional, you should also add:

• ErrorMessage to display submission errors

• FormSuccess to signalize the form was submitted

• FormReset to reset the form state