Record Edit Form

Note: the id is fetched from force has record id. You need to place the component in the contact page.

Con_ex Template

<template>

    <lightning-record-edit-form 

        record-id={recordId}

        object-api-name="Contact">

            <lightning-messages></lightning-messages>

            <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-input-field field-name="Phone"></lightning-input-field> 

            <div class="slds-align_absolute-center slds-p-around_medium">

                <lightning-button class="slds-m-around_xx-small" label="Cancel" onclick={handleReset}></lightning-button>

                <lightning-button class="slds-m-around_xx-small" label="Edit Contact" type="submit" variant="brand" ></lightning-button>

            </div>

    </lightning-record-edit-form>

</template>

JS

import { LightningElement,api } from 'lwc';

export default class con_ex extends LightningElement {

    @api recordId;

    handleReset(event) {

        const inputFields = this.template.querySelectorAll(

            'lightning-input-field'

        );

        if (inputFields) {

            inputFields.forEach(field => {

                field.reset();

            });

        }

     }

}