ryanmoon.com/pages/contact.vue

<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({
        from: 'message@ryanmoon.com',
        subject: info.subject + ' - ' + info.name + ' sent a message',
        text: details,
      })
  
      info.sent = true
    }
  }

</script>

<template>
  <div class="contact">
    <ContentDoc id="content" />

    <form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
      <div class="group">
        <label for="name">Name<span aria-hidden="true">*</span></label>
        <input v-model="info.name" id="name" type="text" placeholder="Your name" required="true" />
      </div>

      <div class="group">
        <label for="subject">Subject<span aria-hidden="true">*</span></label>
        <select v-model="info.subject" id="subject" >
          <option value="General" >General</option>
          <option value="Inquiry" >Project Inquiry</option>
          <option value="Misc" >Other</option>
          <option disabled selected hidden >---</option>
        </select>
      </div>

      <div class="group">
        <label for="company">Company</label>
        <input v-model="info.company" id="company" type="text" placeholder="Your company" required="false" />
      </div>

      <div class="group">
        <label for="email">Email<span aria-hidden="true">*</span></label>
        <input v-model="info.email" id="email" type="email" placeholder="Email address" required="true" />
      </div>

      <div class="group message">
        <label for="message">Message<span aria-hidden="true">*</span></label>
        <textarea v-model="info.message" id="message" placeholder="Start typing here" required="true" ></textarea>
      </div>

      <button type="submit" >Submit</button>
    </form>

    <div class="success" v-if="info.sent">
      <p>Success, your message has been sent. I'll get back to you as soon as possible.</p>
    </div>

  </div>
</template>