Form Submission Endpoint

Relevant source files

The following files were used as context for generating this wiki page:

• js/submit-form.js
• server.js
• contact.html
• properties.html
• about.html
• package.json

Introduction

The form submission functionality in the Vandore Heritage website is a client-side implementation designed to handle user input from contact and newsletter subscription forms. It is important to note that this system does not have a true backend endpoint for processing data. Instead, it uses JavaScript to simulate a form submission process, providing immediate user feedback without server-side interaction.

The core logic is contained within js/submit-form.js, which intercepts form submission events, performs validation, and displays success or error messages. The Node.js server (server.js) included in the repository is a basic static file server and is not configured to handle POST requests or process form data. This architecture allows for a responsive user interface but requires modification to integrate with a real backend service for data persistence.

Architecture

The form submission system is entirely client-side. The server.js file simply serves static assets like HTML, CSS, and JavaScript files. It does not include any logic for handling API requests or form data submissions.

Sources: server.js, package.json:5-8

The process is initiated when a user submits a form with the class .form. A jQuery event listener in js/submit-form.js prevents the browser's default submission behavior and executes a custom handling function.

This diagram illustrates the flow of a form submission from the user's perspective.

Client-Side Logic

All form handling logic resides in js/submit-form.js. It uses jQuery to manage events and DOM manipulation.

Sources: js/submit-form.js

Submission Handling

A submit event handler is attached to all elements with the .form class.

1. Event Prevention: The handler first calls e.preventDefault() to stop the standard browser form submission.
2. Validation: It performs basic HTML5 constraint validation using this.checkValidity(). If validation fails, the .was-validated class is added to the form to display Bootstrap's validation feedback.
3. UI State: On successful validation, the submit button is disabled and its content is replaced with a loading spinner to provide feedback to the user.
4. Simulated Submission: The core logic is wrapped in a setTimeout function with a 1-second delay. This simulates the asynchronous nature of a real API call.
5. Action Dispatching: Inside the timeout, the script retrieves the value of a hidden input field named action. This value determines whether the form is a 'subscribe' form or a standard contact form.
6. Feedback: Based on the outcome, either a success (.success_msg) or error (.error_msg) toast message is displayed.
7. Cleanup: The form is reset, and the submit button is restored to its original state in the finally block.

The following flowchart details the logic within the submit event handler.

Helper Functions

The script includes helper functions for validation and displaying notifications.

Function	Description	Source File
isValidEmail(email)	Tests an email string against a regular expression to check for a valid format.	js/submit-form.js:58-61
showToast(selector, message)	Initializes and shows a Bootstrap toast component. It can optionally update the toast's message text.	js/submit-form.js:64-73

Form Structure

The website uses two types of forms that are handled by this script: a contact form and a newsletter subscription form.

Contact Form

The main contact form is found on contact.html.

Sources: contact.html:220-247

Field	name Attribute	Type	Required	Description
Name	name	text	Yes	The user's full name.
E-mail	email	email	Yes	The user's email address.
Message	message	textarea	Yes	The content of the user's message.

The form also includes Bootstrap toast elements for success and error messages, which are hidden by default and shown by the JavaScript handler.

<!-- Success Message Toast -->
<div class="success_msg toast ...">
    ...
    <div class="toast-body ...">
        Your Message Successfully Send.
    </div>
    ...
</div>

<!-- Error Message Toast -->
<div class="error_msg toast ...">
    ...
    <div class="toast-body ...">
        Something Wrong ! Send Form Failed.
    </div>
    ...
</div>

<!-- Form Element -->
<form class="... form" novalidate="">
    <!-- Input fields for name, email, message -->
    ...
</form>

Sources: contact.html:206-220, contact.html:220-247

Subscription Form

Subscription forms are present on multiple pages, including properties.html and about.html. They are simpler, typically containing only an email field and a hidden action field.

Sources: properties.html:410-421, about.html:226-237

Field	name Attribute	Type	Required	Description
Action	action	hidden	Yes	A hidden field with value="subscribe" to identify the form type.
E-mail	email	email	Yes	The user's email address for the newsletter.

<form class="... form" novalidate="">
    <input type="text" name="action" value="subscribe" hidden="">
    <div class="input-group ...">
        <input type="email" class="form-control ... subscribe" placeholder="Join Our Newsletter" name="email" required="">
        <button class="btn btn-accent ..." type="submit">...</button>
        ...
    </div>
</form>

Sources: properties.html:410-421

Conclusion

The "Form Submission Endpoint" is a client-side simulation designed for user interface demonstration purposes. The logic in js/submit-form.js effectively handles user input, validation, and feedback within the browser. However, as the server.js is purely a static file server, no data is actually transmitted or stored. To make this feature fully functional, the setTimeout block in js/submit-form.js would need to be replaced with an AJAX (e.g., fetch or axios) call to a proper backend API endpoint capable of processing and persisting the form data.

Sources: js/submit-form.js:25, server.js