Form

Documentation: Form Component

The Form Component is a versatile Vue.js component designed to handle form submissions with support for various input types, validation, and feedback. It includes built-in functionalities for handling form data, displaying validation errors, and integrating with reCAPTCHA for additional security.

Overview

The Form Component provides a customizable form interface that can dynamically render different field types based on configuration data. It includes features for form validation, success/error messaging via toast notifications, and optional reCAPTCHA integration. This component is ideal for use cases where complex forms are required, such as user registration, feedback forms, or contact forms.

Model Documentation

The model object configures the Form Component, defining its structure, field types, and other settings.

Model Structure

id: String
A unique identifier for the form component, used as the id attribute in the HTML.

cssClass: String
Optional CSS class(es) for additional styling of the form container.

header: String
Optional header text displayed above the form.

alignment: Number
Alignment of the header, where 1 is left, 2 is center, and 3 is right.

buttonText: String
Text displayed on the form's submit button.

showReCaptcha: Boolean
Determines whether to show the reCAPTCHA widget.

emailProfileId: String
Identifier used for email-related operations.

fields: Array
List of field configurations for the form. Each field includes:

name: String
Name of the field.

label: String
Label for the field.

type: Number
Type of the field (1 for text, 2 for textarea, 3 for email, 4 for file).

required: Boolean
Whether the field is required.

value: String
Value of the field.

isHidden: Boolean
Whether the field is hidden.

hasValidationError: Boolean
Whether the field has validation errors.

validationMessage: String
Validation error message for the field.

Example Model

{
  "id": "contact-form",
  "cssClass": "contact-form",
  "header": "Contact Us",
  "alignment": 2,
  "buttonText": "Submit",
  "showReCaptcha": true,
  "emailProfileId": "contact@mywebsite.com",
  "fields": [
    {
      "name": "name",
      "label": "Full Name",
      "type": 1,
      "required": true,
      "value": "",
      "isHidden": false,
      "hasValidationError": false,
      "validationMessage": "Name is required."
    },
    {
      "name": "email",
      "label": "Email Address",
      "type": 3,
      "required": true,
      "value": "",
      "isHidden": false,
      "hasValidationError": false,
      "validationMessage": "Valid email address is required."
    },
    {
      "name": "message",
      "label": "Message",
      "type": 2,
      "required": false,
      "value": "",
      "isHidden": false,
      "hasValidationError": false,
      "validationMessage": ""
    },
    {
      "name": "attachment",
      "label": "Attachment",
      "type": 4,
      "required": false,
      "value": "",
      "isHidden": false,
      "hasValidationError": false,
      "validationMessage": ""
    }
  ]
}

Component Structure

The Form Component consists of the following parts:

Header Section: Displays the header text if provided.

Toast Notifications: Shows success or error messages using toast notifications.

Form Fields: Renders different input types based on the field configuration.

reCAPTCHA Widget: Optionally includes reCAPTCHA for spam protection.

Buttons: Includes submit and clear buttons.

HTML Template

The HTML structure of the component is as follows:

JavaScript

The JavaScript portion defines the component's behavior, including data handling, form validation, and submission.

Explanation

Data Handling: The component manages form data and validation states through its data properties.

Form Validation: Validates fields based on type and required status. Shows error messages if validation fails.

reCAPTCHA Integration: Optional integration for additional security. Ensures users are not bots before submitting the form.

Toast Notifications: Provides visual feedback on form submission success or error.

Usage

To use the Form Component in a Vue.js application:

Include the Component:
Ensure that formdefault is registered in your Vue app.

Provide the Model:
Pass a configuration object to the component, defining fields, labels, and other settings.

Handle Submission:
Implement _sendEmail method to handle form submission logic, such as sending data to a server.

Integrate reCAPTCHA:
Configure reCAPTCHA API key if needed for spam protection.

Documentation: Form Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Usage#