Form step jQuery

form-step-jquery.html

<form action=""
                          method="post">

                        <div id="wizard">

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <label for="name">Como devo te chamar? <span class="text-red-600">*</span></label>
                                    <input id="name" size="1" type="text" name="form_fields[name]"
                                           class="w-full h-10 py-1.5 border-b border-black focus:outline-none"
                                           placeholder="Se quiser que eu te encontre pelo instagram é só deixar o @"
                                           required="required" aria-required="true">
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <label for="empresa">Qual o nome da sua empresa? <span
                                                class="text-red-600">*</span></label>
                                    <input id="empresa" size="1" type="text" name="form_fields[empresa]"
                                           class="w-full h-10 py-1.5 border-b border-black focus:outline-none"
                                           placeholder="Se ainda não tiver um nome, basta deixar em branco.">
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <label for="empresa">Qual a área de atuação da sua empresa? <span
                                                class="text-red-600">*</span></label>
                                    <input id="empresa" size="1" type="text" name="form_fields[empresa]"
                                           class="w-full h-10 py-1.5 border-b border-black focus:outline-none"
                                           placeholder="Responda aqui." required="required" aria-required="true">
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <label for="empresa">Qual a área de atuação da sua empresa? <span
                                                class="text-red-600">*</span></label>
                                    <input id="empresa" size="1" type="text" name="form_fields[empresa]"
                                           class="w-full h-10 py-1.5 border-b border-black focus:outline-none"
                                           placeholder="Responda aqui." required="required" aria-required="true">
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <label for="empresa">Qual o tamanho da sua empresa? <span
                                                class="text-red-600">*</span></label>
                                    <div class="field-subgroup">
                                        <span class="field-option block">
                                            <input type="radio" value="MEI (Somente eu)" id="form-field-mei"
                                                   name="form_fields-empresa" required="required" aria-required="true">
                                            <label for="form-field-mei">MEI (Somente eu)</label>
                                        </span>
                                        <span class="field-option block">
                                            <input type="radio" value="Pequeno (2 a 12 funcionários)"
                                                   id="form-field-pequeno-funcionario" name="form_fields-empresa"
                                                   required="required" aria-required="true">
                                            <label for="form-field-pequeno-funcionario">Pequeno (2 a 12 funcionários)</label>
                                        </span>
                                        <span class="field-option block">
                                            <input type="radio" value="Médio (13 a 40 funcionários)"
                                                   id="form-field-medio-funcionario"
                                                   name="form_fields-empresa" required="required"
                                                   aria-required="true">
                                            <label for="form-field-medio-funcionario">Médio (13 a 40 funcionários)</label>
                                        </span>
                                        <span class="field-option block">
                                            <input type="radio" value="Grande (+40 funcionários)"
                                                   id="form-field-grande-funcionario"
                                                   name="form_fields-empresa" required="required"
                                                   aria-required="true">
                                            <label for="form-field-grande-funcionario">Grande (+40 funcionários)</label>
                                        </span>
                                    </div>
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <label for="projeto">Quanto tempo você tem para desenvolver esse projeto? <span
                                                class="text-red-600">*</span></label>
                                    <div class="field-subgroup">
                                        <span class="field-option block">
                                            <input type="radio" value="Urgente - em menos de 20 dias"
                                                   id="form-field-urgente"
                                                   name="form_fields-projeto" required="required" aria-required="true">
                                            <label for="form-field-urgente">Urgente - em menos de 20 dias</label>
                                        </span>
                                        <span class="field-option block">
                                            <input type="radio" value="Tenho um tempinho - Até 40 dias"
                                                   id="form-field-tempinho" name="form_fields-projeto"
                                                   required="required" aria-required="true">
                                            <label for="form-field-tempinho">Tenho um tempinho - Até 40 dias</label>
                                        </span>
                                        <span class="field-option block">
                                            <input type="radio" value="Temos tempo de sobra - Até 4 meses"
                                                   id="form-field-sobra"
                                                   name="form_fields-projeto" required="required" aria-required="true">
                                            <label for="form-field-sobra">Temos tempo de sobra - Até 4 meses</label>
                                        </span>
                                    </div>
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <input size="1" type="text" name="form_fields[tel]" id="form-field-tel"
                                           class="w-full h-10 py-1.5 border-b border-black focus:outline-none"
                                           placeholder="Se possível, WhatsApp." required="required"
                                           aria-required="true">
                                    <label for="form-field-tel">Qual o seu telefone? <span
                                                class="text-red-600">*</span></label>
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field -->
                            <h4></h4>
                            <section class="form-field">
                                <div>
                                    <input size="1" type="text" name="form_fields[email]" id="form-field-email"
                                           class="w-full h-10 py-1.5 border-b border-black focus:outline-none"
                                           placeholder="alguem@exemplo.com" required="required" aria-required="true">
                                    <label for="form-field-email">E o seu melhor e-mail? <span
                                                class="text-red-600">*</span></label>
                                </div>
                            </section>
                            <!-- /form-field -->

                            <!-- form-field
                            <h4></h4>
                            <section class="form-field">
                                <button id="form-field-email" class="btn">Quero um orçamento</button>
                            </section>
                            /form-field -->

    </div>
</form>
<!-- /form -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        $("#wizard").steps({
            headerTag: "h4",
            bodyTag: "section",
            transitionEffect: "fade",
            enableAllSteps: true,
            transitionEffectSpeed: 500,
            onStepChanging: function (event, currentIndex, newIndex) {
                if (newIndex === 1) {
                    $('.steps ul').addClass('step-2');
                } else {
                    $('.steps ul').removeClass('step-2');
                }
                if (newIndex === 2) {
                    $('.steps ul').addClass('step-3');
                } else {
                    $('.steps ul').removeClass('step-3');
                }

                if (newIndex === 3) {
                    $('.steps ul').addClass('step-4');
                    $('.actions ul').addClass('step-last');
                } else {
                    $('.steps ul').removeClass('step-4');
                    $('.actions ul').removeClass('step-last');
                }
                return true;
            },
            labels: {
                finish: "Começar novamente",
                next: "Próximo",
                previous: "Voltar"
            }
        });

        // Custom Steps Jquery Steps
        $('.wizard > .steps li a').click(function () {
            $(this).parent().addClass('checked');
            $(this).parent().prevAll().addClass('checked');
            $(this).parent().nextAll().removeClass('checked');
        });

        // Custom Button Jquery Steps
        $('.forward').click(function () {
            $("#wizard").steps('next');
        });

        $('.backward').click(function () {
            $("#wizard").steps('previous');
        });

        // Checkbox
        $('.checkbox-circle label').click(function () {
            $('.checkbox-circle label').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

https://bbbootstrap.com/snippets/form-wizard-using-jquery-steps-88897668