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