Membuat Contact Form di NuxtJS Menggunakan Formspree

March 27, 2021 2 min read
Belajar bagaimana membuat halaman contact form di NuxtJS menggunakan Formspree.

Salah satu kendala menggunakan Static Site Generator adalah saat kita ingin menambahkan Contact Form.

Karena kita tahu, di SSG tidak ada database untuk menangani proses pengiriman data serta server SMTP untuk memberi tahu kita saat seseorang mengirimkan pesan melalui Contact Form.

Dengan menggunakan Formspree, kita bisa membuat formulir kontak sederhana. Formspree menyediakan layanan bagi kita untuk menambahkan form ke situs statis dan mengirimkan email dengan data form ke email kita.

Membuat Project di Dashboard Formspree

Pertama, kita harus membuat project di Formspree untuk mengambil URL Endpoint yang akan kita gunakan di komponent NuxtJS.

Pada dashboard Formspree, buatlah Project dan buatlah Contact Form.

Dashboard Formspree

Lalu klik nama Contact Form yang telah kamu buat, klik tab Integration dan copy form endpointmu.

Dashboard Formspree

Membuat Halaman Kontak Form di NuxtJS

Selanjutnya, buatlah komponen dengan nama ContactForm.vue pada folder components.

<template>
  <form @submit.prevent="submitForm">
    <label>
      <span>Email</span><br />
      <input class="email mb-8 px-4 py-3 w-2/3 font-medium border rounded outline-none bg-light-elevatedSurface text-light-onSurfacePrimary focus:border-primary-base" type="email" name="email" v-model="email" placeholder="Email Kamu" />
    </label>
    <br />
    <label>
      <span>Pesan</span><br />
      <textarea class="email mb-8 px-4 py-3 w-2/3 font-medium border rounded outline-none bg-light-elevatedSurface text-light-onSurfacePrimary focus:border-primary-base" name="message" v-model="message" placeholder="Isi pesanmu"></textarea>
    </label>
    <br />
    <button type="submit" class="button inline-block px-4 py-2 text-sm text-base font-medium text-white uppercase rounded shadow cursor-pointer bg-primary-base hover:bg-primary-light hover:shadow-md">Kirim</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      message: '',
      endpoint: 'url-endpoint-mu',
    }
  },
  methods: {
    async submitForm() {
      const data = {
        email: this.email,
        message: this.message,
      }
      const response = await this.$axios.post(this.endpoint, data)
    },
  },
}
</script>

Ubah url-endpoint-mu sesuai dengan URL Endpoint yang ada di dashboard Formspree.

Selanjutnya, panggil komponen ContactForm.vue. Pada case ini saya menempatkan halaman form di folder pages/kontak/index.vue.

<template>
    <div class="shadow-nuxt">
        <div class="container lg:max-w-4xl mx-auto p-4 pb-8">

            <h2 class="m-4 text-2xl text-center">Hubungi Saya</h2>
            <p class="m-4 text-sm text-center">
                Ada pertanyaan, kritik, atau saran? Sampaikan lewat email.
            </p>

            <p class="m-4 text-sm text-center">
                <ContactForm />
            </p>
    
        </div>
    </div>
</template>

<script>
export default {
  head() {
    const title = 'Hubungi Saya - Hamjs'
    return {
      title
    }
  },
}
</script>

Jalankan npm run dev, dan lihat di halaman localhost:3000/kontak.


Terima kasih sudah membaca artikel "Membuat Contact Form di NuxtJS Menggunakan Formspree"
Bagikan
Silahkan Login untuk berkomentar.