Recaptcha V2 on SF4 project

app.js

recaptchaCallBack = function () {
    let contactRecaptcha = $('#contactRecaptcha');
    
    if (contactRecaptcha.length) {
        grecaptcha.render('contactRecaptcha', {
            'sitekey': '<!!!yoursitekeyhere!!!>',
            'theme': 'light'
        });
    }
    contactRecaptcha.hide();

    // $('#contact_firstname, #contact_lastname, #contact_email, #contact_message').bind('keyup paste', function () {
    $('#contact_firstname, #contact_lastname, #contact_email, #contact_message').bind('keyup paste', function () {
        if ($('#contact_firstname').val() !== "" && $('#contact_lastname').val() !== ""
            && $('#contact_email').val() !== "" && $('#contact_message').val() !== "") {
            contactRecaptcha.show();
        }
    });
};

contact.html.twig

{{ form_start(form, {'attr':{'id':'contact_form'}, 'action':path('contact_us')}) }}
        {{ form_errors(form) }}
<div class="row no-gutters justify-content-center">
	<div class="col">
		{{ form_row(form.firstname) }}
	</div>
	<div class="col">
		{{ form_row(form.lastname) }}
	</div>
</div>
<div class="row no-gutters justify-content-center">
	<div class="col">
		{{ form_row(form.email) }}
	</div>
</div>
<div class="row no-gutters justify-content-center">
	<div class="col">
		{{ form_row(form.message) }}
	</div>
</div>
<div class="row no-gutters justify-content-center">
	<div class="text-center">
		<div id="contactRecaptcha" class="g-recaptcha"></div>
	</div>
</div>
<div class="row no-gutters justify-content-center mt-2">
	<div class="text-center">
		<button class="btn btn-outline-success">
			{{ 'contact.submit'|trans({}, 'contact')}}
		</button>
	</div>
</div>
<input type="hidden" name="token" value="{{ csrf_token('contact-form') }}" />
{{ form_end(form) }}

ContactController.php

<?php

namespace App\Controller\Ui\WebSite;

use App\Services\SendinblueApi;
use Psr\Log\LoggerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use App\Form\ContactType;
use ReCaptcha\ReCaptcha;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Core\Exception\InvalidCsrfTokenException;

class ContactController extends AbstractController
{
    /**
     * @Route("/contact-us",methods={"POST"}, name="contact_us")
     * @param Request $request
     * @param SendinblueApi $sendinblueApi
     * @param LoggerInterface $logger
     *
     * @return Response
     */
    public function contact(Request $request, SendinblueApi $sendinblueApi, LoggerInterface $logger)
    {
        $form = $this->createForm(ContactType::class);
        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {

            $submittedToken = $request->request->get('token');

            $recaptcha = new ReCaptcha($this->getParameter('recaptcha_secret'));
            $resp = $recaptcha->verify($request->request->get('g-recaptcha-response'), $request->getClientIp());

            if (!$resp->isSuccess()) {

                $errors = '';
                foreach ($resp->getErrorCodes() as $error) {
                    $errors .= $error;
                }
                // Do something if the submit wasn't valid ! Use the message to show something
                $message = "The reCAPTCHA wasn't entered correctly. Go back and try it again." . "(reCAPTCHA said: " . $errors . ")";
                //Flash Message
                $this->addFlash('danger', 'Oops! There is an error ' . $message);
            } else {
                if ($this->isCsrfTokenValid('contact-form', $submittedToken)) {

                    $data = $form->getData();

                    // Everything works good ;) your contact has been saved.
                    $firstname = $data['firstname'];
                    $lastname = $data['lastname'];
                    $email = $data['email'];
                    $message = $data['message'];

                    $emailAsker = [
                        'templateId' => 10,
                        'replyTo' => ['email' => $this->getParameter('mailer_user')],//asker can reply to GpK address
                        'to' => [['email' => $email, 'name' => $firstname]],
                        'params' => ["FIRSTNAME" => $firstname, "LASTNAME" => $lastname, "MESSAGE" => $message],
                    ];
                    $emailTeam = [
                        'templateId' => 11,
                        'replyTo' => ['email' => $email],//GpK team reply to asker address
                        'to' => [['email' => $this->getParameter('mailer_user')]],
                        'params' => ["FIRSTNAME" => $firstname, "LASTNAME" => $lastname, "MESSAGE" => $message, "EMAIL" => $email],
                    ];
                    try {
                        $resultAsker = $sendinblueApi->apiCall("smtp/email", $emailAsker);
                        $logger->debug('result of asker email sending : ' . $resultAsker, ['debug', 'contact controller']);
                        $resultTeam = $sendinblueApi->apiCall("smtp/email", $emailTeam);
                        $logger->debug('result of team email sending : ' . $resultTeam, ['debug', 'contact controller']);

                        //Flash Message
                        $this->addFlash('success', 'Thanks for you message, we\'ll process as soon as possible.');
                    } catch (\Exception $e) {
                        $this->addFlash('danger', 'Exception when calling SMTPApi->sendTemplate: ' . $e->getMessage());
                    }
                } else {
                    throw new InvalidCsrfTokenException();
                }
            }

            return $this->redirectToRoute('home');
        }

        return $this->render('WebSite/contact.html.twig', ['form' => $form->createView()]);
    }
}

contactPopup.html.twig

<!-- Modal Contact Us-->
<div class="modal fade" id="{{ 'navbar.help'|trans({}, 'navbar')|lower|slugify }}" tabindex="-1" role="dialog" aria-labelledby="contactUsCenterTitle"
     aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h3 class="modal-title" id="contactUsLongTitle">{{ 'contact.title'|trans({}, 'contact')|raw }}</h3>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				{{ render(controller('App\\Controller\\Ui\\WebSite\\ContactController::contact')) }}
			</div>
		</div>
	</div>
</div>

contactType.php

<?php

namespace App\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Translation\TranslatorInterface;

class ContactType extends AbstractType
{

    private $translator;

    public function __construct(TranslatorInterface $translator)
    {
        $this->translator = $translator;
    }

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('firstname', TextType::class, [
                    'label' => false,
                    'required' => true,
                    'attr' => ['placeholder' => $this->translator->trans('contact.firstname', [], 'contact')]
                ]
            )
            ->add('lastname', TextType::class, [
                    'label' => false,
                    'required' => true,
                    'attr' => ['placeholder' => $this->translator->trans('contact.lastname', [], 'contact')]
                ]
            )
            ->add('email', EmailType::class, [
                    'label' => false,
                    'required' => true,
                    'attr' => ['placeholder' => $this->translator->trans('contact.email', [], 'contact')]
                ]
            )
            ->add('message', TextareaType::class, [
                    'label' => false,
                    'required' => true,
                    'attr' => ['placeholder' => $this->translator->trans('contact.msg', [], 'contact')]
                ]
            )
        ;
    }


    /**
     * {@inheritdoc}
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(
            [
            'data_class' => null
            ]
        );
    }

    /**
     * {@inheritdoc}
     */
    public function getBlockPrefix()
    {
        return 'contact';
    }
}