To create a contact form in a Nuxt Content (Docus) site using FabForm, follow these steps. Docus is a documentation theme for Nuxt Content, and FabForm is a service for handling form submissions.

Step-by-Step Guide

1. Set Up Nuxt Content (Docus) Project:

   • If you haven’t already, create a new Nuxt Content project and install Docus:

     npx nuxi init my-docs
     cd my-docs
     npm install
     npm install @nuxt/content-theme-docs

2. Configure Docus:

   • Update your nuxt.config.ts to use the Docus theme:

     import { defineNuxtConfig } from 'nuxt'
     
     export default defineNuxtConfig({
       buildModules: [
         '@nuxt/content-theme-docs'
       ],
       content: {
         liveEdit: false
       }
     })

3. Create a Contact Page:

   • Create a new Markdown file for your contact page. For example, create a file named contact.md in your content directory:

     ---
     title: Contact Us
     description: Get in touch with us
     ---
     
     <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
       <div>
         <label for="name">Name:</label><br>
         <input type="text" id="name" name="name" required><br>
       </div>
       <div>
         <label for="email">Email:</label><br>
         <input type="email" id="email" name="email" required><br>
       </div>
       <div>
         <label for="message">Message:</label><br>
         <textarea id="message" name="message" required></textarea><br>
       </div>
       <div>
         <input type="submit" value="Submit">
       </div>
     </form>

4. Configure FabForm:

   • Sign up on FabForm.
   • Create a new form to get your form ID.
   • Configure the form settings on FabForm to handle submissions (e.g., set up email notifications, response messages, etc.).

5. Update Sidebar Navigation:

   • Update the navigation property in your Docus configuration to include the contact page. This configuration is usually found in content/config/navigation.json or similar:

     [
       {
         "title": "Home",
         "to": "/"
       },
       {
         "title": "Contact",
         "to": "/contact"
       }
     ]

6. Run Your Nuxt Content Site:

   • Serve your Nuxt Content site locally to test the form:

     npm run dev

   • Navigate to http://localhost:3000/contact to ensure your contact form appears correctly and can submit data.

7. Deploy Your Site:

   • Build your Nuxt Content site:

     npm run build
     npm run generate

   • Deploy the site using your preferred method (e.g., Vercel, Netlify, GitHub Pages, etc.).

Example Directory Structure:

my-docs/
├── content/
│   ├── index.md
│   ├── contact.md
│   └── config/
│       └── navigation.json
├── nuxt.config.ts
├── package.json

Example nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  buildModules: [
    '@nuxt/content-theme-docs'
  ],
  content: {
    liveEdit: false
  }
})

Example contact.md:

---
title: Contact Us
description: Get in touch with us
---

<form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
  <div>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br>
  </div>
  <div>
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br>
  </div>
  <div>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" required></textarea><br>
  </div>
  <div>
    <input type="submit" value="Submit">
  </div>
</form>

Example navigation.json:

[
  {
    "title": "Home",
    "to": "/"
  },
  {
    "title": "Contact",
    "to": "/contact"
  }
]

By following these steps, you will have a fully functional contact form on your Nuxt Content (Docus) site that integrates with FabForm for handling submissions.