/Form-multi-step

A ideia do projeto é uma aplicação de formulário com multiplos passos para o usuário seguir. É muito chato preencher formulários muito longos e a chance de um usuário desistir é grande. Quebrar um formulário em partes menores é uma ótima estratégia para reter o usuário.

Primary LanguageTypeScript

Form Multi Step

Form-multi-step.mp4

Contexto

Encontrei o desafio de criar um formulário com multi steps no site de desafios para front-end Fontendmentor. O desafio conta com varias imagens do layout que deve ser alcançado, tanto no Desktop quanto no mobile, eu gosto bastante dos desafios que eles disponibilizam na plataforma.

A ideia do projeto é uma aplicação de formulário com multiplos passos para o usuário seguir. É muito chato preencher formulários muito longos e a chance de um usuário desistir é grande. Quebar um formulário em partes menores é uma ótima estratégia para reter o usuário.

Caso queira acessar a página da aplicação clique aqui

Principais desafios que encontrei

  • O primeiro foi criar inputs do tipo checkbox personalizados, já que eles não aceitam estilização. Contornei isso adicionando uma tag span que alterava a estilização se o checkbox estava marcado ou não, e deixei o checkbox original escondido para apenas o span personalizado estar visível.

  • Em segundo foi criar um input do tipo switch. Consegui usando um tutorial do W3Schools. Nesse tutorial também aprendi sobre a pseudoclass :before e :after.

  • Exemplo de switch

Exemplo de switch

  • Ao fazer o deploy no Github pages a página não funcionava. Depois de uma rápida pesquisa, descobri que precisava criar uma variável de ambiente com o endereço onde a página seria servida. Quando você roda usando o server de desenvolvimento do webpack ele já coloca essa variável automaticamente com o endereço certo. No caso em que você vá servir os arquivos num servidor seu, é necessário criar essa variável antes de rodar o npm run build. Então adicionei um arquivo .env com a variável e tudo funcionou corretamente.
  PUBLIC_URL=https://alexsandro-01.github.io/Form-multi-step/

Tecnologias usadas

  • React
  • Typescript
  • Css-modules
  • Git
  • Github pages

Executando a aplicação

  1. Fazendo o clone;
  git clone git@github.com:Alexsandro-01/Form-multi-step.git
  1. Instalando as dependências;
npm install
  1. Iniciando a aplicação;
npm start
  1. Acesse a aplicação no seu browser;
http://localhost:3000/