inspin.io/pages/contact.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>