How to Connect Nuxt 3 Forms to Form2Lead
Step-by-step developer instructions for Nuxt 3 applications.
How do you send Nuxt 3 form submissions to Form2Lead?
Add a working contact form to a Nuxt 3 site (static or SSR) by posting form data from a component to a Form2Lead endpoint.
Why use Form2Lead with Nuxt 3?
Nuxt 3 sites often ship as static output (`nuxt generate`) or server-rendered without a dedicated form backend. Form2Lead removes the need for a contact API route entirely: a Nuxt component posts FormData with `fetch()`, and Form2Lead handles validation, honeypot spam filtering, email notifications, and the lead inbox. Your Nuxt app stays lean and deploys anywhere.
Prerequisites
- ✔A Nuxt 3 project
- ✔A Form2Lead endpoint URL
Step-by-Step Integration Guide
01. Add a Nuxt Form Component
Create a component that posts FormData to Form2Lead on submit.
<script setup>
const status = ref('idle');
async function handleSubmit(event) {
event.preventDefault();
status.value = 'submitting';
const res = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
method: 'POST',
body: new FormData(event.target),
headers: { 'Accept': 'application/json' },
});
status.value = res.ok ? 'success' : 'error';
}
</script>
<template>
<form @submit="handleSubmit">
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<button type="submit" :disabled="status === 'submitting'">Send</button>
</form>
</template>02. Add the Honeypot Spam Field
Include a hidden `_gotcha` input so automated bots are silently rejected.
<input type="text" name="_gotcha" style="display:none !important" tabindex="-1" autocomplete="off" />
Nuxt 3 Integration FAQ
Does Form2Lead work with Nuxt’s static and SSR builds?
Yes. The submission happens client-side from the browser to Form2Lead, so it works identically for `nuxt generate`, SSR, and hybrid rendering.