Form Visibility Issue with Conditional Dependencies in CFF Field Plugin

  • Resolved Pankaj Mehla

    (@pankakmehla)


    4 weeks ago

    I have set up a conditional question at the start of my form, asking the user to choose between “Yes” and “No.” Based on this selection, I have two separate forms contained within <div> fields, which are displayed using dependencies.

    However, upon loading the page, all form fields within these <div> elements are briefly displayed before the page adjusts to show only the relevant fields according to the user’s selection. This creates a noticeable lag, where users see all forms initially before the intended behaviour takes effect.This leads to confusion as users see all forms initially, and then they disappear once the page fully loads.

    • The issue occurs regardless of whether I enable or disable loading animations.
    • I am not using any caching plugins on my site.

    I would like the div forms to be completely hidden while the page is loading, ensuring that users only see the initial “Yes” and “No” options.

    I would greatly appreciate your assistance in resolving this issue. Thank you for your support!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @pankakmehla

    Could you please provide the link to the page that contains the form to check its structure?

    Please enter the predefined class name hide through the “Add CSS Layout Keywords” attribute of the DIV fields configured as dependent.

    Best regards.

    Thread Starter Pankaj Mehla

    (@pankakmehla)

    here is temporary live link:
    https://spooky-distance.localsite.io/?cff-form=7

    If prompted, enter the information below.

    Username: parcel

    Password: nonstop

    Plugin Author codepeople

    (@codepeople)

    Hello @pankakmehla

    You have no entered the class name hide through the “Add CSS Layout Keywords” attributes of the DIV fields you want to load hidden by default.

    Best regards.

    Thread Starter Pankaj Mehla

    (@pankakmehla)

    I tried by adding hide class to div tags but it is completely hiding the forms even when I select Never Married or Married options.
    I have set dependencies on div tag so if I apply hide class they will not be shown permanently

    Plugin Author codepeople

    (@codepeople)

    Hello @pankakmehla

    I’m testing your form and it is working fine now. Please watch the video by visiting the following link:

    https://resources.developers4web.com/cff/tmp/2024/10/24/video-form_o.mp4

    Best regards.

    Thread Starter Pankaj Mehla

    (@pankakmehla)

    Yes now I have updated my code and used hide class which is predefined, previously I was not aware that hide class is predefined so I used custom css like this 

    .hide
            {
                display: none !important;
            }

    and due to this the div tag was permanently hidden

    Plugin Author codepeople

    (@codepeople)

    Excellent !!!!

    Thread Starter Pankaj Mehla

    (@pankakmehla)

    Thanks for your support and this amazing plugin!

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.