2023-11-27 01:36:09 +00:00
|
|
|
<script setup>
|
|
|
|
|
|
|
|
const mail = useMail()
|
|
|
|
|
|
|
|
const info = reactive({
|
|
|
|
name: undefined,
|
|
|
|
subject: undefined,
|
|
|
|
company: undefined,
|
|
|
|
email: undefined,
|
|
|
|
message: undefined,
|
|
|
|
test: undefined,
|
|
|
|
sent: false
|
|
|
|
})
|
|
|
|
|
|
|
|
async function onSubmit () {
|
|
|
|
|
|
|
|
let details = `
|
|
|
|
${ info.name } has sent a message.
|
|
|
|
|
|
|
|
name: ${ info.name }
|
|
|
|
Company: ${ info.company }
|
|
|
|
email: ${ info.email }
|
|
|
|
|
|
|
|
${ info.message }
|
|
|
|
|
|
|
|
`
|
|
|
|
|
|
|
|
if (info.test === undefined) {
|
|
|
|
mail.send({
|
2023-12-06 07:18:10 +00:00
|
|
|
from: 'msg@ryanmoon.com',
|
|
|
|
subject: info.name + ' - sent a ' + info.subject + ' msg',
|
2023-11-27 01:36:09 +00:00
|
|
|
text: details,
|
|
|
|
})
|
|
|
|
|
|
|
|
info.sent = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
2023-07-11 06:03:57 +00:00
|
|
|
<template>
|
|
|
|
<div class="contact">
|
|
|
|
<ContentDoc id="content" />
|
|
|
|
|
2023-11-27 01:36:09 +00:00
|
|
|
<form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
|
2023-07-11 06:03:57 +00:00
|
|
|
<div class="group">
|
|
|
|
<label for="name">Name<span aria-hidden="true">*</span></label>
|
2023-11-27 01:36:09 +00:00
|
|
|
<input v-model="info.name" id="name" type="text" placeholder="Your name" required="true" />
|
2023-07-11 06:03:57 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="group">
|
|
|
|
<label for="subject">Subject<span aria-hidden="true">*</span></label>
|
2023-11-27 01:36:09 +00:00
|
|
|
<select v-model="info.subject" id="subject" >
|
2023-12-06 07:18:10 +00:00
|
|
|
<option value="general" >General</option>
|
|
|
|
<option value="inquiry" >Project Inquiry</option>
|
|
|
|
<option value="misc" >Other</option>
|
2023-07-11 06:03:57 +00:00
|
|
|
<option disabled selected hidden >---</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="group">
|
|
|
|
<label for="company">Company</label>
|
2023-12-06 07:18:10 +00:00
|
|
|
<input v-model="info.company" id="company" type="text" placeholder="Your company" />
|
2023-07-11 06:03:57 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="group">
|
|
|
|
<label for="email">Email<span aria-hidden="true">*</span></label>
|
2023-11-27 01:36:09 +00:00
|
|
|
<input v-model="info.email" id="email" type="email" placeholder="Email address" required="true" />
|
2023-07-11 06:03:57 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="group message">
|
|
|
|
<label for="message">Message<span aria-hidden="true">*</span></label>
|
2023-11-27 01:36:09 +00:00
|
|
|
<textarea v-model="info.message" id="message" placeholder="Start typing here" required="true" ></textarea>
|
2023-07-11 06:03:57 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<button type="submit" >Submit</button>
|
|
|
|
</form>
|
2023-11-27 01:36:09 +00:00
|
|
|
|
|
|
|
<div class="success" v-if="info.sent">
|
2023-12-06 07:18:10 +00:00
|
|
|
<p>Success, your message has been sent. I'll get back to you soon.</p>
|
2023-11-27 01:36:09 +00:00
|
|
|
</div>
|
|
|
|
|
2023-07-11 06:03:57 +00:00
|
|
|
</div>
|
|
|
|
</template>
|