Merge pull request #44 from jrtechs/PinnedPosts

Added the contact template file to the git repo.

templates/blog/contact.html

@@ -0,0 +1,86 @@
+{header}
+
+<div class="container">
+
+    <div class="row">
+        <div class='col-md-8'>
+            {if messageSent}
+                <h1>Message Sent</h1>
+                <p>I will try to get back to you within a week. Thank you for messaging me.</p>
+            {else}
+                <form action="/contact" method="post">
+                    <div class="card border-primary rounded-0">
+                        <div class="card-header p-0">
+                            <div class="bg-info text-white text-center py-2">
+                                <h3><i class="fa fa-envelope"></i>Contact Me</h3>
+                                <p class="m-0">I would love to hear from you.</p>
+                            </div>
+                        </div>
+                        <div class="card-body p-3">
+                            <div class="form-group">
+                                <div class="input-group mb-2">
+                                    <div class="input-group-prepend">
+                                        <div class="input-group-text"><svg id="i-user" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                            <path d="M22 11 C22 16 19 20 16 20 13 20 10 16 10 11 10 6 12 3 16 3 20 3 22 6 22 11 Z M4 30 L28 30 C28 21 22 20 16 20 10 20 4 21 4 30 Z" />
+                                        </svg></div>
+                                    </div>
+                                    <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="input-group mb-2">
+                                    <div class="input-group-prepend">
+                                        <div class="input-group-text"><svg id="i-mail" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                            <path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />
+                                        </svg></div>
+                                    </div>
+                                    <input type="email" class="form-control" id="email" name="email" placeholder="example@gmail.com" required>
+                                </div>
+                            </div>
+                            <div class="form-group">
+                                <div class="input-group mb-2">
+                                    <div class="input-group-prepend">
+                                        <div class="input-group-text"><svg id="i-msg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                                            <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
+                                        </svg></div>
+                                    </div>
+                                    <textarea class="form-control" placeholder="Message" name="message" required></textarea>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div>
+                            </div>
+
+                            <div class="text-center">
+                                <input type="submit" value="Send" class="btn btn-info btn-block rounded-0 py-2">
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            {/if}
+        </div>
+        <br>
+        <br>
+        <div class="col-md-4 col-4">
+            {>sideBar}
+        </div>
+    </div>
+
+</div>
+
+
+<script src='https://www.google.com/recaptcha/api.js'></script>
+
+<script>
+    $("form").submit(function(event) {
+
+        var recaptcha = $("#g-recaptcha-response").val();
+        if (recaptcha === "") {
+            event.preventDefault();
+            alert("Please check the recaptcha");
+        }
+    });
+</script>
+
+{footer}