<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contact Us - Morangup Residents Group</title>
    <meta name="description" content="Contact the Morangup Residents Group for any inquiries, suggestions, or feedback.">
    <meta name="keywords" content="Morangup WA, Morangup 6083, Morangup Residents Group, contact us">
    <meta name="author" content="David Mackenzie">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://morangup.com.au/contact.html">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://morangup.com.au/dmcss/dm.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <!-- Add any additional meta tags or links as needed -->
    <script src="https://www.google.com/recaptcha/api.js?render=6LeqedYpAAAAALzo2Mv160KNyTejtuhnBaQzYXDI"></script>
    <style type="text/css" scoped>
        /* Define your custom CSS styles here */
		img-dave{
     max-width:400px;
}

body,h1,h2,h3,h5,h6 {font-family: "Lato", sans-serif;
}
body,h4 {font-family: "Lato", sans-serif; color:#1e4759;
}
body, html {
  max-width: 100%;
  margin: auto;
  color: #777;
  line-height: 1.2;
  padding: 6px;
}

        .main-content {
            max-width: 1000px;
            margin: auto;
            padding: 20px;
            border: 1.5px solid #666;
            border-radius: 10px;
            background-color: #fff;
            text-align: left;
        }

        .section-heading {
            font-size: 24px;
            font-weight: bold;
            color: #1e4759;
            margin-bottom: 10px;
        }

        .section-content {
            margin-bottom: 20px;
        }

        .section-content p {
            margin-bottom: 10px;
        }

        .join-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #556191;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .join-button:hover {
            background-color: #3a4f6d;
        }

        .footer {
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-top: 20px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
			margin-bottom:20px;
        }

        /* Responsive logo */
        .logo {
            max-width: 100%;
            height: auto;
            display: block;
            margin: auto;
            margin-top: 15px;
        }

        /* Centered navigation */
        .nav-container {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .nav-container a {
            margin: 0 10px;
            color: #1e4759;
            text-decoration: none;
            font-weight: bold;
        }

        /* Header margin-top */
        header {
            margin-top: 15px;
        }

        /* Styling for the issue and solution section */
        .issue-solution {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
        }

        .issue-solution h2 {
            font-size: 20px;
            color: #1e4759;
            margin-bottom: 10px;
        }

        .issue-solution p {
            margin-bottom: 10px;
        }

        .issue-solution ul {
            list-style-type: disc;
            margin-left: 20px;
            margin-bottom: 10px;
        }

        .issue-solution li {
            margin-bottom: 5px;
        }

        /* Contact form styles */
        .contact-form {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background-color: #f9f9f9;
        }

        .contact-form label {
            font-weight: bold;
        }

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        .contact-form textarea {
            height: 150px;
        }

        .contact-form input[type="submit"] {
            background-color: #556191;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .contact-form input[type="submit"]:hover {
            background-color: #3a4f6d;
        }

        /* Feedback for email validation */
        #email-feedback {
            margin-top: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>

<header>
	<a href="index.html">
    <img src="/dmimages/logo.jpg" alt="Morangup Residents Group Logo" class="logo">
</a>
    <div class="nav-container">
        <a href="index.html">Home</a>
        <a href="resident.html">Residents</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
    </div>
</header>

<div class="main-content">
    <h1 class="section-heading">Contact Us</h1>
    <div class="section-content">
        <p>Have a question or suggestion? We'd love to hear from you!</p>
    </div>
    
    <div class="contact-form">
    <h1>Contact Us</h1>
    <form action="submit_form.php" method="POST" onsubmit="return validateForm()">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br>
        <div id="email-feedback"></div> <!-- Feedback for email validation -->

        <label for="message">Message:</label><br>
        <textarea id="message" name="message" required></textarea><br>
        <div id="message-feedback" style="color: red; font-size: 14px;"></div> <!-- Feedback for short message -->

        <!-- Google reCAPTCHA -->
        <div class="g-recaptcha" data-sitekey="6LcyHfgSAAAAAOXxMitiRWnf8lc755fYIGNRoA2D"></div><br>

        <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>

<footer class="footer">
    <hr class="dave">
    <center>
        <a href="https://www.facebook.com/Morangup" target="_blank" class="fa fa-facebook"></a>
        <a href="https://www.facebook.com/Morangup"> Follow us on Facebook </a>
        <h4>"Escape to Morangup and live your best rural life. With endless opportunities for hobby farming and fresh air to breathe, you'll wonder why you didn't move here sooner."</h4>
    </center>
    <hr class="dave">
    <p>&copy; Morangup - 2024</p> <p> All correspondence to PO BOX 1750 MIDLAND DC 6936 WA</p>
    <p>
        <center>
            <a href="https://morangup.com.au/t&c.html"> Terms and Conditions</a> |
            <a href="https://morangup.com.au/privacy_terms.html">User Conduct Agreement Privacy</a>
        </center>
    </p>
</footer>

<!-- JavaScript code -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // Validate email using AJAX
    $(document).ready(function() {
        $('#email').on('input', function() {
            var email = $(this).val();

            $.ajax({
                url: '/validate_email.php', // Correct endpoint
                method: 'POST',
                data: { email: email },
                dataType: 'json',
                success: function(response) {
                    if (response.valid) {
                        $('#email-feedback').html('<span style="color: green;">&#10004; Valid email</span>');
                    } else if (response.error) {
                        $('#email-feedback').html('<span style="color: red;">Error: ' + response.error + '</span>');
                    } else {
                        $('#email-feedback').html('<span style="color: red;">&#10006; Invalid email</span>');
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $('#email-feedback').html('<span style="color: red;">Error validating email. (' + textStatus + ')</span>');
                }
            });
        });
    });

    // Validate message length
    function validateForm() {
        var message = document.getElementById('message').value.trim();
        var feedback = document.getElementById('message-feedback');
        
        if (message.length < 100) {
            feedback.innerHTML = 'Please write a more detailed message (at least 100 characters).';
            return false; // Prevent form submission
        }
        
        feedback.innerHTML = ''; // Clear feedback if validation passes
        return true; // Allow form submission
    }
</script>


</body>
</html>
