Skip to main content

Build Multi-Step Forms for HubSpot CMS

Visual drag-and-drop builder for creating professional multi-step forms with real-time preview and seamless HubSpot integration. No coding required.

Get StartedExplore Features
Drag & Drop Builder
Visual form editor
Real-Time Preview
See changes instantly
Export Modules
Ready for HubSpot CMS

Quick Start

Get up and running in minutes with our streamlined setup process

1

Clone and Install

Clone the repository and install dependencies for the full-stack application.
git clone https://github.com/davidmenlop/HubSpot-Form-builder.git
cd "HubSpot Form builder/main"
npm install
2

Configure HubSpot OAuth

Create a HubSpot OAuth app and configure your environment variables.
# main/server/.env
HUBSPOT_CLIENT_ID=your-client-id
HUBSPOT_CLIENT_SECRET=your-client-secret
HUBSPOT_REDIRECT_URI=http://localhost:3001/oauth/hubspot/callback
Create two .env files:Backend (main/server/.env):
PORT=3001
HUBSPOT_CLIENT_ID=your-client-id
HUBSPOT_CLIENT_SECRET=your-client-secret
HUBSPOT_REDIRECT_URI=http://localhost:3001/oauth/hubspot/callback
FRONTEND_URL=http://localhost:5173/
HUBSPOT_SCOPES=forms content forms-uploaded-files
Frontend (main/frontend/.env):
VITE_API_BASE=http://localhost:3001
3

Start Development Servers

Launch both the backend API and frontend development servers.
# Terminal 1 - Backend
cd main/server && npm run dev

# Terminal 2 - Frontend  
cd main/frontend && npm run dev
Open http://localhost:5173 to access the form builder.
4

Build Your First Form

Connect to HubSpot, select a form, and start building with the visual drag-and-drop editor.
After connecting to HubSpot, all your forms will be available in the dropdown. The field palette automatically populates with fields from the selected form.

Core Features

Everything you need to create professional multi-step forms

Visual Drag & Drop Editor

Intuitive canvas-based editor with drag-and-drop functionality. Arrange fields in rows with up to 3 fields per row.

Field Palette

Auto-detected fields from HubSpot forms with visual indicators. Drag unused fields from the palette to your layout.

Real-Time Preview

Interactive multi-step preview with live validation. See exactly how your form will look and behave.

Module Export

Generate production-ready HubSpot CMS modules with fields.json, module.html, CSS, and JavaScript.

Built for HubSpot

Seamless integration with HubSpot CMS and Forms API

OAuth 2.0 Authentication

Secure OAuth flow for connecting to HubSpot portals

Forms API Integration

Direct access to HubSpot Forms API with automatic field detection

CMS Module Generation

Export modules ready for HubSpot Design Manager

Technical Architecture

Modern stack built with React, TypeScript, and Express

Frontend Architecture

React 18 with TypeScript, @dnd-kit for drag & drop, Zustand for state management, and Vite for blazing-fast builds.

Explore frontend

Backend Architecture

Express API with TypeScript, OAuth 2.0 flow implementation, HubSpot Forms API proxy, and CORS configuration.

Explore backend

Ready to Build Better Forms?

Start creating professional multi-step forms for HubSpot CMS with our visual drag-and-drop builder. No coding required.

Get Started NowView Documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us