1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- <div class="container-fluid bg-dark text-white">
- <div class="container" style="padding-top: 60px; padding-bottom: 60px;">
- <div class="row justify-content-center">
- <div class="col-9">
- <h2 class="text-center">Contact</h2>
- <p class="lead">Send me direct message and I will get in touch as quick as possible.</p>
- <div v-show="contactMessageSuccess" style="height: 170px;">
- <div class="alert alert-success fade show" role="alert">
- Your message has been sent successfully!
- <button type="button" class="close" aria-label="Close"
- v-on:click="resetContactForm()">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- </div>
- <div v-show="contactMessageError" style="height: 170px;">
- <div class="alert alert-danger fade show" role="alert">
- There was an error sending your message.
- <button type="button" class="close" aria-label="Close"
- v-on:click="resetContactForm()">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- </div>
- <form @submit.prevent v-show="!contactMessageSuccess && !contactMessageError">
- <div class="form-group">
- <div class="row">
- <div class="col-4">
- <input type="text" class="form-control" placeholder="Name" required v-model="contactMessage.name">
- </div>
- <div class="col-4">
- <input type="text" class="form-control" placeholder="Email" required v-model="contactMessage.email">
- </div>
- </div>
- </div>
- <div class="form-group">
- <textarea class="form-control " id="validationTextarea" placeholder="Write a Message here" required v-model="contactMessage.content"></textarea>
- </div>
- <button v-on:click="sendMessage(contactMessage)"
- type="submit" class="btn btn-outline-success">
- Send
- </button>
- </form>
- </div>
- </div>
- </div>
- </div>
|