Embed

<section id="contact-section">
    <h1>Contact Us</h1>
    <form id="contactForm">
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="phone">Telephone (Optional):</label>
        <input type="tel" id="phone" name="phone">

        <label for="address">Address (Optional):</label>
        <input type="text" id="address" name="address">

        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" placeholder="Write your message here..." required></textarea>

        <button type="submit">Send</button>
        <p id="formStatus"></p> </form>
</section>

<style>
    /* Styling adapted from your contact.html and previous suggestions for embedding */
    #contact-section {
        font-family: 'Segoe UI', sans-serif;
        background: #f4f4f4; /* Background for the form section */
        padding: 2rem;
        max-width: 900px;
        margin: 40px auto; /* Center the section on the page, add top/bottom margin */
        border-radius: 8px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        color: #333;
    }

    #contact-section h1 {
        text-align: center;
        margin-bottom: 2rem;
        color: #333;
        font-size: 2.2em; /* Slightly larger heading */
    }

    #contactForm {
        background: #fff;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Lighter shadow for the form itself */
    }

    #contactForm label {
        display: block;
        margin-top: 1rem;
        margin-bottom: 0.25rem; /* Reduced margin */
        font-weight: bold;
        color: #555;
    }

    #contactForm input,
    #contactForm textarea {
        width: 100%;
        padding: 0.75rem;
        margin-bottom: 1rem; /* Consistent bottom margin */
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 1rem;
        box-sizing: border-box; /* Include padding in width calculation */
    }

    #contactForm textarea {
        height: 120px; /* Sensible default height */
        resize: vertical; /* Allow vertical resizing */
    }

    #contactForm input:focus,
    #contactForm textarea:focus {
        border-color: #007BFF;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Focus ring effect */
    }

    #contactForm button {
        margin-top: 1.5rem; /* Adjusted margin */
        padding: 0.75rem 1.5rem;
        background: #007BFF;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1.1rem; /* Slightly larger font */
        width: 100%;
        transition: background 0.3s ease;
    }

    #contactForm button:hover {
        background: #0056b3;
    }

    #formStatus {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 5px;
        text-align: center;
        font-weight: bold;
        display: none; /* Hidden by default, JavaScript will show/hide */
        line-height: 1.4;
    }

    #formStatus.success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    #formStatus.error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contactForm = document.getElementById('contactForm');
        const formStatus = document.getElementById('formStatus');

        if (contactForm) { // Ensure the form element exists before adding event listener
            contactForm.addEventListener('submit', async function(event) {
                event.preventDefault(); // Prevent default form submission (page reload)

                // Display "Sending..." message
                formStatus.textContent = 'Sending message...';
                formStatus.className = ''; // Clear previous success/error classes
                formStatus.style.display = 'block'; // Make status message visible

                const formData = new FormData(contactForm);
                // Convert FormData to a plain JavaScript object for JSON payload
                const data = {};
                for (let [key, value] of formData.entries()) {
                    data[key] = value;
                }

                // --- YOUR APP ENGINE BACKEND URL FOR CONTACT FORM ---
                // This URL is specifically set to your provided App Engine URL.
                const appEngineUrl = 'https://contact-form-app-463216.uc.r.appspot.com/contact';

                try {
                    const response = await fetch(appEngineUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json', // Tell the backend we're sending JSON
                            'Accept': 'application/json' // Indicate that we prefer JSON response
                        },
                        body: JSON.stringify(data), // Send the data as a JSON string
                    });

                    if (response.ok) { // If response status is 2xx (e.g., 200 OK)
                        const result = await response.json(); // Parse JSON response from backend
                        formStatus.textContent = result.message || 'Message sent successfully!';
                        formStatus.className = 'success'; // Apply success styling
                        contactForm.reset(); // Clear all form fields on success
                    } else {
                        // If backend returned an error (e.g., 400 Bad Request, 500 Internal Server Error)
                        const errorData = await response.json(); // Attempt to parse error message
                        formStatus.textContent = errorData.error || 'Failed to send message. Please try again.';
                        formStatus.className = 'error'; // Apply error styling
                        console.error('Backend error:', errorData); // Log backend error for debugging
                    }
                } catch (error) {
                    // This catches network errors (e.g., App Engine app is down, CORS blocking the request)
                    console.error('Network error submitting form:', error); // Log the full error
                    formStatus.textContent = 'A network error occurred. Please check your internet connection and try again.';
                    formStatus.className = 'error';
                }
            });
        }
    });
</script>

SkyLimit Tech Hub Academy


SkyLimit Tech Hub Academy is dedicated to equipping aspiring professionals with the skills and confidence to thrive in today’s tech-driven job market. We offer intensive, hands-on training programs in Data Science, Analytics, Artificial Intelligence, and Machine Learning, designed not just to teach—but to launch careers.

Our academy includes career-focused tracks, real-world projects, and job landing preparation packages featuring mock interviews, resume building, portfolio development, and personalized mentorship. Whether you're a beginner or upskilling for a career switch, SkyLimit Tech Hub Academy helps you build in-demand expertise and get job-ready, fast.