CREATE WEB-FORM USING LIGHTNING WEB COMPONENTS SALESFORCE

What is a Web Form?

A web form (also called an HTML form) allows users to input data that is sent to a server for processing. These forms are commonly used for various tasks, such as submitting shipping or credit card information for orders, or querying search engines. They can include elements like checkboxes, radio buttons, or text fields, resembling paper or database forms.

Example of a Web Form

In this example, we will create a web form using Lightning Web Components (LWC) in Salesforce to submit data to an object.

---

Step 1: Your HTML Page (webform.html)

This HTML page contains the structure of the form. We will use the lightning-record-form component to automatically generate a form based on the fields of an object.

html

<template>
  <lightning-messages></lightning-messages>  
  <lightning-record-form  
    object-api-name={accountObject}  
    fields={myFields}  
    onsuccess={handleAccountCreated}>  
  </lightning-record-form>  
</template>


lightning-messages: Displays messages for form validation or other important notifications.
lightning-record-form: Generates a form for the specified object and fields.

---

Step 2: Your JavaScript Page (webform.js)

In the JavaScript file, we import the necessary Salesforce schema and define how the form behaves upon successful submission.

javascript

import { LightningElement } from 'lwc';  
import ACCOUNT_OBJECT from '@salesforce/schema/Goals__c';  
import NAME_FIELD from '@salesforce/schema/Goals__c.Name';  
import WEBSITE_FIELD from '@salesforce/schema/Goals__c.Employee__c';  
import EMPLOYEE_COMMENT_FIELD from '@salesforce/schema/Goals__c.Employee_Comment__c';  
import MANAGER_FIELD from '@salesforce/schema/Goals__c.Manager__c';  
import MANAGER_COMMENT_FIELD from '@salesforce/schema/Goals__c.Manger_Comment__c';  

export default class Lwc_lds_createRecord extends LightningElement {  
    accountObject = ACCOUNT_OBJECT;  
    myFields = [NAME_FIELD, WEBSITE_FIELD, EMPLOYEE_COMMENT_FIELD, MANAGER_FIELD, MANAGER_COMMENT_FIELD];  
    
    handleAccountCreated(event) {  
      this.dispatchEvent(  
        new ShowToastEvent({  
          title: 'Record Created Successfully',  
          message: event.detail.message,  
          variant: 'success',  
        }),  
      );  
    }  
}


Schema Imports: We import fields from the Goals__c object to be displayed in the form.
Fields Setup: The myFields array defines the fields to be displayed in the form.
Event Handling: The handleAccountCreated method dispatches a toast message when a record is successfully created.

• 
  
  
  

---

By using this approach, you can easily create and manage web forms in Salesforce using Lightning Web Components.