![create a record in lwc](https://salesforcehandle.com/wp-content/uploads/2022/08/pavan-trikutam-71CjSSB83Wo-unsplash-2-1-1-1-1-1-1-1-1-1-1.jpg)
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.
![create contact record in lwc](https://salesforcehandle.com/wp-content/uploads/2022/04/image-1024x285.png)
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?
2 thoughts on “Creating Contact Record in Lightning Web Component – LWC | Create a Contact form and Show Toast message ”