reCAPTCHA covers the next button

We are using reCAPTCHA on a portal application wizard that navigates through multiple interfaces.  The problem is that the reCAPTCHA graphic is covering the next button on some of the screens.  Has anyone had this problem and found a good solution?

  Discussion posts and replies are publicly visible

Parents Reply Children
  • 0
    Certified Senior Developer
    in reply to Stefan Helzle

    Hi Stefan,

    In this below example, created a columns layout where the first column contains a placeholder for the reCAPTCHA widget, and the second column contains the "Next" button, and included a spacer column in between, which can be adjusted to ensure there's no overlap. The reCAPTCHA validation state is simulated with a local variable local!reCaptchaValidated, which would need to be replaced with actual logic to check whether the reCAPTCHA was successfully completed.

    if anything wrong ,please teach me!

    Code:

    load(
    local!reCaptchaValidated: false,
    a!formLayout(
    label: "Example Form with reCAPTCHA",
    contents: {
    /* reCAPTCHA and navigation buttons in a columns layout */
    a!columnsLayout(
    columns: {
    /* First Column: reCAPTCHA placeholder */
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: "reCAPTCHA Widget Placeholder"
    /* Actual reCAPTCHA component would go here */
    )
    }
    ),
    /* Spacer Column */
    a!columnLayout(
    width: "10X",
    contents: null
    ),
    /* Second Column: Next Button */
    a!columnLayout(
    contents: {
    a!buttonLayout(
    primaryButtons: a!buttonWidget(
    label: "Next",
    style: "SOLID",
    size: "STANDARD",
    disabled: not(local!reCaptchaValidated),
    value: "next"
    /* Add your navigation logic here */
    )
    )
    }
    )
    }
    )
    },
    buttons: a!buttonLayout(
    /* Additional form buttons (e.g., Save, Cancel) would go here */
    )
    )
    )

  • 0
    Certified Lead Developer
    in reply to Srinivas

    Thanks for sharing your solution. I really appreciate it.

    Your initial description sounded much like a HTML/CSS approach which would not work in Appian.

    Next time, please