Creating a contact form in a Docusaurus site using FabForm involves several steps. Docusaurus is a popular static site generator optimized for building documentation websites, and FabForm is a form handling service. Here’s a guide on how to integrate a contact form into a Docusaurus site using FabForm:

Step-by-Step Guide

1. Set Up Docusaurus Project:

   • If you haven’t already, install Docusaurus using npx:

     npx create-docusaurus@latest my-website classic
     cd my-website

2. Install Required Packages:

   • Ensure you have the necessary dependencies installed:

     npm install

3. Create a Contact Page:

   • In the src/pages directory, create a new file named contact.js.

   • Add your contact form HTML code to contact.js:

     import React from 'react';
     import Layout from '@theme/Layout';
     
     function Contact() {
       return (
         <Layout title="Contact Us">
           <div className="container margin-vert--lg">
             <h1>Contact Us</h1>
             <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
               <div>
                 <label htmlFor="name">Name:</label><br />
                 <input type="text" id="name" name="name" required /><br />
               </div>
               <div>
                 <label htmlFor="email">Email:</label><br />
                 <input type="email" id="email" name="email" required /><br />
               </div>
               <div>
                 <label htmlFor="message">Message:</label><br />
                 <textarea id="message" name="message" required></textarea><br />
               </div>
               <div>
                 <input type="submit" value="Submit" />
               </div>
             </form>
           </div>
         </Layout>
       );
     }
     
     export default Contact;

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 Navigation:

   • To add the Contact page to your site’s navigation, update the docusaurus.config.js file:

     module.exports = {
       // ... other configuration settings
       themeConfig: {
         navbar: {
           // ... other navbar items
           items: [
             { to: '/contact', label: 'Contact', position: 'left' },
             // ... other items
           ],
         },
       },
     };

6. Test Your Site:

   • Start your Docusaurus site locally to test the form:

     npm run start

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

7. Build and Deploy Your Site:

   • Build your Docusaurus site:

     npm run build

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

Example Docusaurus Configuration (docusaurus.config.js):

module.exports = {
  title: 'My Site',
  tagline: 'Dinosaurs are cool',
  url: 'https://your-docusaurus-test-site.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'facebook', // Usually your GitHub org/user name.
  projectName: 'docusaurus', // Usually your repo name.

  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          editUrl:
            'https://github.com/facebook/docusaurus/edit/master/website/',
        },
        blog: {
          showReadingTime: true,
          editUrl:
            'https://github.com/facebook/docusaurus/edit/master/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],

  themeConfig: {
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          to: 'docs/',
          activeBasePath: 'docs',
          label: 'Docs',
          position: 'left',
        },
        {to: '/contact', label: 'Contact', position: 'left'},
        {to: 'blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },
    footer: {
      style: 'dark',
      links: [
        {
          title: 'Docs',
          items: [
            {
              label: 'Style Guide',
              to: 'docs/',
            },
            {
              label: 'Second Doc',
              to: 'docs/doc2/',
            },
          ],
        },
        {
          title: 'Community',
          items: [
            {
              label: 'Stack Overflow',
              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
            },
            {
              label: 'Discord',
              href: 'https://discordapp.com/invite/docusaurus',
            },
            {
              label: 'Twitter',
              href: 'https://twitter.com/docusaurus',
            },
          ],
        },
        {
          title: 'More',
          items: [
            {
              label: 'Blog',
              to: 'blog',
            },
            {
              label: 'GitHub',
              href: 'https://github.com/facebook/docusaurus',
            },
          ],
        },
      ],
      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
    },
  },
};

Example Contact Form Page (src/pages/contact.js):

import React from 'react';
import Layout from '@theme/Layout';

function Contact() {
  return (
    <Layout title="Contact Us">
      <div className="container margin-vert--lg">
        <h1>Contact Us</h1>
        <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
          <div>
            <label htmlFor="name">Name:</label><br />
            <input type="text" id="name" name="name" required /><br />
          </div>
          <div>
            <label htmlFor="email">Email:</label><br />
            <input type="email" id="email" name="email" required /><br />
          </div>
          <div>
            <label htmlFor="message">Message:</label><br />
            <textarea id="message" name="message" required></textarea><br />
          </div>
          <div>
            <input type="submit" value="Submit" />
          </div>
        </form>
      </div>
    </Layout>
  );
}

export default Contact;

By following these steps, you’ll have a fully functional contact form on your Docusaurus site that integrates with FabForm for handling submissions.