Demo Site: Add reCAPTCHA validation to contact form#5269
Demo Site: Add reCAPTCHA validation to contact form#5269juliawegmayr wants to merge 18 commits intofeature/contact-formfrom
Conversation
johnnyomair
requested review from
dkarnutsch,
fraxachun,
kaufmo,
manuelblum,
nsams and
thomasdax98
johnnyomair
changed the title
demo/site/src/app/[visibility]/[domain]/[language]/api/contact-form/route.tsx
Outdated
Show resolved
Hide resolved
johnnyomair
left a comment
johnnyomair
left a comment
There was a problem hiding this comment.
In general, this looks good. However, I'd like to investigate the concern in #5269 (comment) more.
@johnnyomair As discussed with the team, I removed the hard reload. Instead the badge is hidden now and the disclaimer text is shown in the contact form. (I will check the styling of the disclaimer text with UX and apply it in one of the PRs for styling the contact form). 
|
|
|
||
| const NextPublicContext = createContext<NextPublicEnvs>({}); | ||
|
|
||
| export function NextPublicProvider({ children, envs }: PropsWithChildren<{ envs: NextPublicEnvs }>) { |
There was a problem hiding this comment.
@johnnyomair I'm unsure what our last stance towards this provider was? We could also set the key in the site config. Since I believe the Recaptcha Key is domain-dependent that might be closer to the real-life case as well 🤔
(ignore if you already discussed this)
There was a problem hiding this comment.
@juliawegmayr reviewed our projects and found that they're all using a NextPublicProvider for this. However, I've discussed this with the team and we figured that we should use the site config instead to avoid confusion. @juliawegmayr please change this.
| /* Hide the reCAPTCHA badge – adding a disclaimer text to reCAPTCHA implementations is required by Google instead */ | ||
| .grecaptcha-badge { | ||
| visibility: hidden; | ||
| } |
There was a problem hiding this comment.
Could we move this to the ContactFormBlock styles?
4 participants
This PR adds a Google ReCaptcha to the Contact Form Block in demo.
Tested by using keys locally:
Error message, if no key is available:
