Creating Contact Record in Lightning Web Component – LWC | Create a Contact form and Show Toast message 

In this post, we are going to create a very basic simple contact form to create a contact record in LWC. This is like having a page/component having input fields for receiving data from the user and thereby creating a contact record in the backend. Without further ado, let’s get started.

We have three basic HTML, JS, and MetaXML to set up in the Lightning Component Bundle for this requirement.

SFDX:Lightning Web Component >> New >> ContactForm 

ContactForm HTML

<template>
<lightning-card>
    <div slot="title">
        <h3> 
            <lightning-icon icon-name="standard:contact" size="small"></lightning-icon> Contact form in LWC      
            </h3>
        </div>
    <div class="slds-grid slds-wrap">

        <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
            <div class="slds-form-element">
            <lightning-input label="First Name" value={firstName} onchange={contactChangeVal}></lightning-input>
            </div>
        </div>

        <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
        <div class="slds-form-element">
            <lightning-input label="Last Name" value={lastName} onchange={contactChangeVal}></lightning-input>
            </div>
        </div>

        <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
        <div class="slds-form-element">
            <lightning-input type="date" label="Birth Date" value={bday} onchange={contactChangeVal}></lightning-input>
            </div>
        </div>

        <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
        <div class="slds-form-element">
            <lightning-input label="Email" value={emailId} onchange={contactChangeVal} ></lightning-input>
            </div>
        </div>

        <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
        <div class="slds-form-element">
            <lightning-input label="Department" value={departmentVal} onchange={contactChangeVal} ></lightning-input>
            </div>
        </div>

        <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium">
        
        <div class="slds-form-element slds-p-top_large ">               
            <lightning-button label="Create Contact Record" variant="brand" onclick={insertContactAction}></lightning-button>        
        </div>
        </div>


    </div>
    
</lightning-card>
</template>

ContactForm JS

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import conObject from '@salesforce/schema/Contact';
import conFirstName from '@salesforce/schema/Contact.FirstName';
import conLastName from '@salesforce/schema/Contact.LastName';
import conBday from '@salesforce/schema/Contact.Birthdate';
import conEmail from '@salesforce/schema/Contact.Email';
import conDepartment from '@salesforce/schema/Contact.Department';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ContactForm extends LightningElement {
 
    firstName = '';
    lastName = '';
    bday= '';
    emailId='';
    departmentVal='';
 
    contactChangeVal(event) {
        console.log(event.target.label);
        console.log(event.target.value);        
        if(event.target.label=='First Name'){
            this.firstName = event.target.value;
        }
        if(event.target.label=='Last Name'){
            this.lastName = event.target.value;
        }            
        if(event.target.label=='Birth Date'){
            this.bday = event.target.value;
        }
        if(event.target.label=='Email'){
            this.emailId = event.target.value;
        }
        if(event.target.label=='Department'){
            this.departmentVal = event.target.value;
        }
              
    }
 
 
    insertContactAction(){
        console.log(this.selectedAccountId);
        const fields = {};
        fields[conFirstName.fieldApiName] = this.firstName;
        fields[conLastName.fieldApiName] = this.lastName;
        fields[conBday.fieldApiName] = this.bday;
        fields[conEmail.fieldApiName] = this.emailId;
        fields[conDepartment.fieldApiName] = this.departmentVal;
       
        const recordInput = { apiName: conObject.objectApiName, fields };
        createRecord(recordInput)
            .then(contactobj=> {
                this.contactId = contactobj.id;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Contact record has been created',
                        variant: 'success',
                    }),
                ); 
 
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
    }
 
}

ContactForm MetaXML: Set to expose it to required pages

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

</LightningComponentBundle>

There ain’t much to explain here. We just import the schema for objects and fields and functionalities in JS and fetch the data from HTML then we create a record using the former and display a toast message.

Read More: Create a simple calculator in LWC

Hope You Have An Amazing Day! Let me know in the comments if it helped you learn something?