Glitch with Gravity Forms

  • Resolved Kazam Creative

    (@goldenagemedia)


    1 week ago

    Hi there,

    We use Gravity Forms and have recently started using hCaptcha on all forms, and we use custom styling to modify the appearance of radio buttons, which references the <label> tags.

    There is a glitch appearing with the use of hCaptcha, where the plugin is adding an extra <label for="hcap_hp_kRcfm2fYWp37"></label> tag to the code and it keeps moving around to different spots upon each refresh.

    You can see an example here: https://snipboard.io/Q3Grba.jpg

    See above the option for “$15” there is now an extra button that shouldn’t be there.

    Is there any patch or workaround for this?

    Many thanks, Anthony

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor kaggdesign

    (@kaggdesign)

    1 week ago

    Hi @goldenagemedia,

    Thanks for the additional details.

    This is an internal hidden field added by the plugin. Its position in the form markup is intentionally dynamic, so seeing it appear in different places is expected.

    However, the empty label should definitely not become visible or affect your Gravity Forms layout. In your case, it looks like the custom styling for Gravity Forms labels is also being applied to this internal label.

    I will make this more defensive on the plugin side so the label remains hidden even with aggressive custom form styling.

    For now, you can use this CSS workaround:

    .gform_wrapper label[for^="hcap_hp_"] {
	display: none !important;
}

    A better long-term approach in the custom CSS would also be to scope the radio/button label styling only to actual Gravity Forms choice labels, for example:

    .gform_wrapper .gfield_radio .gchoice label {
	/* custom radio label styling */
}

    instead of styling all labels inside the form.

    Thread Starter Kazam Creative

    (@goldenagemedia)

    4 days, 22 hours ago

    Hi there,

    Many thanks for your suggestions there, your CSS workaround worked perfectly!

    We have got the radio button/s wrapped in a custom class:
    .customradio label {}
    This targets only radio fields that we want, but as the extra hCaptcha label gets placed within the “.gchoice” div container it will still be affected by your second suggestion.

    It’s being successfully hidden by the first suggestion though so this is great. All resolved!

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.