How to create a contact form using Nuxt3 and Supabase

Ready to create a simple contact form from scratch using Nuxt and Supabase?

Let's go. 🏃‍♀️💨

Supabase

Supabase is a great opensource alternative to Firebase that has an excellent free tier and responsive support team.
 

Create Table and Database

First things first, go to supabase.com and setup a free account.

Next, click "new project" from your dashboard.

Create new organization or choose existing one.

Create new project with strong database password.

Next click on the "Table Editor" icon on the left so you can create a new table with all of your contact form fields. Keeping it simple, just create an "email" field, and also please remember the name of your table since you will be referencing it in your code.
 

Get API Keys

Click on "settings" gear icon, then "API" in the left menu. From there you can copy down the project URL and public anon key, placing them in an env file in your project root.

SUPABASE_URL=""
SUPABASE_API_KEY=""

Nuxt3

Contact Form Template

Create your contact form.

<template>
  <div class="flex items-center justify-center h-screen bg-black">
    <div class="text-center text-white p-6 border-2 border-white w-full max-w-md">
      <h1 class="text-2xl mb-6">Join Our Newsletter</h1>
      <p class="mb-4">Get amazing updates right to your inbox.</p>
      <form @submit.prevent="submitEmail" class="flex flex-col">
        <label class="mb-4">
          Your Email Address
          <input v-model="email" type="email" class="bg-gray-800 text-white w-full px-3 py-2 mt-2" />
          <span class="text-red-500">{{ emailError }}</span>
        </label>
        <button type="submit" class="bg-white text-black px-6 py-2 mt-4">Send Message</button>
      </form>
    </div>
  </div>
</template>

Note: This form uses Tailwind CSS classes for styling.

Install the Nuxt Supabase module

For this project we will be using the Supabase Nuxt Module, which you can find here.

npm install @nuxtjs/supabase --save-dev

Add refs

const email = ref('')
const emailError = ref('')

Now create the script section

async function submitEmail() {
  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i

  if (email.value && !regex.test(email.value)) {
    emailError.value = "Invalid email address"
    return
  } else {
    emailError.value = ""
  }

  const { error } = await client
    .from('contactForm')
    .insert([
      { email: email.value, topic: 'blog' },
    ]);

  if (error) {
    console.error("Error submitting email:", error.message);
    return;
  }

  console.log("Email submitted successfully!");
}

This async function does the following:

1. Basic validation that checks if email is formatted properly
2. Submits 'email' ref value to your Supabase table "contactForm"
3. Shows error or success message.

That's it! Now you have a simple contact form that is able to make submissions to a database.

Conclusion

This contact form works decently if you really just want to collect email addresses, but there are lot's of other things to consider when creating a contact form.

To name a few:

• Button loading state
• User feedback for error and success messages
• Additional fields
• CAPTCHA

If interested in a more advanced Nuxt3 contact form using Supabase please follow or comment so you can get notified when it's published. 🤓