122 lines
3.5 KiB
Vue
122 lines
3.5 KiB
Vue
<script setup>
|
||
useHead({
|
||
title: 'Inspin Digital | Contact us',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content: ``
|
||
},
|
||
],
|
||
})
|
||
|
||
const mail = useMail()
|
||
|
||
const info = reactive({
|
||
name: undefined,
|
||
email: undefined,
|
||
subject: 'Default',
|
||
company: undefined,
|
||
message: undefined,
|
||
test: undefined,
|
||
sent: false
|
||
})
|
||
|
||
async function onSubmit () {
|
||
|
||
let details = `
|
||
${ info.name } has reached out.
|
||
|
||
name: ${ info.name }
|
||
email: ${ info.email }
|
||
company: ${ info.social }
|
||
|
||
${ info.message }
|
||
|
||
---
|
||
originated: contact form
|
||
|
||
`
|
||
|
||
if (info.test === undefined) {
|
||
mail.send({
|
||
from: 'web@inspin.io',
|
||
subject: info.subject + ' Msg - ' + info.name,
|
||
text: details,
|
||
})
|
||
|
||
info.sent = true
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="contact center">
|
||
|
||
<div class="details">
|
||
<h1>Contact information</h1>
|
||
<h2>Send us a message</h2>
|
||
<p>We enjoy hearing from our community and sharing ideas. Have a question or just want to say hey, we’d love to hear!</p>
|
||
|
||
<div class="mail">
|
||
<span class="icon-mail"></span><NuxtLink to="mailto:hello@inspin.io">hello@inspin.io</NuxtLink>
|
||
</div>
|
||
|
||
<div class="meeting">
|
||
<span class="icon-phone"></span><NuxtLink to="https://cloud.inspin.io/apps/calendar/appointment/XM2G79eJXHTT" target="_BLANK">Schedule a meeting</NuxtLink>
|
||
</div>
|
||
|
||
<div class="office">
|
||
<span class="icon-map"></span><NuxtLink to="https://www.openstreetmap.org/node/11702177049" target="_BLANK">52 Nashua Street, Milford NH 03055</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<form v-if="!info.sent" class="form" :state="info" @submit.prevent="onSubmit">
|
||
<div class="group">
|
||
<label for="name">Name</label>
|
||
<input v-model="info.name" id="name" type="text" placeholder="Your name" required="true" />
|
||
</div>
|
||
|
||
<div class="group">
|
||
<label for="subject">Subject</label>
|
||
<select v-model="info.subject" id="subject">
|
||
<option value="General">General</option>
|
||
<option value="Support">Product Support</option>
|
||
<option value="Feedback">Feedback</option>
|
||
<option value="Career">Careers</option>
|
||
<option value="Misc">Other</option>
|
||
<option disabled value="Default" hidden>---</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="group">
|
||
<label for="email">Email</label>
|
||
<input v-model="info.email" id="email" type="email" placeholder="Email address" required="true" />
|
||
</div>
|
||
|
||
<div class="group">
|
||
<label for="company">Company <small>(optional)</small></label>
|
||
<input v-model="info.company" id="company" type="text" placeholder="Company name" />
|
||
</div>
|
||
|
||
<div class="group message">
|
||
<label for="message">Message</label>
|
||
<textarea v-model="info.message" id="message" placeholder="Type your message here..." required="true" ></textarea>
|
||
</div>
|
||
|
||
<div class="group hide">
|
||
<label name="test">Do you respect user privacy?</label>
|
||
<input v-model="info.test" type="checkbox" />
|
||
</div>
|
||
|
||
<button type="submit" >Submit form</button>
|
||
|
||
</form>
|
||
<div v-if="info.sent" class="success">
|
||
<span class="icon-sent"></span>
|
||
<h3>Thanks for reaching out</h3>
|
||
<p>We'll respond as soon as possible. Don't hesitate to email <NuxtLink to="mailto:hello@inspin.io">hello@inspin.io</NuxtLink>
|
||
with more info if needed.</p>
|
||
</div>
|
||
</div>
|
||
</template> |