views/contact: New contact form design

1 files changed, 83 insertions, 52 deletions

diff --git a/views/contact.view.php b/views/contact.view.php
index 8a3c013..0d95665 100644
--- a/views/contact.view.php
+++ b/views/contact.view.php
@@ -1,61 +1,92 @@
 <?php require __DIR__ . '/partials/header.php'; ?>
 
-    <main class="contact">
+<?php require __DIR__ . '/partials/navigator.php'; ?>
 
+    <?php if ($formSuccess) : ?>
+    <div class="bg-teal-lightest border-t-4 border-blue rounded-b text-teal-darkest
+    px-4 py-3 shadow-md" role="alert">
+        <div class="flex">
+            <div>
+                <p class="font-bold">Your message has been successful.</p>
+                <p class="text-sm">I'll get in touch with you soon.</p>
+            </div>
+        </div>
+    </div>
+    <br>
+    <?php endif; ?>
+
+    <div>
+        <h1 class="text-3xl" style="color: #FF6978;">Contact</h1>
         <br>
+        <h2 class="text-xl font-normal text-grey-darkest leading-normal">
+            Interested in collaborating together?
+            Send a message by using the form below.
+        </h2>
+    </div>
+    <br>
+
+    <form class="w-full max-w-md rounded" method="post" action="/contact/">
+        <div class="flex flex-wrap -mx-3 mb-6">
+
+            <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+
+                <label class="block uppercase tracking-wide text-grey-darker text-xs
+                font-bold mb-2" for="name">
+                    Name
+                </label>
+
+                <input class="shadow-md appearance-none block w-full bg-grey-lightest
+                text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3
+                leading-tight focus:outline-none focus:bg-white focus:border-grey"
+                name="26471" id="name" type="text"
+                value="<?php echo $name ?? '' ?>">
+
+            </div>
+
+            <div class="w-full md:w-1/2 px-3">
+
+                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
+                for="email">
+                    Email
+                </label>
+
+                <input class="shadow-md appearance-none block w-full bg-grey-lightest text-grey-darker
+                border <?php echo $border = $emailError ? 'border-red' : 'border-grey-lighter';?>
+                rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white
+                focus:border-grey" name="26472" id="email" type="email" required="required"
+                value="<?php echo $email ?? '' ?>">
+
+                <?php if ($emailError) : ?>
+                    <p class="text-red text-xs"><?php echo $emailError ?></p>
+                <?php endif; ?>
+
+            </div>
 
-        <div id="contact-vue">
-            <form id="contactform" method="post" action="/?sent">
-
-                <table class="contact-maxWidth">
-                    <tbody>
-                        <tr>
-                            <td>
-                                 <div class="contact-name">
-                                    <label for="name">Name <span class="form-alert" v-show="!name">*</span></label>
-                                    <input v-model="name" type="text" name="26471" id="name">
-                                </div>
-                            </td>
-                            <td>
-                                <div class="contact-email">
-                                    <label for="email">Email <span class="form-alert" v-show="!email">*</span></label>
-                                    <input v-model="email" type="email" name="26472" id="email">
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <table class="contact-maxWidth">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <div>
-                                <label for="message">Message <span class="form-alert" v-show="!message">*</span></label>
-                                <textarea v-model="message" name="26478" id="message" rows="4"></textarea>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <table class="contact-maxWidth">
-                    <tbody>
-                        <tr>
-                            <td>
-                                 <ul class="contact-buttonPadding actions">
-                                     <li><input type="submit" value="send message" class="special"/></li>
-                                </ul>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <input type="checkbox" name="contact" class="form" tabindex="-1" autocomplete="off">
-
-            </form>
         </div>
+        <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="w-full px-3">
+                <label class="block uppercase tracking-wide text-grey-darker text-xs
+                font-bold mb-2" for="message">
+                    Message
+                </label>
+                <textarea class="shadow-md appearance-none block w-full
+                bg-grey-lightest text-grey-darker border border-grey-lighter
+                rounded py-3 px-4 mb-3 leading-tight focus:outline-none
+                focus:bg-white focus:border-grey" name="26473" id="message"
+                rows="4" required="required"><?php echo $message ?? '' ?></textarea>
+            </div>
+        </div>
+
+        <div class="text-center sm:text-left">
+            <button class="shadow bg-blue-light hover:bg-blue
+            focus:shadow-outline focus:outline-none text-white
+            font-bold py-2 px-4 rounded" type="submit">
+                Send Message
+            </button>
+        </div>
+
+        <input type="checkbox" name="agree" tabindex="-1" autocomplete="off" class="checkbox-agree">
 
-    </main>
+    </form>
 
 <?php require __DIR__ . '/partials/footer.php'; ?>