Forms with Next Js or React

English Forms
1

Has anyone succeeded getting the (non iframe) sign-up forms work with Next js or React?

I am trying to build my own customised form, but struggling due to errors coming from main.js lib related to removeClass (which I think it’s a jQuery dependency)?

Any sample code for a simple form using own styles in these frameworks would be appreciated

2

Hi @capricorn , thanks for your message. What is the error displayed?

3

I’ve tried in so many different ways, no luck.

Could you share a simple hello world example in React or NextJs?

4

Hi @ahudavert , I’ve finally managed to get it working in React, but only with Google reCaptcha v2. I Couldn’t get Cloudflare Turnstile to work at all.

I’d stil like to ask for a sample code that decouple’s your UI from the form submission endpoint. I want to build my own custom form, but now I’m forced to use your divs and classes and main.js. The form breaks if I remove a single class that the main.js expects. Ideally we have a decoupled way, so I could also tap on supported npm packages for captcha/turnstile.

Anyway, for anyone that comes across this issue, here’s my BrevoForm.jsx component structure on how to load the captcha and Brevo’s main.js lib in a way that they properly reloads if you navigate away and back to the page (without that, due to the way React is caching the pages, those libs would not run if you navigate away and back to the page where the component is mounted).

const BrevoForm = ({ formURL }) => {
  const captchaScriptId = 'recaptcha-script'
  const mainScriptId = 'main-script'

  const loadScript = (scriptId, src) => {
    let script = document.getElementById(scriptId)
    if (!script) {
      script = document.createElement('script')
      script.src = src
      script.async = true
      script.defer = true
      script.id = scriptId
      document.body.appendChild(script)
    } else {
      // Update the script src to force reload if it's already present
      script.src = src
    }
  }

  const unloadScript = (scriptId) => {
    const script = document.getElementById(scriptId)
    if (script) {
      script.remove()
    }
  }

  const loadRecaptchaScript = () => {
    const src = `https://www.google.com/recaptcha/api.js`
    loadScript(captchaScriptId, src)
  }

  const loadMainScript = () => {
    const src = `https://sibforms.com/forms/end-form/build/main.js`
    loadScript(mainScriptId, src)
  }

  useEffect(() => {
    loadRecaptchaScript()
    loadMainScript()

    return () => {
      unloadScript(captchaScriptId)
      unloadScript(mainScriptId)
    }
  }, [])

return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://sibforms.com/forms/end-form/build/sib-styles.css"
        />
      </Head>

      {/* ... rest of your JSX structure */}

      <form
        id="sib-form"
        method="POST"
        action={formURL}
        data-type="subscription"
      >
        {/* ... rest of your form structure */}
      </form>

      {/* ... rest of your JSX structure */}
    </>
  )
}
export default BrevoForm
1 Like
5

Thanks a lot for all these details @capricorn .

It’s great if it finally works for you, and I guess this example will help the ones among us who will try to build forms with nextJS or React :+1: