Vue Contact Form Tutorial - Send Email Without a Backend

Building a contact form in Vue.js usually means setting up a backend server to handle submissions and send emails. With Static Forms, you can skip the backend entirely. Your Vue component sends form data to the Static Forms API, which handles email delivery, spam protection, and submission storage for you.

In this tutorial, we will build a complete contact form using Vue 3's Composition API, handle loading and error states, and briefly cover the Vue 2 Options API approach.

Prerequisites

• A Vue 3 project (Vite, Nuxt, or Vue CLI)
• A Static Forms account — sign up for free
• Your API key from the Static Forms dashboard

Vue 3 Composition API Contact Form

Create a ContactForm.vue component:

How It Works

1. Reactive form state is managed with reactive(), which tracks all field values
2. handleSubmit sends a JSON POST request to the Static Forms endpoint with your API key and form data
3. Loading state disables the button and shows "Sending..." while the request is in flight
4. Success state hides the form and displays a confirmation message
5. Error handling catches network or API failures and shows an error message
6. Honeypot field is hidden from users but catches bots that auto-fill all fields

Environment Variables

Store your API key in a .env file:

Vite exposes variables prefixed with VITE_ to the client. If you are using Nuxt, use NUXT_PUBLIC_STATIC_FORMS_KEY instead and access it via useRuntimeConfig().public.

Vue 2 Options API Version

If you are working with Vue 2, here is a condensed version using the Options API:

The template is the same as the Vue 3 version. The main difference is that data is returned from a data() function and the submit handler is defined in methods.

Adding reCAPTCHA

For stronger spam protection beyond the honeypot, you can add reCAPTCHA to your form. Install a Vue reCAPTCHA package, get your site key from Google reCAPTCHA, and configure your secret key in your Static Forms CAPTCHA settings.

Include the g-recaptcha-response token in your submission body and Static Forms will verify it server-side.

For a detailed reCAPTCHA walkthrough, see our understanding reCAPTCHA guide.

Using with Nuxt

If you are building with Nuxt, check out our dedicated Nuxt.js integration guide for Nuxt-specific setup instructions and best practices.

Get Started

You now have everything you need to add a working contact form to your Vue application. Static Forms handles email delivery, spam protection, and submission storage so you do not need to build or maintain a backend.

Sign up for Static Forms to get your API key and start receiving form submissions for free.