Advanced Features
Intro
The Wavey Coming Soon Template is a cutting-edge, feature-rich solution designed for professionals who require a robust, secure, and efficient Coming Soon Template. Built with modern web technologies, this template seamlessly integrates advanced JavaScript OOP, PHP, and email handling for an exceptional user experience.
Advanced Features & Technologies
-
JavaScript Object-Oriented Programming (OOP):
Structured and modular JavaScript OOP implementation for scalability and maintainability. -
JSDoc Documentation:
Comprehensive JSDoc integration to provide clear and professional documentation. -
Professional PHP Subscription Form:
Fully functional subscription system that securely stores user emails. -
Professional PHP Contact Form:
Secure contact form with email handling using PHPMailer. -
HTML Email Template Feature:
Integrated responsive email templates for both subscription & contact forms. -
Logging Feature with Timestamp:
Integrated logging mechanism to track form submissions, errors, and system events. -
.env Configuration File:
Enhances security & portability by keeping sensitive data out of the source code. -
PHP Test Files for Configuration Validation:
A suite of individual PHP test files to verify system configurations before deployment.
Wavey Coming Soon
With its scalability, security, and ease of maintenance, the Wavey Coming Soon Template is not just a basic Coming Soon template — it’s a professional-grade solution designed for businesses and developers who demand excellence in every aspect of web development.
JavaScript Object-Oriented Programming (OOP)
Wavey Coming Soon Template. isn't just a placeholder – it's a powerful foundation for your future website, built with modern web development practices in mind. Beyond a visually stunning design, we've focused on creating a robust and maintainable codebase, leveraging the principles of JavaScript Object-Oriented Programming (OOP) to deliver a truly professional and scalable solution.
Key Features:
-
Modular Code:
JavaScript classes and modules break down functionality into reusable components. Each class encapsulates its own logic, making the codebase easier to debug and extend. -
Encapsulation:
Data and methods are grouped within classes, reducing global namespace pollution and improving code organization. -
Inheritance:
Classes can inherit properties and methods from parent classes, promoting code reuse and reducing redundancy. -
Event-Driven Architecture:
Classes are designed to handle specific events (e.g., form submission, modal opening), ensuring clean separation of concerns. -
Professional Debugging:
Well-structured OOP code makes it easier to trace errors and debug issues, as each class has a clear responsibility.
How It Works in the Template
The template uses JavaScript OOP to manage key functionalities such as:- Preloader Animation
- Form Validation
- Modal Management
- Event Handling
Example Class Structure:
class WtAppEffects {
constructor() {
this.initializeEffects();
}
initializeEffects() {
this.initWaterpipe();
/**-------------- Rest of the codes ----------- */
}
initWaterpipe() {
if (typeof $.fn.waterpipe === 'function') {
this.smokyBG = $("#bg-wrapper").waterpipe({
gradientStart: "#fa05fa",
gradientEnd: "#6b71e3",
smokeOpacity: 0.1,
/**-------------- Rest of the codes ----------- */
});
}
}
initSnowEffect() {
if (typeof $.fn.letItSnow === 'function') {
this.snowEffect = $('.let-it-snow').letItSnow({
/**-------------- Rest of the codes ----------- */
});
}
}
initRipples() {
if (typeof $.fn.ripples === 'function') {
/**-------------- Rest of the codes ----------- */
}
}
initSparkAnimation() {
if (typeof $.fn.sparkAnimation === 'function') {
this.sparkEffect = $('#sparks').sparkAnimation({
amount: 3000,
speed: 0.08
});
}
}
}
JSDoc Integration
Wavey Coming Soon Template is a developer-friendly springboard for your future website. We've incorporated best practices and advanced features, including comprehensive JSDoc documentation, to streamline your development process and ensure a smooth transition from Coming Soon to Live.
Key Features:
-
Well-Documented Code with JSDoc:
Dive into a codebase that's easy to understand and maintain, thanks to integrated JSDoc documentation. This industry-standard approach provides clear explanations of classes, methods, properties, and parameters, saving you valuable time and effort during customization and future development.
How It Works in the Template
The template uses JSDoc to document key JavaScript components, such as:- Classes : Descriptions of class purpose, properties, and methods.
- Functions : Details about parameters, return values, and usage examples.
- Events : Documentation for custom events and their triggers.
Example Class Structure With JSDoc:
(function ($) {
"use strict";
/**
* @class WebsiteCore
* @description Core class for managing website functionalities, including device control, ...............
*/
class WebsiteCore {
/**
* @constructor
* @description Initializes the WebsiteCore instance, sets up configuration, and caches DOM elements.
*/
constructor() {
/**
* @property {object} CONFIG - Configuration settings for breakpoints, scroll threshold, and preloader delay.
* @property {object} CONFIG.BREAKPOINTS - Breakpoints for different device sizes.
* @property {number} CONFIG.SCROLL_THRESHOLD - Scroll threshold for header visibility.
* @property {number} CONFIG.PRELOADER_DELAY - Delay for preloader fadeout.
*/
this.CONFIG = {
BREAKPOINTS: {
DESKTOP: 992,
TABLET: 768
},
SCROLL_THRESHOLD: 300,
PRELOADER_DELAY: 3000
};
/**-------------- Rest of the codes ----------- */
}
}
})(jQuery);
PHP Forms
PHP Contact Form
Wavey Contact Form is a modern and attractive design for the form to capture users' attention and encourage them to use it. Our integrated contact form provides a hassle-free way for visitors to get in touch. Customize emails , validation rules, and submission handling to meet your exact data collection needs.

