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>
|