Integrating reCAPTCHA with Forms

Chapter 2:

Step 4: Frontend Setup with SSK Form Component

The SSK Form Component simplifies form handling in your project. It automatically handles:

• reCAPTCHA validation on form submission

• Toast notifications for form feedback

• Form validation through server actions

You can integrate this component directly into your forms, which automatically generates and verifies reCAPTCHA tokens when the form is submitted.

Example Usage:

import { Fields } from './Fields'
import SubmitButton from './SubmitButton'
import ProForm from '@pro/form'

export default function SubmitForm({
  id,
  fields,
  action,
  primaryButtonMessage,
  color,
  variant,
}) {
  return (
    <>
      <ProForm id={id} action={action}>
        {({ formState }) => (
          <>
            <Fields
              fields={fields}
              formState={formState}
              variant={variant}
              color={color}
            />
            <SubmitButton
              variant={variant}
              color={color}
              formName={id}
              formState={formState}
              successMessage={primaryButtonMessage}
              eventData={{
                event: 'form_submit',
                category: 'button',
                action: 'click',
                label: id,
                value: 1,
              }}
            />
          </>
        )}
      </ProForm>
    </>
  )
}