Some fields are being skipped when navigating the form using the TAB key

  • Profile Image
    Asked on September 14, 2016 at 05:41 PM



    When completing the form the order of entry for fields is not correct.  It is skipping to 'Question 1 Comments' rather than starting at the top.  Sorry to say I can't figure out how to fix this problem.





  • Profile Image
    Answered on September 14, 2016 at 08:14 PM

    Hi Andy,

    Can you please describe more what exactly was the issue. I test your form but I could not determine the issue you mentioned.

    Is the form embedded on a website? Can you share also to us the URL of the website if it was so that we can also test the actual form on the website.

    Let us know if issue still persist.




  • Profile Image
    Answered on September 14, 2016 at 09:12 PM

    Enter first name

    Enter last name

    FORM SKIPS TO Question 1 Comments.

    I used both Chrome and Opera browsers to make this test.



  • Profile Image
    Answered on September 14, 2016 at 11:32 PM

    Hello Andy, I noticed the problem now thanks for that.

    When navigating through your form using the TAB key, the form jumps from "Last Name" to "Question 1 - Comments" It skipped:

    - Workshop number *

    - Mentor Group number *

    - Do the small group conversations indicate that students correctly perceive the overall context and content of this workshop's core topics? (This question evaluates students.)

    I cloned your form and played around with the order, I duplicated all the fields in the right order too and deleted the original but it appears your form still skips to Question 1 from Last Name.

    I then found out that it was caused by the Theme you're using Extendable Envelope

    Here's a cloned copy of your form using that theme: 

    And here's another clone that uses the default theme: 

    To fix this, simply change the theme to a different one and check if the theme won't mess up (or change) the tab order of your fields.

    And on our part, I'll escalate this thread so we can check with the Theme developer to see if he can fix this bug. Although I won't be able to give you any timeframe, rest assured, we'll keep you apprised on this same thread if/when there's an update.

  • Profile Image
    Answered on September 15, 2016 at 06:13 AM


    Thanks for reporting.

    I just want to clarify that the tab issue in your form is actually not a bug but rather the normal effect when you are using custom radio/checkbox button styles in the form designer.

    The form theme you are currently using has custom radio/checkbox button style. These styles are available in the form designer when you click any of the radio/checkbox fields in your form.

    So when you select custom radio/checkbox styles in the form designer, it hides the actual radio/checkbox elements and displays a custom radio/checkbox style using CSS codes. Now, since the actual elements are hidden, it is skipped when you use tab keys. Here's what I mean:

    So to resolve the tab order issue, you need to get rid of the custom radio/checkbox design in your form and restore the default style. To do that, you can inject this custom CSS codes to your form.

    .form-radio-item:not(#foo) label:before, .form-checkbox-item:not(#foo) label:before,

    .form-radio-item:not(#foo) label:after, .form-checkbox-item:not(#foo) label:after{display:none !important;}

    .form-radio-item:not(#foo) input[type="checkbox"], .form-radio-item:not(#foo) input[type="radio"] {display: inline-block !important;}

    .form-radio-item:not(#foo) label {float: none !important;text-indent: 0 !important;position: initial !important;}

    Here's how to inject custom CSS codes into your form

    Your radio buttons will look like this afterward:

    If you have further questions or if you need further assistance, let us know.