Build Conversational Forms with Pure JavaScript 💬

FormBotJS dynamically creates a chat-style form inside any container using simple configuration and HTML attributes. No need for external libraries — lightweight, flexible, and developer-friendly.

Try the Demo

This form is only for demonstration purposes; we don't collect any data as the endpoint is just for testing.

⬅ ⬆

How to Use FormBotJS

Add FormBotJS to your project in just 3 simple steps. Include the CDN links, create a container, and initialize the bot with your form questions.

  • Step 1: Add JS and CSS
  • Step 2: Create a container
  • Step 3: Initialize with questions

See the Pen form_boat_demo by Firoz (@LearnWithFiroz) on CodePen.

How to pass questions

Each item in questions is a single step in the conversational form. It closely mirrors an HTML input: label, name, type, attrs (HTML-like attributes) and optional options.

Common type values
  • text, email, number, date, file, textarea
  • select (single), multiselect (multiple select)
  • radio, checkbox (multiple choice)
  • hidden (Won’t be displayed to the user but will be included in the answers object and submitted to the endpoint, similar to extraData.)
  • message (display-only bot message)
Use attrs for validation & hints

Put HTML attributes here (they get applied to the generated input):

  • required, minlength, maxlength
  • pattern, placeholder, title
  • min, max, step (for numbers/dates)
  • accept (file types), data-maxsize (file size MB)
Top-level config
  • chat_containerId — element id where form renders (required)
  • chat_form_title — Form Title Deafult 'Chat Assistant'
  • post_url — server endpoint for POST submissions
  • color1 — primary theme color (CSS var --chat_color1)
  • mode — "submit" to POST, "return" to skip network
  • extraData — object of extra key/value pairs to append to FormData (e.g. CSRF token)
  • onComplete — callback called with (answers, formData) when finished
Example — question objects
// simple text + select + file example
const questions = [
  {
    label: "What's your full name?",
    name: "name",
    type: "text",
    attrs: { required: true, minlength: 3, placeholder: "e.g., Raju Kumar" }
  },

  {
    label: "Who are you?",
    name: "role",
    type: "select",
    options: ["Student", "Teacher"],
    attrs: { required: true }
  },

  {
    label: "Which subjects are you interested in?",
    name: "subjects",
    type: "multiselect",
    options: ["Math","Science","English"],
    attrs: { required: true }
  },

  {
    label: "Upload a profile photo (max 2MB)",
    name: "photo",
    type: "file",
    attrs: { accept: "image/*", "data-maxsize": "2" }
  },

  // display-only final message (optional)
  {
    label: "Thanks! We'll contact you soon.",
    name: "end_message",
    type: "message"
  }
];
Example — init / config
// initialize FormBot
FormBot.init({
  chat_containerId: "chat-form-container", // required
  post_url: "/api/submit",                  // server endpoint (used when mode === "submit")
  color1: "#28a745",                        // primary color (updates CSS var)
  mode: "submit",                           // "submit" or "return"
  extraData: { _token: "CSRF_TOKEN_HERE" }, // appended to FormData
  showProgress: true,
  saveToLocalStorage: true,
  questions,                                // pass the questions array
  onComplete: (answers, formData) => {
    // answers = [{name, label, value, file?}, ...]
    // formData = FormData instance (useful if you want to send it yourself)
    console.log("collected:", answers);
  }
});

Tip: put all HTML attributes inside attrs. That keeps the question definition compact and predictable.