Custom Submit button for LWC Record Form

Hello friends, today we’ll explore the process of creating a Custom Submit button for LWC Record Form and adding a touch of personalization to the record creation and editing process. Tailoring the submit button allows you to add extra functionality, validation, or visual appeal to enhance the user experience during record submissions.

The Need for Customization:

Record Forms in LWC offer a quick and efficient way to create, edit, or view records. However, the standard Submit button might not always align with the desired user experience or specific business requirements. Creating a custom Submit button allows developers to tailor the form’s behavior, and validations, and even add additional logic before the record is submitted.

Also, check this: LWC: ref and querySelector in LWC Salesforce

Key Highlights :

1. Enhanced User Experience: Craft a submit button that aligns with your application’s design and adds user-friendly features.
2. Validation Control: Implement custom validation logic before submitting records.
3. Visual Consistency: Ensure your submit button seamlessly integrates with the overall look and feel of your Lightning Web Component.

Code :

customRecordForm.Html :

<template>
	<lightning-card variant="Narrow" title="Custom Submit button for LWC Record Form" icon-name="standard:contact">
		<div class="slds-p-horizontal_small">
			<lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
				<lightning-input-field field-name="FirstName"></lightning-input-field>
				<lightning-input-field field-name="LastName"></lightning-input-field>
				<lightning-input-field field-name="Email"></lightning-input-field>
			</lightning-record-edit-form>
			<!-- Custom Submit Button -->
			<lightning-button label="Custom Submit Button" onclick={handleSubmit} variant="brand"></lightning-button>
		</div>
	</lightning-card>
</template>

customRecordForm.Js :

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CustomRecordForm extends LightningElement {

    handleSubmit() {
        // Custom logic before submission

        // Submit the form
        this.template.querySelector('lightning-record-edit-form').submit();
    }

    handleSuccess() {
        const toastEvent = new ShowToastEvent({
            title: 'Success',
            message: 'Contact created successfully.',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(toastEvent);
    }
}

Output :

Conclusion:

By creating a custom Submit button for your LWC Record Form, you not only add a personal touch to the user interface but also gain control over the record submission process. This customization enables developers to implement additional checks, validations, or complex logic seamlessly. Embrace the flexibility of Lightning Web Components to craft user interfaces that align perfectly with your specific business requirements.

Reference :

1. Record Edit Form