Multi-step Contact Form In LWC

Screen 1

Title: "Personal Information"
Caption: "Please enter your basic personal details, including your first and last name."
Screen 2
Title: "Contact Details"
Caption: "Provide your primary contact information, including email and phone number."
Screen 3
Title: "Review & Submit"
Caption: "Review the information provided, then click Submit to save your details."

Apex Code 

public  class ContactController {

    @AuraEnabled

    public static String saveContact(Contact contact) {

        try {

            // Insert or update contact record

            if (contact.Id == null) {

                insert contact;

            } else {

                update contact;

            }

            return 'Contact saved successfully!';

        } catch (Exception ex) {

            throw new AuraHandledException('Error saving contact: ' + ex.getMessage());

        }

    }

}

Js ContactRegistration

import { LightningElement,track } from 'lwc';

import saveContact from '@salesforce/apex/ContactController.saveContact';

export default class ContactRegistration extends LightningElement {

@track isScreen1 = true;

    @track isScreen2 = false;

    @track isScreen3 = false;

    @track firstName = '';

    @track lastName = '';

    @track phone = '';

    @track email = '';

    handleInputChange(event) {

        const field = event.target.dataset.id;

        this[field] = event.target.value;

    }

    goToScreen2() {

        this.isScreen1 = false;

        this.isScreen2 = true;

    }

    goToScreen1() {

        this.isScreen1 = true;

        this.isScreen2 = false;

    }

    goToScreen3() {

        this.isScreen2 = false;

        this.isScreen3 = true;

    }

    async submitContact() {

        const contactData = {

            FirstName: this.firstName,

            LastName: this.lastName,

            Phone: this.phone,

            Email: this.email

        };

        try {

            const result = await saveContact({ contact: contactData });

            alert(result); // Show success message

            this.resetForm();

        } catch (error) {

            alert('Error: ' + error.body.message);

        }

    }

    resetForm() {

        this.isScreen1 = true;

        this.isScreen2 = false;

        this.isScreen3 = false;

        this.firstName = '';

        this.lastName = '';

        this.phone = '';

        this.email = '';

    }

}

Html ContactRegistration

<template>

    <template if:true={isScreen1}>

        <lightning-input label="First Name" value={firstName} onchange={handleInputChange} data-id="firstName"></lightning-input>

        <lightning-input label="Last Name" value={lastName} onchange={handleInputChange} data-id="lastName"></lightning-input>

        <lightning-button label="Next" onclick={goToScreen2}></lightning-button>

    </template>

    <template if:true={isScreen2}>

        <lightning-input label="Phone" value={phone} onchange={handleInputChange} data-id="phone"></lightning-input>

        <lightning-input label="Email" value={email} onchange={handleInputChange} data-id="email"></lightning-input>

        <lightning-button label="Previous" onclick={goToScreen1}></lightning-button>

        <lightning-button label="Next" onclick={goToScreen3}></lightning-button>

    </template>

    <template if:true={isScreen3}>

        <p>Review your information and click Submit to save the contact.</p>

        <lightning-button label="Previous" onclick={goToScreen2}></lightning-button>

        <lightning-button label="Submit" onclick={submitContact}></lightning-button>

    </template>

</template>