recaptcha v3

[ppericles]

Hello,
I have my contact page correctly setup to work with recaptcha v2.
But I cannot make it work for v3. I put the correct v3 site and secret keys, but I get an error “error for site owner invalid key type”.

Any ideas?
Thanks.

---

Template Version: 8.1

[Support]

Hello,

The advanced contact form (contact-us-advanced.php) is not ready for use with recaptcha v3. This case we need remove the validation of fields at front end and make it on server side (PHP).

1) First remove the view.contact.js script from the page:

<script src="js/views/view.contact.js"></script>

2) Change the recaptcha script on footer with this new code:

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
   	function onSubmit(token) {
   		document.getElementById("contactFormAdvanced").submit();
   	}
</script>

3) Inside the from, change the submit button from this:

<input type="submit" value="Submit Now" class="btn btn-outline custom-btn-style-4 text-uppercase mt-1" data-loading-text="Sending...">

To this:

<input type="submit" value="Submit Now" class="btn btn-primary btn-modern pull-right g-recaptcha" data-sitekey="YOUR_V3_SITE_KEY" data-callback='onSubmit' data-action='submit' data-loading-text="Sending...">

4) Now we need make the validation of fields on server side. First change the HTML of fields to this new:
https://pastebin.com/raw/fC6XLL0b

On top of page at the PHP code, change this:

if(isset($_POST['emailSent'])) {

To this:

if( isset($_POST['emailSent']) && !empty($_POST['name']) && !empty($_POST['email']) && !empty($_POST['message']) ) {

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[ppericles]

Hello,
If I remove view.contact.js then I will not be able to have file attachments.

Pericles

---

[Support]

Hello Pericles,

At really the view.contact.js have no relation with file attachments. The attachment fields works trough PHP code:

Hope this helps and clarify about the attachment field!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[ppericles]

Hello,
Thanks. Everything is working now.
However, a small fix is required. When the page is scrolled down and the footer is displayed, the recaptcha logo on the bottom right disappears.

Thanks,
Pericles

---

[Support]

Hello,

Great!

You can move the recaptcha badge to front with this code below at (css/custom.css):

.grecaptcha-badge {
	z-index: 999999;
	bottom: 55px !important;
	top: auto !important;
}

* This code also moves badge a bit to top (prevent stay over scroll to top button).

We hope this helps!

Please try that and let us know if you need further assistance.

Thank you very much for your 5 star review and message at our ThemeForest item!

Kind Regards,

Rodrigo.

---

[ppericles]

Hello.
Thanks. How can I have the recaptcha logo under the scroll to top button, but above the footer?

Thanks,
Pericles

---

[Support]

Hello Pericles,

The custom CSS code I sent for you should do that. I entered your website and saw you paste the code a bit different, with 5px for the bottom value. Please try changing to 55px like the code below:

.grecaptcha-badge {
	z-index: 999999;
	bottom: 55px !important;
	top: auto !important;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[ppericles]

OK, I got it.
One final question: If I have 2 forms on a single html (not php) page how do I tie them to the recaptcha?
Is the following piece of code correct?
<script src=”https://www.google.com/recaptcha/api.js”></script&gt;
<script>
function onSubmit(token) {
document.getElementById(“formId01”).submit();
document.getElementById(“formId02”).submit();
}
</script>
Thanks,
Pericles

---

[Support]

Hello Pericles,

This is the correct code:

<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
   	function onSubmit(token) {
   		document.getElementById("contactFormAdvanced").submit();
   	}
        function onSubmit2(token) {
   		document.getElementById("contactFormAdvanced2").submit();
   	}
</script>

Inside the form you should explicit the functions above. For example:

Form 1:
<input type="submit" value="Submit Now" class="btn btn-primary btn-modern pull-right g-recaptcha" data-sitekey="YOUR_V3_SITE_KEY" data-callback='onSubmit' data-action='submit' data-loading-text="Sending...">

Form 2:
<input type="submit" value="Submit Now" class="btn btn-primary btn-modern pull-right g-recaptcha" data-sitekey="YOUR_V3_SITE_KEY" data-callback='onSubmit2' data-action='submit' data-loading-text="Sending...">

Hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[ppericles]

Hello Rodrigo.
Thanks.
I tried to apply your suggestion on page gr-captoria%20dm.html, but it doesn’t seem to work at all.

Any ideas?
Thanks.

---

[ppericles]

Hello,
I managed to resolve my problem.

Thanks,
Pericles

---

[Support]

Hello Pericles,

Great! 🙂

If you need further assistance, feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts