Frontend · Seções de site

Formulário de diagnóstico multietapas

Diagnóstico em 4 passos com barra de progresso, revisão e pontuação do lead por porte, orçamento e prazo. Qualifica antes da reunião e prioriza quem está pronto para comprar.

Formulário · Qualificação · Lead · Licença MIT · Criado por FlowCore Soluções LTDA

Como instalar

  1. Tenha um projeto React com Tailwind Já tem (Vite, Next.js, Remix)? Pule este passo. Se não, crie um em 1 minuto e adicione ./src/**/*.{ts,tsx} ao content do tailwind.config.
    npm create vite@latest minha-app -- --template react-ts
cd minha-app
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
  2. Crie o arquivo src/components/FormMultietapas.tsx Cole o código da aba Código. Ele é um arquivo só, sem dependência além de React.
  3. Use na sua página
    import FormMultietapas from "./components/FormMultietapas";

<FormMultietapas tema="claro" accent="#0057FF" onSubmit={(d) => console.log(d.score)} />
  4. Personalize Textos, dados e a cor de destaque (prop accent) são props com valor padrão. Troque pelos da sua marca ou ligue na sua API.

Código no GitHub · Biblioteca de códigos

Mais em Seções de site