Key Features:
-
Robust Validation:
Client-side validation ensures data accuracy and reduces invalid submissions. -
Seamless Submission:
Configure form submission to integrate with your preferred backend solution. -
Automated Responses:
Set up automated email replies to acknowledge inquiries and manage expectations. -
Spam Protection:
Implement measures to minimize spam submissions and maintain a clean inbox.
How It Works in the Template
The template's contact form is designed for easy integration and customization. Key aspects are controlled through configuration options, allowing you to:- Define form fields and their properties (e.g., labels, input types, required status).
- Specify validation rules for each field (e.g., email format, minimum length).
- Configure the form submission endpoint and processing logic.
- Customize success and error messages for user feedback.
Example Contact Form Structure:
<form id="wt-contact__form">
<div class="row">
<div class="col-lg-6 col-md-6">
<input type="text" class="form-control shadow-none mb-15" name="contact_name" id="contactName" placeholder="Full Name" />
</div>
<div class="col-lg-6 col-md-6">
<input type="text" class="form-control shadow-none mb-15" name="contact_email" id="contactEmail" placeholder="E-mail Address" />
</div>
<div class="col-lg-6 col-md-6">
<input type="text" class="form-control shadow-none mb-15" name="contact_phone" id="contactPhone" placeholder="Phone Exp. 05555555555 *" />
</div>
<div class="col-lg-6 col-md-6">
<input type="text" class="form-control shadow-none mb-15" name="contact_subject" id="contactSubject" placeholder="Subject" />
</div>
<div class="col-lg-12 col-md-12">
<textarea class="form-control shadow-none mb-20" name="contact_message" id="contactMessage" placeholder="Your Message" cols="30" rows="5"></textarea>
</div>
<div class="col-lg-12 col-md-12">
<input type="checkbox" class="form-check-input mr-10" id="termsCheckBox" value="" />
<span>I accepted <a class="ml-15" href="#" data-bs-toggle="modal" data-bs-target="#wt-modal__terms" id="termssToggle">Terms & Conditions</a></span>
</div>
<div class="col-lg-12 col-md-12 mt-20">
<button type="submit" name="submit" class="wt-btn wt-btn--outline wt-btn--effect-02 z-index-1 wt-submit--style01">
Submit
</button>
</div>
</div>
</form>
PHP Subscription Form
Wavey Contact Form Soon Template is designed with modern, professional features to ensure functionality, security, and ease of use. One of the standout features is the PHP Subscription Form, which provides a robust and secure way for users to subscribe to your newsletter or updates. Below is a detailed explanation of this feature and how to customize it:

