README.md

# Basic Form Project

A modern, responsive, and feature-rich Contact Form application built with HTML5, CSS3, and JavaScript. This project demonstrates best practices in web development, including form validation, local storage autosave, theme toggle (dark/light mode), and a glassmorphism design.

## Features

* **Responsive Design:** Fully responsive layout that adapting to desktops, tablets, and mobile devices.
* **Modern UI/UX:**
* Glassmorphism effect.
* Gradient background with animation.
* Floating labels and animated underlines for inputs.
* Smooth transitions and micro-interactions.
* **Dark/Light Mode:** Toggleable theme with persistence using LocalStorage.
* **Form Validation:**
* Real-time client-side validation for Name, Email, and Message.
* Visual feedback (green/red borders and error messages).
* **Auto-Save:** Drafts are automatically saved to LocalStorage, preventing data loss on page refresh.
* **Simulation Mode:**
* Simulates a backend request if running locally (file protocol) or if `submit.php` is unreachable.
* Includes a simulated delay and loading state.
* **Privacy Policy Page:** Dedicated page for privacy information.

## Technologies Used

* **HTML5:** Semantic structure.
* **CSS3:** Custom styles, Flexbox, Grid, CSS Variables, Animations.
* **JavaScript (ES6+):** DOM manipulation, Fetch API, LocalStorage, Event handling.
* **PHP:** Simple backend script (`submit.php`) to handle form submission (returns JSON).
* **Font Awesome:** For icons.
* **Google Fonts:** Poppins and Montserrat.

## File Structure

```
basic-form/
├── css/
│ └── style.css # Main stylesheet
├── js/
│ └── script.js # Application logic
├── index.html # Main contact form page
├── privacy.html # Privacy Policy page
├── submit.php # Backend handler
├── LICENSE # License file
└── README.md # Project documentation
```

## How to Run

1. **Clone the repository:**
```bash
git clone <repository-url>
```
2. **Open in Browser:**
* You can simply open `index.html` in any modern web browser.
* **Note:** The PHP backend (`submit.php`) requires a server environment (like Apache, Nginx, or PHP built-in server) to work strictly as intended. However, the JavaScript includes a **Simulation Mode** that intercepts the request if it fails or if run from the file system, allowing you to test the UI flow without a backend.

3. **Run with PHP (Optional):**
If you have PHP installed, you can run a local server:
```bash
php -S localhost:8000
```
Then visit `http://localhost:8000` in your browser.

## Authors

* **Molla Samser**
* **Rima Khatun**

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

index.html

Raw Download

<!--
  Created by: Molla Samser & Rima Khatun
  Website: https://rskworld.in/contact.php
  Emails: help@rskworld.in, support@rskworld.in
  Phone: +91 93305 39277
  Year: 2026
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Form - Web Development</title>
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap"
        rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="container">
        <div class="form-wrapper">
            <div class="row">
                <!-- Contact Info Column (Visible on Desktop) -->
                <div class="col-left contact-info">
                    <div class="info-box">
                        <i class="fas fa-map-marker-alt"></i>
                        <h3>Our Location</h3>
                        <p>Kolkata, India</p>
                    </div>
                    <div class="info-box">
                        <i class="fas fa-phone-alt"></i>
                        <h3>Call Us</h3>
                        <p>+91 93305 39277</p>
                    </div>
                    <div class="info-box">
                        <i class="fas fa-envelope"></i>
                        <h3>Email Us</h3>
                        <p>help@rskworld.in<br>support@rskworld.in</p>
                    </div>
                </div>

                <!-- Form Column -->
                <div class="col-right">
                    <header>
                        <button id="themeToggle" class="theme-toggle" aria-label="Toggle Dark Mode">
                            <i class="fas fa-moon"></i>
                        </button>
                        <div class="icon-container">
                            <i class="fas fa-edit text-success"></i>
                        </div>
                        <h1>Get in Touch</h1>
                        <p>We'd love to hear from you. Send us a message!</p>
                    </header>

                    <form id="contactForm" novalidate>
                        <div class="input-group">
                            <div class="input-field">
                                <i class="fas fa-user"></i>
                                <input type="text" id="name" name="name" placeholder=" " autocomplete="name">
                                <label for="name">Full Name</label>
                                <span class="error-message"></span>
                            </div>
                        </div>

                        <div class="input-group">
                            <div class="input-field">
                                <i class="fas fa-envelope"></i>
                                <input type="email" id="email" name="email" placeholder=" " autocomplete="email">
                                <label for="email">Email Address</label>
                                <span class="error-message"></span>
                            </div>
                        </div>

                        <div class="input-group">
                            <div class="input-field textarea-field">
                                <i class="fas fa-comment-alt"></i>
                                <textarea id="message" name="message" placeholder=" " rows="5"
                                    maxlength="500"></textarea>
                                <label for="message">Message</label>
                                <span class="error-message"></span>
                                <div class="char-counter">0 / 500</div>
                            </div>
                        </div>

                        <button type="submit" class="submit-btn">
                            <span>Send Message</span>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>

                    <div class="faq-section">
                        <h2>Frequently Asked Questions</h2>
                        <details>
                            <summary>How long does it take to get a response?</summary>
                            <p>We typically respond to all inquiries within 24-48 hours during business days.</p>
                        </details>
                        <details>
                            <summary>Is my data secure?</summary>
                            <p>Yes, we take data security seriously. Please review our Privacy Policy for more details.
                            </p>
                        </details>
                        <details>
                            <summary>Can I request a call back?</summary>
                            <p>Yes, simply mention your preferred time in the message box, and we'll try our best.</p>
                        </details>
                    </div>

                    <div class="form-footer">
                        <p>&copy; 2026 Basic Form Project. <br>Designed with <i class="fas fa-heart"
                                style="color: #e74c3c;"></i> by Molla Samser & Rima Khatun.</p>
                        <p class="footer-links">
                            <a href="privacy.html">Privacy Policy</a> | <a
                                href="https://rskworld.in/contact.php">Contact Us</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Custom JS -->
            <script src="js/script.js"></script>
</body>

</html>

132 lines•5.9 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size

README.md