Hexo Guide
Add A Contact Form To Hexo
Here is a guide for integrating Fabform with a Hexo site:
Step 1: Create a new Hexo site
If you haven’t set up a Hexo site yet:
-
Install Hexo CLI: Install Hexo CLI globally using npm:
Terminal window npm install -g hexo-cli -
Create Hexo Site: Run the following commands to create a new Hexo site named
hexo-personal-site
:Terminal window hexo init hexo-personal-sitecd hexo-personal-site -
Install Dependencies: Install dependencies for the Hexo site:
Terminal window npm install -
Start Hexo Server: Launch the Hexo development server:
Terminal window hexo server
Hexo will start a hot-reloading development environment accessible at http://localhost:4000
.
Step 2: Add a Contact Section to your Hexo site
-
Create Contact Page: Inside the
source/_posts
directory of your Hexo site, create a new directory namedcontact
. -
Create Markdown File: Inside the
contact
directory, create a new markdown file namedindex.md
. -
Update Contact Page Content: Replace the content of
index.md
with the following code block:---title: Contact Usdate: 2020-11-27 17:30:49---<form accept-charset="UTF-8" action="https://fabform.io/f/{your-form-endpoint}" method="POST"><input type="email" name="email" placeholder="Your Email"><input type="text" name="name" placeholder="Your Name"><input type="text" name="message" placeholder="Your Message"><button type="submit">Send</button></form>Note: Replace
{your-form-endpoint}
with the unique form endpoint provided by Fabform.
Step 3: Run your Hexo site locally to finalize setup
-
Start Hexo Server: Run the following command to see your Hexo form in action at
localhost:4000/contact/
:Terminal window hexo server
That’s it! Your Hexo site is now integrated with Fabform for handling form submissions.