Key Features:
-
Server-Side Validation:
Ensures all form inputs are valid before processing (e.g., valid email format, required fields). Prevents malicious or incomplete submissions. -
Email Confirmation:
Subscribers receive a confirmation email with a unique token to prevent spam and ensure valid email addresses. -
Welcome Email:
Subscribers receive a Welcome email after confirmation is successful. -
Dual Storage:
Subscriptions are saved to both your local MySQL database and Mailchimp (configurable via .env). -
Anti-Spam Measures:
Built-in CSRF tokens and input sanitization to protect against spam and malicious attacks. -
User Feedback:
Displays success or error messages to users after form submission. -
Security:
Sanitizes and validates all inputs to prevent SQL injection and XSS attacks. Uses secure tokens for email confirmation links.
How It Works in the Template
The PHP Subscription Form is integrated into the template with the following components:- Front-End Form: HTML form with fields for email (and optionally name).
- Email Confirmation: Sends a confirmation email with a unique token to verify the subscriber's email address.
- Database Integration: Subscriptions are logged in the subscribers table.
- Mailchimp Integration: Subscriptions are synced with Mailchimp (optional).
Example Subscription Form Structure:
<?php
session_start();
require __DIR__ . '/../vendor/autoload.php';
$config = require_once 'config/config.php';
// PHPMailer classes
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
function logDebug($message)
{
$logDir = __DIR__ . '/logs';
// Create logs directory if it doesn't exist
if (!file_exists($logDir)) {
mkdir($logDir, 0755, true); // 0755 permissions (adjust if needed)
}
$logFile = $logDir . '/sub-debug.log';
$timestamp = date('Y-m-d H:i:s');
file_put_contents($logFile, "[{$timestamp}] {$message}\n", FILE_APPEND);
}
if (!$config) {
logDebug("Configuration file error");
echo json_encode(['status' => 'error', 'message' => 'Configuration file not found or invalid.']);
exit();
}
HTML Email Template
Engage Your Audience, Communicate effectively and maintain brand consistency with professionally designed HTML email templates. Craft compelling messages for subscription
confirmations, announcements, and more.
HTML Email Template, which allows you to send beautifully designed, responsive emails to your users. Wavey template supports MJML (Mailjet Markup Language), a powerful framework for designing
responsive email templates. Below is a detailed explanation of these features and how to customize them:
Key Features:
-
Responsive Design:
Emails are optimized for all devices (desktop, tablet, and mobile) using responsive HTML and inline CSS. -
Dynamic Content:
Use placeholders (e.g., {{contact_email}}, {{contact_phone}}) to personalize emails with user-specific data. -
Brand Consistency:
Match your website’s branding by customizing colors, fonts, and logos in the email templates. -
Professional Layout:
Pre-designed templates for common use cases (e.g., welcome emails, confirmation emails). -
Cross-Client Compatibility:
Tested and optimized for major email clients (e.g., Gmail, Outlook, Apple Mail). -
Ease of Customization:
Displays success or error messages to users after form submission. -
MJML Templates:
* MJML automatically generates responsive email templates that work across all devices and email clients.
* MJML’s intuitive syntax reduces the complexity of writing email-compatible HTML and CSS.
* Use MJML components like <mj-section>, <mj-column>, and <mj-button> to quickly build professional email layouts.
* Easily customize MJML templates to match your branding and design requirements.
* MJML templates can be integrated into your PHP workflow using the MJML CLI or API to generate HTML.
Example MJML Page Structure:
<mjml>
<mj-head>
<mj-title>Say hello to RealEstate</mj-title>
<mj-font name="Alice" href="https://fonts.googleapis.com/css?family=Alice"></mj-font>
<mj-font name="Roboto" href="https://fonts.googleapis.com/css?family=Roboto:400,700"></mj-font>
<mj-attributes>
<mj-all font-family="Roboto, Helvetica, Arial, sans-serif" padding="0px"></mj-all>
<mj-text font-weight="400" font-size="14px" color="#000000" line-height="21px"></mj-text>
</mj-attributes>
</mj-head>
<mj-body background-color="#ffffff">
<mj-section background-color="#232323" padding-bottom="0px" padding-top="0">
<mj-column width="100%">
<mj-image align="left" padding="50px 25px 30px 25px" src="https://i.postimg.cc/7LhrZ2gT/logo-5-light-sm.png" width="128px"></mj-image>
<mj-divider border-color="#ffc233" border-width="2px" padding-bottom="10px" padding-left="0" padding-right="0" padding-top="10px" padding="10px 0"></mj-divider>
</mj-column>
</mj-section>
<mj-section background-color="#232323" padding-bottom="20px" padding-top="20px">
<mj-column vertical-align="middle" width="100%">
<mj-text align="left" color="#ffffff" font-size="16px" font-family="Alice, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
<span><strong>Email :</strong> {{contact_email}}</span><br /><br />
<span><strong>Phone :</strong> {{contact_phone}}</span><br /><br />
<span><strong>Subject :</strong> {{contact_subject}}</span><br /><br />
<span><strong>Message :</strong> {{contact_message}}</span><br /><br />
</mj-text>
<mj-divider border-color="#ffc233" border-width="1px" padding-bottom="10px" padding-left="0" padding-right="0" padding-top="10px" padding="10px 0"></mj-divider>
<mj-text align="left" color="#ffffff" font-size="16px" font-family="Alice, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">We're really excited you've decided to give us a try. In case you have any questions, feel free to reach out to us at support@wavey.com. </mj-text>
<mj-spacer height="30px"></mj-spacer>
<mj-text align="left" color="#ffffff" font-size="13px" font-family="Alice, Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">All rights reserved, <br /> Copyright © 2025 Wavey.</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Logging & Trace
Logging with Timestamps
Wavey Coming Soon Template is crafted with contemporary, professional attributes that prioritize security, traceability, and simplified debugging. A key highlight of this template is the Security & Trace: Logging with Timestamps functionality, which offers a comprehensive system for monitoring events, errors, and user activities. Below, you will find an in-depth overview of this feature and instructions on how to tailor it to your needs:
Key Features:
-
Timestamped Logs:
Automatically records the date and time of each event, making it easy to trace issues and monitor system activity. -
File-Based Logs:
Stores logs in a dedicated directory (e.g., logs/ ) with separate files for different types of logs (e.g., debug.log , error.log ). -
Customizable Log Levels:
Supports different log levels (e.g., debug , info , error ) to categorize and prioritize log messages. -
Security Monitoring:
Logs suspicious activities (e.g., failed login attempts , invalid form submissions ) for security auditing. -
Ease of Debugging:
Provides detailed logs to help developers identify and resolve issues quickly.
How It Works in the Template
The Logging with Timestamps feature is integrated into the template with the following components:-
Logging Function:
Logs are stored in the logs/ directory, which is automatically created if it doesn’t exist. -
Logging Function:
A reusable logDebug function writes messages to a log file with a timestamp. -
Log Files:
Separate log files (e.g., sub-debug.log , error.log ) are used for different types of logs.
Example Logging with Timestamps File:
[2025-02-08 10:40:51] New pending subscription: example01@waveytheme.com
[2025-02-08 10:40:53] Confirmation email sent to: example01@waveytheme.com
[2025-02-08 10:40:53] Subscription process completed successfully for: example01@waveytheme.com
[2025-02-08 10:41:13] New pending subscription: example02@waveytheme.com
[2025-02-08 10:41:15] Confirmation email sent to: example02@waveytheme.com
[2025-02-08 10:41:15] Subscription process completed successfully for: example02@waveytheme.com
[2025-02-08 10:41:22] Received Token: 1c7461d0a91dec60c8eb4a36568831b4e17abfe0f0fde216ac2b56f8aa31d26d
[2025-02-08 10:41:22] Total Pending Subscribers: 2
[2025-02-08 10:41:22] Matched Subscriber: example02@waveytheme.com
[2025-02-08 10:41:22] Subscriber example02@waveytheme.com confirmed
[2025-02-08 10:41:25] Welcome email sent successfully to: example02@waveytheme.com
[2025-02-08 10:41:26] Mailchimp sync failed: 400: example02@waveytheme.com is already a list member. Use PUT to insert or update list members.
[2025-02-08 11:09:16] New pending subscription: example02@waveytheme.com
[2025-02-08 11:09:18] Confirmation email sent to: example02@waveytheme.com
[2025-02-08 11:09:18] Subscription process completed successfully for: example02@waveytheme.com
PHP Test Files
PHP Test Files
Wavey Coming Soon includes a suite of advanced PHP test files designed to enhance your development process, ensuring robust functionality and seamless integration. These test files serve as essential tools for validating various aspects of your application, allowing for efficient troubleshooting and optimization. Below is a summary of each test file and its significance:
Key Features:
-
Environment Variables Test: test-env.php
Ensures that environment variables are correctly loaded from the .env file. -
Composer Autoloader Test: test-composer.php
Verifies that Composer dependencies are correctly autoloaded and available for use. -
Database Connection Test: test-database.php
Tests the connection to your MySQL database using credentials from the .env file. -
SMTP Connection Test: test-smtp-connection.php
Validates SMTP settings (e.g., host, port, username, password) by sending a test email. -
Mailchimp API Test: test-mailchimp-api.php
Tests the integration with the Mailchimp API using your API key and list ID.
How It Works in the Template
The PHP Test Files are integrated into the template with the following components:- Test Scripts: Standalone PHP files located in the tests/ directory.
- Configuration: Uses environment variables from the .env file for testing.
- Feedback: Outputs success or error messages to the console or browser.
Example test-composer.php File:
<?php
/**
* Composer autoloader and PHPMailer test.
* This code is used to test the Composer configuration settings for the application.
*/
require __DIR__ . '/../vendor/autoload.php';
// Test PHPMailer
$mail = new PHPMailer\PHPMailer\PHPMailer(true);
echo 'PHPMailer loaded successfully!<br>';
// Test Mailchimp
$MailChimp = new DrewM\MailChimp\MailChimp('your-api-key');
echo 'Mailchimp API loaded successfully!';
