Personal blog written from scratch using Node.js, Bootstrap, and MySQL. https://jrtechs.net
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

85 lines
4.2 KiB

  1. {header}
  2. <br><br><br><br><br>
  3. <div class="container">
  4. <div class="row">
  5. <div class='col-md-8 col-12'>
  6. {if messageSent}
  7. <h1>Message Sent</h1>
  8. <p>I will try to get back to you within a week. Thank you for messaging me.</p>
  9. {else}
  10. <form action="/contact" method="post">
  11. <div class="card border-primary rounded-0">
  12. <div class="card-header p-0">
  13. <div class="bg-info text-white text-center py-2">
  14. <h3><i class="fa fa-envelope"></i>Contact Me</h3>
  15. <p class="m-0">I would love to hear from you.</p>
  16. </div>
  17. </div>
  18. <div class="card-body p-3">
  19. <div class="form-group">
  20. <div class="input-group mb-2">
  21. <div class="input-group-prepend">
  22. <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">
  23. <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" />
  24. </svg></div>
  25. </div>
  26. <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
  27. </div>
  28. </div>
  29. <div class="form-group">
  30. <div class="input-group mb-2">
  31. <div class="input-group-prepend">
  32. <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">
  33. <path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />
  34. </svg></div>
  35. </div>
  36. <input type="email" class="form-control" id="email" name="email" placeholder="example@gmail.com" required>
  37. </div>
  38. </div>
  39. <div class="form-group">
  40. <div class="input-group mb-2">
  41. <div class="input-group-prepend">
  42. <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">
  43. <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
  44. </svg></div>
  45. </div>
  46. <textarea class="form-control" placeholder="Message" name="message" required></textarea>
  47. </div>
  48. </div>
  49. <div class="form-group">
  50. <div class="g-recaptcha" data-sitekey="6LceWF8UAAAAAIsd7F6iY_Pywt4fJsJlFNPtEgi9"></div>
  51. </div>
  52. <div class="text-center">
  53. <input type="submit" value="Send" class="btn btn-info btn-block rounded-0 py-2">
  54. </div>
  55. </div>
  56. </div>
  57. </form>
  58. <br>
  59. <br>
  60. {/if}
  61. </div>
  62. <div class="col-md-4 col-12">
  63. {>sideBar}
  64. </div>
  65. </div>
  66. </div>
  67. <script src='https://www.google.com/recaptcha/api.js'></script>
  68. <script>
  69. $("form").submit(function(event) {
  70. var recaptcha = $("#g-recaptcha-response").val();
  71. if (recaptcha === "") {
  72. event.preventDefault();
  73. alert("Please check the recaptcha");
  74. }
  75. });
  76. </script>
  77. {footer}