Pop-Up Message for Successful Message Send

[mahendra785]

Implement a pop-up message or toast notification that appears when a user successfully sends a message through the contact form. This message should confirm that the message was sent.

[mahendra785]

Pop-Up Message for Successful Message Send

Pseudocode

1. Contact Form Structure

• ContactForm Component
  • form.contact-form
    • input - User input fields (e.g., name, email, message)
    • button.submit - Submit button
  • Handle form submission with JavaScript.

2. Pop-Up Message/Toast Notification Component

• PopUpMessage Component
  • div.pop-up-message
    • Success message text (e.g., "Your message has been sent successfully!")
    • Style to appear as a toast notification.
  • Initially hidden, becomes visible upon successful form submission.

3. JavaScript Logic for Handling Form Submission

• Handle Form Submission

  • On form submit:
    • Prevent default form action.
    • Validate form data.
    • Send form data to the server (e.g., via AJAX or fetch API).
    • On success, trigger the pop-up message.

• Show and Hide Pop-Up Message

  • Show the pop-up message on success.
  • Automatically hide the message after a few seconds or allow user dismissal.