Add contact form section with WhatsApp integration

Author: B-Nduna

css/style.css

@@ -1,4 +1,3 @@
-
 *, *:before, *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -2184,6 +2183,106 @@ blockquote {
 
 }
 
+/* --------- 6.6 Contact Form ---------- */
+
+#contact {
+    clear: both;
+    overflow: hidden;
+}
+
+#contact .row {
+    max-width: 1245px;
+    margin: 0 auto;
+    padding: 75px 0;
+    position: relative;
+}
+
+.contact-form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.contact-form .col-2 {
+    width: calc(50% - 10px);
+    padding: 0;
+}
+
+.contact-form .col-3 {
+    width: 100%;
+    padding: 0;
+}
+
+.contact-form label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.contact-form input,
+.contact-form textarea,
+.contact-form select {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #e1e1e1;
+    border-radius: 3px;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+
+.contact-form input:focus,
+.contact-form textarea:focus,
+.contact-form select:focus {
+    border-color: #333;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.contact-form textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+
+.contact-form button {
+    margin-top: 15px;
+    width: auto;
+}
+
+/* Responsive Contact Form */
+
+@media (max-width: 767px) {
+    .contact-form .col-2 {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    #contact .row {
+        padding: 35px 0 !important;
+    }
+
+    .contact-form .col-2 {
+        width: 100%;
+        padding: 0;
+    }
+
+    .contact-form .col-3 {
+        width: 100%;
+        padding: 0;
+    }
+
+    .contact-form label {
+        font-size: 13px;
+    }
+
+    .contact-form button {
+        width: 100%;
+    }
+}
+
 
 
 

index.html

@@ -259,6 +259,50 @@ <h2 class="section-title">What our customers are saying</h2>
         </aside>
     </main>
 
+    <!-- Contact Form Section -->
+    <section id="contact" class="scrollto clearfix">
+        <div class="row clearfix">
+            <div class="col-3">
+                <div class="section-heading">
+                    <h3>Get in Touch</h3>
+                    <h2 class="section-title">Contact Us</h2>
+                    <p class="section-subtitle">Have questions or ready to book your next ink session? Send us a message and we'll get back to you via WhatsApp!</p>
+                </div>
+            </div>
+            <div class="col-2-3">
+                <form id="contact-form" class="contact-form">
+                    <div class="col-2">
+                        <label for="name">Name</label>
+                        <input type="text" id="name" name="name" placeholder="Your Full Name" required>
+                    </div>
+                    <div class="col-2">
+                        <label for="phone">Phone Number</label>
+                        <input type="tel" id="phone" name="phone" placeholder="Your Phone Number" required>
+                    </div>
+                    <div class="col-2">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email" placeholder="Your Email Address" required>
+                    </div>
+                    <div class="col-2">
+                        <label for="service">Service Type</label>
+                        <select id="service" name="service" required>
+                            <option value="">Select a service</option>
+                            <option value="Custom Tattoo">Custom Tattoo</option>
+                            <option value="Cover-up Tattoo">Cover-up Tattoo</option>
+                            <option value="Piercing">Piercing</option>
+                            <option value="General Inquiry">General Inquiry</option>
+                        </select>
+                    </div>
+                    <div class="col-3">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" placeholder="Tell us about your tattoo idea or inquiry..." rows="5" required></textarea>
+                    </div>
+                    <button type="submit" class="button">Send via WhatsApp</button>
+                </form>
+            </div>
+        </div>
+    </section>
+
     <footer id="landing-footer" class="clearfix">
         <div class="row clearfix">
             <p id="copyright" class="col-2">Copyright © 2024 XO Inks All Rights Reserved.</p>

js/site.js

@@ -44,6 +44,33 @@ $(document).ready(function () {
 
 });
 
+// WhatsApp Form Submission
+        document.getElementById('contact-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const name = document.getElementById('name').value;
+            const phone = document.getElementById('phone').value;
+            const email = document.getElementById('email').value;
+            const service = document.getElementById('service').value;
+            const message = document.getElementById('message').value;
+            
+            const whatsappMessage = `Hello XO Inks! 👋\n\n` +
+                `Name: ${name}\n` +
+                `Phone: ${phone}\n` +
+                `Email: ${email}\n` +
+                `Service: ${service}\n` +
+                `Message: ${message}\n\n` +
+                `Looking forward to hearing from you!`;
+            
+            const encodedMessage = encodeURIComponent(whatsappMessage);
+            
+            const whatsappNumber = '27734322826';
+            
+            window.open(`https://wa.me/${whatsappNumber}?text=${encodedMessage}`, '_blank');
+            
+            this.reset();
+        });
+
 
 
 $(window).load(function () {