To create a contact form in a VuePress site using FabForm, follow these steps. VuePress is a static site generator powered by Vue.js, and FabForm is a service for handling form submissions.

Step-by-Step Guide

1. Set Up VuePress Project:

   • If you haven’t already, install VuePress and set up a new project:

     npm install -g vuepress
     mkdir my-docs
     cd my-docs
     npm init -y
     npm install -D vuepress
     mkdir docs
     echo '# My Documentation' > docs/README.md

2. Create a Contact Page:

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

     # Contact 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>

3. 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.).

4. Update Sidebar Navigation:

   • Update the sidebar navigation in .vuepress/config.js to include the contact page:

     module.exports = {
       themeConfig: {
         sidebar: [
           '/',
           '/contact'
         ]
       }
     }

5. Run Your VuePress Site:

   • Serve your VuePress site locally to test the form:

     npx vuepress dev docs

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

6. Deploy Your Site:

   • Build your VuePress site:

     npx vuepress build docs

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

Example Directory Structure:

my-docs/
├── docs/
│   ├── .vuepress/
│   │   ├── config.js
│   ├── README.md
│   ├── contact.md
├── package.json

Example .vuepress/config.js:

module.exports = {
  title: 'My Documentation',
  description: 'Documentation for my project',
  themeConfig: {
    sidebar: [
      '/',
      '/contact'
    ]
  }
}

Example contact.md:

# Contact 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 README.md:

# My Documentation

Welcome to my documentation site.

* [Home](/)
* [Contact](/contact)

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