FabForm

Written by: Geoffrey Callaghan

create a contact form with Docsify

Create A Contact Form With Docsify

Creating a contact form in a Docsify site using FabForm is straightforward. Docsify is a JavaScript documentation site generator, and FabForm is a service for handling form submissions. Here’s a step-by-step guide to integrate a contact form into a Docsify site using FabForm:

Step-by-Step Guide

  1. Set Up Docsify Project:

    • If you haven’t already, install Docsify and set up a new project: 
      npm i docsify-cli -g
docsify init ./docs
cd docs

  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:

    • Edit the _sidebar.md file to add the contact page to your navigation: 
      * [Home](/)
* [Contact](/contact)

  5. Run Your Docsify Site:

    • Serve your Docsify site locally to test the form: 
      docsify serve .
    • Navigate to http://localhost:3000/#/contact to ensure your contact form appears correctly and can submit data.

  6. Deploy Your Site:

    • You can deploy your Docsify site to GitHub Pages, Netlify, Vercel, or any other static site hosting service.

Example Directory Structure:

docs/
├── index.html
├── README.md
├── contact.md
└── _sidebar.md

Example index.html:

Make sure your index.html includes the necessary Docsify scripts and configuration:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Docsify Site</title>
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true
    };
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>

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 _sidebar.md:

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

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