To create a contact form using MkDocs with FabForm, you’ll need to follow several steps. MkDocs is a static site generator that’s geared towards project documentation, and FabForm is a form handling service. Here’s a step-by-step guide on how to integrate a contact form into an MkDocs site using FabForm:

1. Set Up MkDocs Project:

   • If you haven’t already, install MkDocs using pip:

     pip install mkdocs

   • Create a new MkDocs project:

     mkdocs new my-project
     cd my-project

2. Install MkDocs Material Theme (optional but recommended):

   • Install the Material theme for MkDocs:

     pip install mkdocs-material

   • Update mkdocs.yml to use the Material theme:

     site_name: My Docs
     theme:
       name: 'material'

3. Create a Contact Page:

   • In the docs directory, create a file named contact.md.
   • Add your contact form HTML code to contact.md:

     # Contact Us
     
     <form action="https://fabform.io/f/YOUR_FORM_ID" method="POST">
       <label for="name">Name:</label><br>
       <input type="text" id="name" name="name" required><br>
       <label for="email">Email:</label><br>
       <input type="email" id="email" name="email" required><br>
       <label for="message">Message:</label><br>
       <textarea id="message" name="message" required></textarea><br>
       <input type="submit" value="Submit">
     </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. Test Your Site:

   • Serve your MkDocs site locally to test the form:

     mkdocs serve

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

6. Deploy Your Site:

   • Build your MkDocs site:

     mkdocs build

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

Example MkDocs Configuration (mkdocs.yml):

site_name: My Docs
theme:
  name: 'material'
nav:
  - Home: index.md
  - Contact: contact.md

Example Contact Form Page (docs/contact.md):

# Contact Us

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

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