• Resolved msdesignfoto

    (@msdesignfoto)


    Hello!

    I have a few forms in one of the websites I created and we noticed an odd behavior: the sublabels are hidden, but they are showing. Oddly enough, there is another form where that is not happening.

    I tried turning the option on and off, but makes no change. I wonder if this is a bug?

    Thanks

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Ralden Souza

    (@rsouzaam)

    Hi @msdesignfoto,

    Thanks for reaching out!

    We do not currently have any known bugs related to sublabels like the one you described.

    Additionally, I couldn’t see sublabels in one of the forms I checked on your site. For your reference, I’ve recorded this screencast.

    I recommend accessing your form using an incognito window to see if the issue persists. You could also try purging your site’s cache.

    If the issue continues after these steps, please share the URL of the form with the issue, and I’ll check further.

    Thanks!

    Thread Starter msdesignfoto

    (@msdesignfoto)

    Here is one of the forms with that issue. The form you saw was one of the two forms without the issue. The third form has.

    Bata de Limpeza – Copitraje Colombo

    Plugin Support Ralden Souza

    (@rsouzaam)

    Hi @msdesignfoto,

    Thanks for the information, and I was able to see the issue on that page.

    After inspecting the Name field, it looks like part of the WPForms CSS code is missing, which might be caused by the Autoptimize settings.

    To fix this, please try the following custom CSS snippet:

    .wpforms-container .wpforms-field-label.wpforms-label-hide, .wpforms-container .wpforms-field-sublabel.wpforms-sublabel-hide, .wp-core-ui div.wpforms-container .wpforms-field-label.wpforms-label-hide, .wp-core-ui div.wpforms-container .wpforms-field-sublabel.wpforms-sublabel-hide {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden !important;
    }

    Here is a screenshot showing the result of using this CSS snippet.

    And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

    If the CSS snippet above did not work for you, please add !important to all the properties in the snippet, similar to how it’s used in overflow: hidden !important;.

    Hope this helps!

    pro-tip; you can generally disable Autoptimize on a per-request basis by adding ?ao_noptirocket=1 to the URL.

    if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

    hope this helps debugging,
    frank (ao dev)

    Thread Starter msdesignfoto

    (@msdesignfoto)

    Hello!

    Thank you for the feedback. I used that code in the CSS customization and it works.

    I wanted to try adding WP Forms scripts to the exceptions in Autoptimize, but the plugin has only a list where I can manually type the scripts’ names. If I could use this approach, maybe it could be best overal instead of using the custom CSS?

    Thank you again!

    Plugin Support Ralden Souza

    (@rsouzaam)

    Hi @msdesignfoto and @optimizingmatters,

    @optimizingmatters, thank you for sharing that helpful information!

    @msdesignfoto, I’m glad to hear that the CSS snippet worked.

    Regarding adding exceptions in Autoptimize, here’s what you need to know:

    • CSS: You can find the CSS files in /wp-content/plugins/wpforms/assets/css, and the main files are wpforms-full.css and wpforms-full.min.css.
    • JavaScript: The JavaScript files are located in /wp-content/plugins/wpforms/assets/js/frontend, and the main files are wpforms.js and wpforms.min.js.

    I hope this helps! If you need any more assistance with WPForms Lite, please feel free to reach out.

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