Contact form Submit button with reCaptcha v3 - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
July 9, 2021 at 6:16 pm #1309428

Alex PS
Participant

Dear Team,

Have been trying to find a solution on the forum but to no avail due to the nature of the button being different when the reCaptcha is enabled.

At the moment I need to change the button appearance to match the buttons on the whole site.
The address of the button in question: https://www.pearlsmile.com/contact/
Desired appearance of the buttons can be found here (blue text, white back ground, pink background on hover [all buttons on the page except the pink variation on the bottom]): https://www.pearlsmile.com/

It is worth noting that there are 3 states of the button when reCaptcha is enabled: initial (when the button is visible), hover, and new button after click (this button appears when the initial button was clicked and a reCaptcha verification was made, then the button needs to be clicked again but this time it is not the same button).

I would not bother you guys, but this time I could not find the CSS to change it myselfy anywhere.

Looking forward to your reply.

Best,
Alexander

July 11, 2021 at 7:20 am #1309550
Rikard
Keymaster
Hi Alexander,

Please try the following in Quick CSS under Enfold->General Styling:
```
input.av-recaptcha-submit {
    border-radius: 30px;
    background: white;
    color: blue;
    font-size: 18px;
    border: 2px solid #ddd;
    width: 220px;
}

input.av-recaptcha-submit:hover {
    background: pink;
    color: white;
}
```
Best regards,
Rikard
July 12, 2021 at 11:06 am #1309722
Alex PS
Participant
Hi Rikard,

Tried the code but very little has changed.

I made some screenshots but do not see a way to chare them here.

The initial button has increased in size but not the form factor and color.

The border of 2px has appeared around the button but stayed 1px on the bottom of it. The color of text, border and background has stayed the same.

Alex
- This reply was modified 3 years, 5 months ago by Alex PS.
July 15, 2021 at 12:15 pm #1310251

Alex PS
Participant

Hi Rikard,

I hope you did not forget about me.

Alex

July 17, 2021 at 3:36 pm #1310495
Mike
Moderator
Hi,
Thank you for your patience and the link to your pages, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
input.av-recaptcha-submit,
input.av-recaptcha-submit-real {
    background-color: #fff !important;
    color: #5690e8 !important;
    font-weight: normal !important;
    padding: 7px 30px 7px !important;
    font-size: 16px !important;
    border-bottom: solid 2px #ebebeb !important;
    border-right: solid 2px #ebebeb !important;
    border-left: solid 2px #ebebeb !important;
    border-top: solid 2px #ebebeb !important;
    border-radius: 50px !important;
}
input.av-recaptcha-submit:hover,
input.av-recaptcha-submit-real:hover {
    transition: all .2s ease-in-out !important;
    background-color: #f499c0 !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 7px 30px 7px !important;
    font-size: 16px !important;
    border-bottom: solid 2px #f499c0 !important;
    border-right: solid 2px #f499c0 !important;
    border-left: solid 2px #f499c0 !important;
    border-top: solid 2px #f499c0 !important;
    border-radius: 50px !important;
    opacity: 1;
}
```
To add a screenshot please try using an image hosting service and pasting the image URL in your post.

Best regards,
Mike
July 20, 2021 at 12:19 pm #1310868

Alex PS
Participant

Hi Mike,

Just tried the code and its perfectly perfect, you rock. Thank you!

Alex

July 20, 2021 at 2:34 pm #1310889

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Contact form Submit button with reCaptcha v3’ is closed to new replies.