Netlify form - Recaptcha not working

Support
1

Created a form, it’s working.

However I have recaptcha of netlify and if I don’t check the recaptcha it will just reset the page or reload the page.

The question is how can I do validation if recaptcha is checked or not?

Anyone with this situation?

Netlify site name [ https://webformtest1.netlify.app/ ]

HTML

<form class="form-contact contact_form" method="POST" action="/Enviado/" data-netlify="true" id="contact-form" onSubmit="submit">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message'" placeholder=" Mensagem" required></textarea>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <input class="form-control valid" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" placeholder="Nome" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <input class="form-control valid" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" placeholder="Email" required>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject'" placeholder="Assunto">
                                    </div>
                                </div>
                            </div>
                            <br><div data-netlify-recaptcha="true"></div>
                            <div class="form-group mt-3">
                                <button type="submit" class="button button-contactForm boxed-btn">Enviar</button>
                            </div>
                        </form>
2

That would most likely need some JavaScript. Something like this maybe:

3

Hello, i used the library of Netlify.<form class="form-contact contact_form" method="POST" action="/Enviado.html" data-netlify="true" id="contact-form" onSubmit="submit" data-netlify-recaptcha="true">

It should send an alert if recaptcha is not clicked, instead of reloading the page.

Can you send an example of what Javascript is missing?

5

Hi Miguel!

What you are asking for is not a feature our platform provides. Our intention is to mark the submission as spam if the recaptcha is failed, and we do that. (If you don’t see this happening, please let me know, we’ll be able to work further on that). It may not be possible to achieve your goals on our platform, but whether or not that is true, our team won’t be able to write the code for you, so hopefully you can read the article Hrishikesh linked and give it a try on your own :slight_smile:

6

Hello, thank you for the response. Manage to find a solution in that article you send.

created a file JS

/*VALIDATE RECAPTCHA FIELD SUBMIT FORM */

function validate_form() {

    const recaptcha_box_checked = (grecaptcha.getResponse()) ? true : false;

    if (recaptcha_box_checked) { 
        return true;
    }
    else {
        alert("falta validar o campo 'Não sou um robô'");
        return false;
    }
}

HTML

<form id="contact-form" method="POST" data-netlify="true" onsubmit="return validate_form();">

Hope helps someone that need to validate a form with recaptcha, so this way won’t receive spam.

1 Like
7

Hey there, @miguelfernandes :wave:

Thanks so much for coming back and sharing this solution! It will definitely help future Forums members who encounter something similar.

Happy building :rocket:

1 Like
8

A post was split to a new topic: [General] Netlify ReCaptcha not submitting forms