Bug on slider form

  • Resolved vitoradler

    (@vitoradler)


    3 years, 10 months ago

    I got a problem on my form’s layout, i got many slides working correctly (Desktop version) but one of them got the accordeon layout. i’ve tested it and the form is working properly on the “preview” option in the form editor window and in every new page I create, but its not working on the old ones.

    I’ve tried unistalling the cache plugins, none seens to work. I don’t know if this may be the cause, but that slide in particular is the only one that have an “conditional field” on the form.

    Here is the code i’m using:

    <div class="container">
  <div class="row">
    <div class="columns full cf7sg-slider-section" data-next="" data-prev="" data-submit="Enviar" data-dots="false">
      <div class="container cf7sg-collapsible" id="oKnMST">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados para o empréstimo</h3>
          <div class="col-12">
            De quanto precisa? [text* quanto-precisa class:dinheiro placeholder "Mínimo de R$5.000"]
          </div>
          <div class="col-12">
            Qual o valor do veículo? [text* valor-veiculo class:dinheiro]
          </div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="JGGDWJ">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados para contato</h3>
          <div class="col-12">
            Qual o seu nome? [text* nome]
          </div>
          <div class="col-12">
            Qual e-mail vai receber o resultado? [email* email]
          </div>
          <div class="col-12">
            Qual o seu celular? [tel* telefone-celular]
          </div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="Dv1uAQ">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados para o empréstimo</h3>
          <div class="col-12">
            Qual o objetivo do empréstimo? [select* objetivo-emprestimo include_blank "Pagamento de dívidas" "Investimento" "Reforma da casa" "Aquisi??o de bens" "Refinanciamento de dívidas" "Outros"]
          </div>
          <div class="col-12">
            Qual o prazo do empréstimo? [select* prazo-emprestimo include_blank "6 meses" "12 meses" "18 meses" "24 meses" "36 meses" "48 meses" "60 meses"]
          </div>
          <div class="col-12">
            Possui alguma restri??o no SPC ou Serasa? [select* restricao-spc-serasa include_blank "Sim" "N?o"]
          </div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="nRddAu">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados do veículo</h3>
          <div class="col-6" style="float:right">
            Este veículo está quitado? [radio veiculo-quitado use_label_element default:1 "Sim" "N?o"]
          </div>
          <div class="col-6" style="float:right">
            Este veículo está no seu nome? [radio veiculo-no-nome-do-titular use_label_element default:1 "Sim" "N?o"]
          </div>
          <div class="row">
            <br>
            <div class="col-12">
              Qual a marca do veículo? [select* marca-veiculo include_blank "Aston Martin" "Audi" "Bentley" "BMW" "BMW Motorrad" "Caoa Chery" "Chevrolet" "Chrysler" "Citro?n" "Dodge" "Ferrari" "Fiat" "Ford" "Honda" "Husqvarna" "Hyundai" "JAC" "Jaguar" "Jeep" "Kia" "Lamborghini" "Land Rover" "Lexus" "Lifan" "Maserati" "McLaren" "Mercedes-Benz" "Mini" "Mitsubishi" "Nissan" "Peugeot" "Porsche" "Ram" "Renault" "Rolls Royce" "Royal Enfield" "Smart" "Subaru" "Suzuki" "Toyota" "Triumph" "Troller" "Volkswagen" "Volvo" "Yamaha" "Outra"]
            </div>
            <div class="col-6" style="float:right">
              Qual o modelo do veículo? [text* modelo-veiculo placeholder "Ex:. Gol, Onix, Camaro, Hb20"]
            </div>
            <div class="col-6" style="float:right">
              Qual a vers?o do veículo? [text* versao-veiculo placeholder "Ex:. Ex, XEi, Ltz, Gls"]
            </div>
          </div>
          <div class="row">
            <div class="col-4" style="float:right">
              Motor do veículo [text* motor-veiculo placeholder "Ex:. 1.0, 2.0"]
            </div>
            <div class="col-4" style="float:right">
              Ano de fabrica??o [select* ano-fabricacao include_blank "2021" "2020" "2019" "2018" "2017" "2016" "2015" "2014" "2013" "2012" "2011" "2010" "2009" "anterior à 2009"]
            </div>
            <div class="col-4" style="float:right">
              Ano de modelo [select* ano-modelo include_blank "2022" "2021" "2020" "2019" "2018" "2017" "2016" "2015" "2014" "2013" "2012" "2011" "2010" "2009" "anterior à 2009"]
            </div>
            <div class="col-12">
              Placa do veículo [text* placa-veiculo placeholder "----"]
            </div>
            <div class="col-12">
              Qual o ano do veículo? [date* ano-veiculo]
            </div>
          </div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="ih2xh7">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados da residência</h3>
          <div class="col-12">
            Qual o seu CEP? [text* cep class:cf7-cep-autofill "00000-000"]
          </div>
          [group mostrar-endereco]
          <div class="col-6" style="float:right">
            Logradouro [text* logradouro class:cf7-cep-autofill__rua placeholder "Rua"]
          </div>
          <div class="col-6">
            Bairro [text* bairro class:cf7-cep-autofill__bairro placeholder "Bairro"]
          </div>
          <div class="col-6" style="float:right">
            Cidade [text* cidade class:cf7-cep-autofill__cidade placeholder "Cidade"]
          </div>
          <div class="col-6">
            UF [text* estado class:cf7-cep-autofill__uf placeholder "UF"]
          </div>
          [/group]
          <div class="col-6" style="float:left">
            Número [text* numero-casa placeholder "000"]
          </div>
          <div class="col-6" style="float:left">
            Qual o seu telefone fixo? [tel telefone-fixo]
          </div>
          <div class="col-12" style="float:right">
            Quanto tempo mora nesse endere?o? [select* tempo-de-moradia "Menos de 6 meses" "Entre 6 meses e 1 ano" "Entre 1 e 2 anos" "Entre 2 e 3 anos" "Entre 3 e 4 anos" "Mais de 4 anos"]
          </div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="de36Pk">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados pessoais</h3>
          <div class="col-12">
            Data de nascimento: [date* data-nascimento]
          </div>
          <div class="col-6" style="float:right">
            Estado civil [select* estado-civil include_blank "Solteiro (a)" "Casado (a)" "Divorciado (a)" "Viúvo (a)"]
          </div>
          <div class="col-6" style="float:right">
            Estado (UF) de nascimento: [select* UF-nascimento include_blank "Acre (AC)" "Alagoas (AL)" "Amapá (AP)" "Amazonas (AM)" "Bahia (BA)" "Ceará (CE)" "Distrito Federal (DF)" "Espírito Santo (ES)" "Goiás (GO)" "Maranh?o (MA)" "Mato Grosso (MT)" "Mato Grosso do Sul (MS)" "Minas Gerais (MG)" "Pará (PA)" "Paraíba (PB)" "Paraná (PR)" "Pernambuco (PE)" "Piauí (PI)" "Rio de Janeiro (RJ)" "Rio Grande do Norte (RN)" "Rio Grande do Sul (RS)" "Rond?nia (RO)" "Roraima (RR)" "Santa Catarina (SC)" "S?o Paulo (SP)" "Sergipe (SE)" "Tocantins (TO)"]
          </div>
          <div class="col-12">
            Cidade de nascimento (naturalidade): [text* cidade-nascimento]
          </div>
          <div class="col-6" style="float:right">
            Qual o seu CPF? [text* CPF class:CPF]
          </div>
          <div class="col-6" style="float:right">
            Qual o seu RG? [text* RG class:RG]
          </div>
          <div class="col-12" style="float:right">
            Qual o nome da sua m?e? [text* nome-da-mae]
          </div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="yFfJxe">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title">
          </span>
        </div>
        <div class="row">
          <br>
          <h3>Dados profissionais</h3>
          <div class="col-12">
            Qual sua atividade profissional? [select* atividade-profissional include_blank "Aut?nomo" "Aposentado" "Empresário" "Funcionário público" "Funcionário CLT" "Profissional liberal"]</div>
          <div class="row">
            [group grupo-info-trabalho clear_on_hide]
            <div class="col-12">
              Qual seu cargo ou ocupa??o? [text* cargo-ocupacao]</div>
            <div class="col-12">
              Qual o tempo de servi?o? [select* tempo-de-servico include_blank "Menos de 6 meses" "Entre 6 meses e 1 ano" "Entre 1 e 2 anos" "Entre 2 e 3 anos" "Entre 3 e 4 anos" "Mais de 4 anos"]</div>
            [/group] [group grupo-pergunta-cnpj clear_on_hide]
            <div class="col-12">
              Possui CNPJ? [select* pergunta-cnpj include_blank "Sim" "N?o"]</div>
            [/group] [group grupo-cnpj clear_on_hide]
            <div class="col-12">
              Qual o seu CNPJ? [text* cnpj class:cnpj]</div>
            [/group] [group grupo-aposentado clear_on_hide]
            <div class="col-12">
              Qual o número do seu beneficio? [text* numero-beneficio]</div>
            [/group]</div>
          <div class="col-12">
            Qual sua renda mensal? [text* renda-mensal class:dinheiro]</div>
        </div>
      </div>
      <div class="container cf7sg-collapsible" id="yFfJxx">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Termos de servi?o</h3>
          <div class="col-12">
            [acceptance concordar-LGPD] Através deste aceite o Declarante concorda com o uso dos seus dados para os fins estabelecidos na contrata??o ora realizada e autoriza a empresa a repassar seus dados para os seus Parceiros de negócio. <br><br>Ressaltamos que os dados fornecidos s?o tratados dentro de processos tecnológicos baseados nas boas práticas comerciais e respeito à Legisla??o, resguardando sempre a privacidade das informa??es prestadas, através de rigorosos critérios de seguran?a.<br><br>Repassamos aos nossos Parceiros somente as informa??es estritamente necessárias ao cumprimento da contrata??o ora realizada.<br><br>A n?o aceita??o a esta Declara??o impossibilita a contrata??o dos servi?os aqui oferecidos. [/acceptance]</div>
          <div class="col-12">
            ___________________________________________________
            <br>
            <b>Digite os caracteres da imagem abaixo. </b> <br>
          </div>
        </div>
        <div class="row">
          <div class="col-6" style="float:right">
            [captchac captcha-1]
          </div>
          <div class="col-6" style="float:right">
            [captchar captcha-1]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    • This topic was modified 3 years, 10 months ago by vitoradler.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    I am able to see the accordion on the 2nd but last slide.

    the form is working properly on the “preview” option in the form editor window and in every new page I create

    which means it is working properly ??

    but its not working on the old ones.

    did you clear your browser cache? Have you tried loading the older pages in a private window?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    I have also noticed that you are using long static [select] fields which are difficult to manage and make for a messy form code.

    The plugin allows you to create a dynamic list based on a custom taxonomy that is associated with the form. This allows you to manage your list (like the years) within the dashboard instead of inside the html code. See this tutorial for an example.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    but its not working on the old ones.

    I just spotted something in the form on your new page which may indicate there is an issue on the plugin JavaScript. Let me check and get back to you.

    Thread Starter vitoradler

    (@vitoradler)

    Yes, I’ve tried everything on cache, clearing the wp cache, the form cache, the specific page cache, the browser cache and opening on a private window, none of them worked.

    I’ve also tried to check on the code, couldn’t find a visible mistake. I’ll checkout on the tutorial u sent me, but u think that this is the cause?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    I’ll checkout on the tutorial u sent me, but u think that this is the cause?

    no, this is just to make you aware of functionality available in the plugin to ease management of large forms such as yours.

    I also noticed that your form structure does not make use of the row/columns structues, but instead uses some other html markup. Is there a reason why you are not using the Grid UI?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    can you enable WP_DEBUG mode on your server so I can test some things on your pages?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    but one of them got the accordeon layout.

    the html code you shared does have any accordion structure in it. Can you share the form with the accordion in it as well as existing page with this form so I can inspect why the accordion and the slider initialisation is not happening properly.

    Thread Starter vitoradler

    (@vitoradler)

    I still looking after the WP_DEBUG with the infra team (big company issues). For the forms, here it’s:

    New page with new form
    https://hinovacred.com.br/teste/

    Old page
    https://hinovacred.com.br/prosegur/financiamento-de-veiculo/#

    PS: there are two different forms on the old pages, one for mobile and one for desktop. The desktop one is a slider and the mobile is an Accordeon.

    Thread Starter vitoradler

    (@vitoradler)

    I just enabled the wp-debug, is there anything also you need?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    I just enabled the wp-debug, is there anything also you need?

    ok, let me take a look.

    PS: there are two different forms on the old pages, one for mobile and one for desktop. The desktop one is a slider and the mobile is an Accordeon.

    and the issue with the desktop slider form? I have see on slide 7 (2nd but last) that your collapsible row is not displaying properly.

    Is this form structure exactly the same as the New page and New Form?

    Plugin Author Aurovrata Venet

    (@aurovrata)

    PS: there are two different forms on the old pages, one for mobile and one for desktop.

    I have a feeling this could be the source of the bug. Can you please remove the mobile form and see if it works

    Plugin Author Aurovrata Venet

    (@aurovrata)

    I also noticed that there is difference between the form on the new page and the desktop form on the od page.

    New Page slide 7 HTML structure starts with:

    <div class="container cf7sg-collapsible" id="yFfJxe">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <div class="row">
          <br>
          <h3>Dados profissionais</h3>
          <div class="col-12">
            Qual sua atividade profissional?

    Old page: (missing row structure)

    <div class="container cf7sg-collapsible" id="yFfJxe">
        <div class="cf7sg-collapsible-title"><span class="cf7sg-title"></span></div>
        <h3>Dados Profissionais</h3>

    As I mentioned earlier, you have completely changed the HTML structure of the forms and are not respecting the structure setup and expected by the plugin. The plugin script expects certain HTML structures in place for the functionality to work, especially for js accordion and sliders which break if the structures are not preserved.

    I don’t think there is any issue with the plugin, I think the issue is with your customised HTML structure which may even be corrupted with missing closing elements.

    I strongly recommend that you let the plugin handle the form structure and keep custom HTML to the absolute minimum, else your form will be unmaintainable.

    Thread Starter vitoradler

    (@vitoradler)

    Its the same short code, don’t make sense the structure differ like that (I’ve also cleaned the cache). Anyway, as you suggested, I’ve removed one of the forms and it’s working properly now.

    Thanks for your assistance, your support really amaze me. Keep on the good work!

    Plugin Author Aurovrata Venet

    (@aurovrata)

    Anyway, as you suggested, I’ve removed one of the forms and it’s working properly now.

    ok, that’s interesting to note. It is also possible there is a bug in multi-form initialisation, ability to initialise multiple forms on a single page is something that was designed into the plugin right from the start, but was not thoroughly tested.

    I will run some test.

    Plugin Author Aurovrata Venet

    (@aurovrata)

    Thanks for your assistance, your support really amaze me. Keep on the good work!

    Thank you!. Please do leave a review when you have a moment to spare.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Bug on slider form’ is closed to new replies.