Vue.js Integration
Add a contact form to a Vue or Nuxt app
Last updated
To add a contact form to a Vue app without a backend, post the form data to https://api.staticforms.dev/submit with your form's API key in an apiKey field. Static Forms emails each submission to you, so a static build on any host is enough. Below are the Composition API (Vue 3) and Options API versions, then Nuxt. It works on the free plan.
Composition API (Vue 3)
Using Composition API with <script setup>:
Options API
Using Options API (Vue 2/3):
Environment Variables
Add your API key to environment variables:
Nuxt.js Integration
For Nuxt.js, use the same approach but access environment variables differently. The Nuxt guide has a complete component and the runtime config setup.
The response is JSON: success is true on success, and error holds the reason when it is false. For a CAPTCHA (reCAPTCHA v2 on Free; Turnstile, hCaptcha and ALTCHA from Starter) or file uploads (Starter and up), see the HTML guide; the field names are the same.
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.
Does it work with Nuxt static generation?
Yes. The form posts from the browser to Static Forms, so a prerendered or fully static Nuxt site needs no server route. Read the key from runtime config as shown above.
