Looking for some styling help on contact form with reCAPTCHA

Hey mjrielly,

Thank you for the inquiry.

Did you set all fields’ Form Element Width to 1/3? Enabling security captcha will always push the submit button beneath it, but we might be able to modify it with css. Please provide the site URL in the private field so we can check the issue properly.

Best regards,
Ismael

Hi,

Thank you for the update.

You can use the following css to hide the badge message and force all the form elements including the submit button into the same row:

.avia_recaptcha_v3 .av-recaptcha-area,
.avia_recaptcha_v3 .av-google-badge-message {
    display: none;
}

.avia_recaptcha_v3 .form_element {
    display: inline-block;
    width: auto;
    vertical-align: top;
}

Add this to Enfold > General Styling > Quick CSS. Please make sure to purge the cache before testing.

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the feedback.

Try to replace the modification with the following code:

.avia_recaptcha_v3 fieldset {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    flex-direction: row;
}

.avia_recaptcha_v3 .form_element {
    flex: 0 0 calc(33.333% - 10px);
    margin-right: 15px;
}

.avia_recaptcha_v3 .av-recaptcha-area {
    position: absolute;
    bottom: -80px;
    left: 0;
    width: 100%;
}

.avia_recaptcha_v3 .av-google-badge-message {
    display: none;
}

Make sure to purge the cache before testing.

Best regards,
Ismael