contact-form.ejs 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <div class="container-fluid bg-dark text-white">
  2. <div class="container" style="padding-top: 60px; padding-bottom: 60px;">
  3. <div class="row justify-content-center">
  4. <div class="col-9">
  5. <h2 class="text-center">Contact</h2>
  6. <p class="lead">Send me direct message and I will get in touch as quick as possible.</p>
  7. <div v-show="contactMessageSuccess" style="height: 170px;">
  8. <div class="alert alert-success fade show" role="alert">
  9. Your message has been sent successfully!
  10. <button type="button" class="close" aria-label="Close"
  11. v-on:click="resetContactForm()">
  12. <span aria-hidden="true">&times;</span>
  13. </button>
  14. </div>
  15. </div>
  16. <div v-show="contactMessageError" style="height: 170px;">
  17. <div class="alert alert-danger fade show" role="alert">
  18. There was an error sending your message.
  19. <button type="button" class="close" aria-label="Close"
  20. v-on:click="resetContactForm()">
  21. <span aria-hidden="true">&times;</span>
  22. </button>
  23. </div>
  24. </div>
  25. <form @submit.prevent v-show="!contactMessageSuccess && !contactMessageError">
  26. <div class="form-group">
  27. <div class="row">
  28. <div class="col-12 col-md-4" style="padding-bottom: 10px;">
  29. <input type="text" class="form-control" placeholder="Name" required v-model="contactMessage.name">
  30. </div>
  31. <div class="col-12 col-md-4">
  32. <input type="text" class="form-control" placeholder="Email" required v-model="contactMessage.email">
  33. </div>
  34. </div>
  35. </div>
  36. <div class="form-group">
  37. <textarea class="form-control " id="validationTextarea" placeholder="Write a Message here" required v-model="contactMessage.content"></textarea>
  38. </div>
  39. <button v-on:click="sendMessage(contactMessage)"
  40. type="submit" class="btn btn-outline-success">
  41. Send
  42. </button>
  43. </form>
  44. </div>
  45. </div>
  46. </div>
  47. </div>