Contact Form

Relevant source files

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

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

The Contact Form feature provides a user interface for visitors to send messages or subscribe to a newsletter. The entire implementation is client-side, using HTML for structure and jQuery for handling form submission, validation, and user feedback. The Node.js server included in the repository is a simple static file server and does not process any form data.

This functionality is present on multiple pages, including contact.html, about.html, and properties.html. The core logic is centralized in js/submit-form.js, which handles both the main contact form and the newsletter subscription form based on a hidden action field. The submission process is currently simulated with a setTimeout function and does not connect to a live backend endpoint.

Architecture

The contact form system is entirely client-side. A basic Node.js server is used only to serve the static HTML, CSS, and JavaScript files to the browser. All logic for validation and submission feedback occurs within the user's browser, orchestrated by js/submit-form.js.

This diagram illustrates the relationship between the files involved in the contact form feature.

Frontend Structure

The form is built using standard HTML and styled with Bootstrap classes. It resides within contact.html and includes fields for name, email, and a message.

Sources: contact.html:241-279

Form Fields

The main contact form contains the following input fields:

Field Name	HTML Element	Type	Required	Description
name	<input>	text	Yes	The user's full name.
email	<input>	email	Yes	The user's email address.
message	<textarea>	-	Yes	The content of the user's message.

Sources: contact.html:261-275

User Feedback Elements

The HTML includes dedicated div elements for displaying success and error messages, which are implemented as Bootstrap "toasts". These are initially hidden and are shown by the JavaScript logic upon form submission.

• Success Message: A toast with the class success_msg is shown for a successful simulated submission.
• Error Message: A toast with the class error_msg is shown if validation fails or an error is thrown.

Sources: contact.html:242-259

Client-Side Logic

All interactive logic for the contact form is contained in js/submit-form.js. This script uses jQuery to handle the form's submit event.

Form Submission Flow

The script listens for the submit event on any element with the class .form. The process is as follows:

1. Prevent the default browser form submission.
2. Perform basic HTML5 validation using checkValidity().
3. If validation passes, disable the submit button and show a loading spinner.
4. Enter a setTimeout block that simulates a 1-second network delay.
5. Inside the timeout, check for required fields and a valid email.
6. On success, show the success message, reset the form, and remove validation classes.
7. On failure, show the error message.
8. Finally, re-enable the submit button and restore its original text.

This sequence diagram shows the client-side interaction flow when a user submits the contact form.

Dual-Purpose Handling

The script is designed to handle both the main contact form and a simpler newsletter subscription form. It differentiates between them by reading the value of a hidden input field named action.

• If action is 'subscribe', it only validates the email field. This is used on pages like about.html and properties.html.
• Otherwise, it assumes it's the contact form and validates name, email, and message.

The following flowchart visualizes the logic inside the submit handler.

Helper Functions

Two helper functions support the main logic:

Function	Description
isValidEmail(email)	Tests a given string against a regular expression to validate the email format.
showToast(selector, message)	Initializes and shows a Bootstrap toast element identified by the selector. It can optionally update the toast's message text.

Sources: js/submit-form.js:63-78

Server-Side Component

The repository includes a server.js file, which sets up a basic HTTP server using Node.js's built-in http module.

Functionality

The server's sole responsibility is to serve static files from the project directory.

• It maps URL paths to local file paths (e.g., / maps to index.html).
• It determines the correct MIME type for common web assets like .html, .css, .js, and fonts.
• If a requested file is not found (ENOENT error), it attempts to serve the 404.html page.
• It has no API endpoints or logic to receive or process POST requests from the contact form.

The package.json file defines npm start and npm run dev scripts, both of which execute node server.js to run this static server.

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

Summary

The contact form is a front-end-only feature with a simulated submission process. While it provides a complete UI for user input, validation, and feedback, the data submitted by the user is not sent to or processed by any backend service. The included Node.js server is for static file serving only. To make this feature functional, a developer would need to replace the setTimeout block in js/submit-form.js with an actual AJAX call (e.g., using fetch or $.ajax) to a backend endpoint capable of handling the form data, such as sending an email or saving it to a database.