How to create a contact form using Nuxt3 and Supabase
Tags: nuxt, vue, supabase, javascript
Published: 2023-06-28 03:34:25

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

&nbsp;

Let's go. 🏃‍♀️💨  

&nbsp;

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

### Create Table and Database

First things first, go to [supabase.com](https://supabase.com/) and setup a free account.

Next, click "new project" from your dashboard.

![Supabase new project for contact form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtljpiylp9yhpa8cj76z.png)
&nbsp;

Create new organization or choose existing one.

![Signup on Supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vqyf83otb5rg5ljseu3.png)
&nbsp;

Create new project with strong database password.

![Create database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7vj8ozn7gb75zriwc6p.png)
&nbsp;

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. 
&nbsp;

### 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=""
```

&nbsp;
## 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](https://tailwindcss.com/) classes for styling.

&nbsp;
### Install the Nuxt Supabase module


For this project we will be using the Supabase Nuxt Module, which you can find [here](https://github.com/nuxt-modules/supabase).

```
npm install @nuxtjs/supabase --save-dev
```
&nbsp;

### Add refs
    const email = ref('')
    const emailError = ref('')

&nbsp;

### 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.

&nbsp;

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

&nbsp;

## 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. 🤓