Como dividir um formulário em etapas

Oi, Dayson, tudo bem?

Desculpe a demora em te responder!

Podemos utilizar as linguagens HTML, CSS e JavaScript para dividir o formulário em etapas, preenchendo em cada etapa uma parte das informações do formulário.

Como exemplo podemos seguir esses passos na construção do formulário:

• Estruture o HTML: Crie uma estrutura HTML básica para o formulário com uma seção para cada etapa.

  <form id="myForm">
    <section id="step1">
      <!-- Campos do primeiro passo -->
      <input type="text" name="campo1" placeholder="Campo 1" />
      <input type="text" name="campo2" placeholder="Campo 2" />
      <button type="button" onclick="nextStep()">Próximo</button>
    </section>
  
    <section id="step2" style="display: none;">
      <!-- Campos do segundo passo -->
      <input type="text" name="campo3" placeholder="Campo 3" />
      <input type="text" name="campo4" placeholder="Campo 4" />
      <button type="button" onclick="previousStep()">Anterior</button>
      <button type="button" onclick="nextStep()">Próximo</button>
    </section>
  
    <section id="step3" style="display: none;">
      <!-- Campos do terceiro passo -->
      <input type="text" name="campo5" placeholder="Campo 5" />
      <input type="text" name="campo6" placeholder="Campo 6" />
      <button type="button" onclick="previousStep()">Anterior</button>
      <button type="submit">Enviar</button>
    </section>
  </form>

• Estilize as etapas: Use CSS para ocultar todas as seções, exceto a primeira. Você pode fazer isso definindo o estilo "display" para "none" nas seções adicionais.

  #step2,
    #step3 {
        display: none;
    }

• Implemente as funções JavaScript: Agora, implemente as funções JavaScript para controlar a navegação entre as etapas. Você pode fazer isso usando o DOM (Document Object Model) para mostrar ou ocultar as seções conforme necessário.

  var currentStep = 1;
        var totalSteps = 3;
  
        function nextStep() {
            if (currentStep < totalSteps) {
                var currentSection = document.getElementById("step" + currentStep);
                currentSection.style.display = "none";
  
                currentStep++;
  
                var nextSection = document.getElementById("step" + currentStep);
                nextSection.style.display = "block";
            }
        }
  
        function previousStep() {
            if (currentStep > 1) {
                var currentSection = document.getElementById("step" + currentStep);
                currentSection.style.display = "none";
  
                currentStep--;
  
                var previousSection = document.getElementById("step" + currentStep);
                previousSection.style.display = "block";
            }
        }
  
        function submitForm() {
            // Lógica para enviar o formulário
            document.getElementById("myForm").submit();
        }

  O resultado utilizando esse código está mostrado no gif abaixo, onde temos dois campos a cada seção com botões de navegação ntre as seções:

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!