HaveInsights FlowCraft
FlowCraft · Live demo

FlowCraft Lead Wizard

Fill in the three steps and watch the progress bar, validation and transitions respond. This demo mirrors the step logic in the paid wizard's app.js.

Demonstration only. Use any name and email you like. Nothing you enter is saved or sent anywhere.

Try it

  1. Enter a name and email. Try clicking Next with the fields empty to see the inline errors.
  2. Pick a budget and timeline. A dropdown for the budget and four tap-friendly timeline options.
  3. Submit. The form is replaced by a thank-you screen that summarises the answers.

Project inquiry

Step 1 of 3

Start your project

  1. 1Your info
  2. 2Project
  3. 3Done

Let's get acquainted

Who should we send the proposal to?

Demonstration only: nothing you enter is saved or sent.

How it works

How the wizard moves between steps

All of the logic lives in app.js, written in plain JavaScript and commented line by line so a junior developer can follow every state change.

  1. ValidateNext checks the current step's fields. If any fail, errors appear under them and focus moves to the first one.
  2. Update the stateOne state object records the current step and the answers. Nothing else decides what is on screen.
  3. Render and animateThe old step slides out, render() updates the progress bar and buttons, and the new step slides in. No page reload.

Connecting a backend: set submitUrl in app.js to your form handler, CRM or webhook. Leave it blank and the wizard simulates the send, which is handy for testing.

const state = {
  currentStep: 1,      // 1, 2 or 3
  isAnimating: false,  // ignore double clicks
  isSubmitting: false, // show the spinner
  data: {
    name: '', email: '',
    budget: '', timeline: ''
  }
};
Every button click changes this object, then calls render(). If the screen ever looks wrong, log state and you will see why.

What the full version includes

Delivered as a ZIP download through Payhip.

  • index.htmlThe three steps and success screen, styled with Tailwind CSS
  • app.jsStep logic, validation and transitions, heavily commented
  • style.cssTransition animations and field states
  • .htaccessApache/Hostinger caching and UTF-8 settings

Requirements

  • Any web host, or none. The wizard loads no data files, so it also runs when index.html is opened directly from your computer.
  • An internet connection for visitors. Tailwind CSS loads from its public CDN.
  • Your own form endpoint to receive leads. Add its URL to submitUrl in app.js. Until then, nothing is sent.
  • No npm install or build step. Upload the files and the wizard runs.

Get the Lead Wizard

Start with the free static shell to check the layout, or get the full version with the working steps you just tried.

Free

Free Static HTML Shell

The visual layout of all three steps and the thank-you screen, so you can review the design and markup in your own project.

  • Complete visual layout of every step
  • Sample structure and markup
  • Does not include the step logic or validation
Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Lead Wizard — $67

The working three-step wizard with validation, animated transitions and a ready spot for your form endpoint.

  • Step logic, validation and transitions in vanilla JavaScript
  • Add your form, CRM or webhook URL in one place in app.js
  • No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript
Buy the Full Lead Wizard — $67

Checkout and download are handled by Payhip.

Back to the FlowCraft catalogue to see the other components.