vue.js: Send E-Mails client side using Airtable

Stephan Strittmatter — Thu, 18 Feb 2021 14:56:37 +0000

Creating cool websites using SPA frameworks like vue.js you probably miss sending e-mails directly from JavaScript.

There are solutions like EmailJS wich are focused on this problem. But they are limited in the freemium model.

Using Airtable as easy database backend via REST-API (see this nice article of Carol how to access Airtable by Axios) I found the Automation Action to send mails on row creation. If a new row is created on a table, a mail could be send.

Setup Airtable Table

To do this, I have to setup an additional table for these messages. I called it ContactMessages:

Create Automation Action

Now you are able to define automation action on this table:

Take When a record is created for trigger. For the action now we could add Send an email. The receiver (To) is important to define. I used a fixed email to hide this from the frontend sources, but it is also possible to pass it by the REST-service and take it form a field of the table.

By the way, do not forget to enable the automation task:

Service in vue

Now we extend the vue project and add a new service contact.service.js:

import airtableBase from './airtable.service'
const TABLE_NAME = 'ContactMessages'

const contactService = {
  async send (item) {
    const data = {
      fields: item
    }

    // save the record
    const response = await airtableBase.post(`${TABLE_NAME}`, data)
    return {
      id: response.id,
      ...response.fields
    }
  }
}

export default contactService

Using Airtable for the complete project, there is a wrapper for base connection to Airtable (token, base) airtable.service.js:

import axios from 'axios'

const airtableBase = axios.create({
  baseURL: `https://api.airtable.com/v0/${process.env.VUE_APP_AIRTABLE_BASE}/`,
  headers: {
    Authorization: 'Bearer ' + process.env.VUE_APP_AIRTABLE_API_KEY,
    'Content-Type': 'application/json'
  }
})

export default airtableBase

For details how using Airtable via API I would like to refer again to Carols post.

Now we create a vue component to send contact messages:

<template>
  <div class="create-form">
    <b-form
      v-if="showForm"
      @submit="onSubmit"
    >
      <b-form-group
        label="Name"
      >
        <b-form-input
          v-model="contact.Name"
          type="text"
          placeholder="Name"
          required
        />
      </b-form-group>
      <b-form-group
        label="E-Mail"
      >
        <b-form-input
          v-model="contact.Email"
          type="email"
          placeholder="E-Mail"
          required
        />
      </b-form-group>
      <b-form-group label="Message">
        <b-form-textarea
          v-model="contact.Notes"
          rows="6"
          max-rows="24"
        />
      </b-form-group>

      <b-button
        type="submit"
        variant="primary"
        class="my-5"
      >
        Send
      </b-button>
    </b-form>
    <b-alert
      v-if="success"
      variant="success"
      class="my-5"
      show
    >
      Message was send sucessfully. Thanks for contacting us.
    </b-alert>
  </div>
</template>

<script>
import contactService from '@/services/contact.service'
export default {
  name: 'CreateForm',
  data () {
    return {
      contact: {},
      showForm: true,
      success: false
    }
  },
  methods: {
    onSubmit (event) {
      event.preventDefault()
      this.showForm = false
      contactService.send(this.contact).then(() => {
        this.success = true
      })
    }
  }
}
</script>

I used BootstrapVue for the form. This could be replaced by any other form code.

Resume

Using this solution you could create many different templates and receivers for mails send directly by vue apps. Some contact forms are created in minutes for free.

One thing is currently missing in this solution: SPAM protection.

What do you think about this solution?
Do you have a suggestion how to protect against bots? Sure there is Googles ReCaptcha, but I would prefer a free open source solution.

DEV Community: Stephan Strittmatter

vue.js: Send E-Mails client side using Airtable

Setup Airtable Table

Create Automation Action

Service in vue

Resume