Forms Technical Details
This document provides technical details about the Forms feature, primarily for developers or for advanced configuration after deployment.
Configuration
The forms module is configured in nuxt.config.ts. It includes settings for spam protection, rate limiting, and analytics.
Example configuration:
export default defineNuxtConfig({
formModule: {
enableNotifications: true,
enableAnalytics: true,
turnstile: {
enabled: true,
siteKey: process.env.NUXT_PUBLIC_TURNSTILE_SITE_KEY,
},
spam: {
enabled: true,
honeypotFields: ['_honeypot', 'website'],
blockPatterns: ['viagra', 'cialis'],
},
rateLimit: {
enabled: true,
maxSubmissions: 5,
windowMinutes: 60,
},
},
})
Creating Forms
Forms are created using the Form component and useForm composable.
Example usage:
<template>
<Form @submit="handleSubmit">
<UInput v-model="state.name" label="Name" />
<UInput v-model="state.email" label="Email" type="email" />
<UTextarea v-model="state.message" label="Message" />
<UButton type="submit" :loading="loading">Submit</UButton>
</Form>
</template>
<script setup>
import { useForm } from '#form'
const { state, loading, handleSubmit } = useForm({
formId: 'contact',
initialState: {
name: '',
email: '',
message: '',
},
})
</script>
Admin Capabilities
The module exposes admin configuration via useFormsAdmin, providing interfaces for:
- Form Builder (drag-and-drop interface)
- Submission management and export
- Analytics dashboards
Admin
The forms module includes a powerful set of admin features to build and manage your forms, view submissions, and analyze their performance.
Overview
Reliable email delivery is crucial for any online business. Our Email feature provides a robust solution for sending transactional emails, ensuring your messages reach your customers' inboxes.
