オリジナルデザインのformを作るときに利用するサービスに formrun というサービスがありますが、
React や Vue.js を使うと、ビルドをすれば動くが、npm start した local 実行の時や、ページ遷移後に、form の validation が動かない問題があります。
動かない原因は、form の dom が存在するタイミングで、formrunの初期化処理が実行されなければいけないようです。
formrun に問い合わせたところ、初期化処理を実行するメソッドがあるようです。
// .formrun の部分は、formのclassを指定する Formrun.init('.formrun')
つまり、`nuxt generate` (SSG) されたサイトで、ページ遷移時を直す場合は、React ならこう書きます。
// ... useEffect(()=>{ // ページ遷移時はこちらで解決する window.Formrun?.init('.formrun') }, []) // ... return ( <> <Helmet> <script src="https://sdk.form.run/js/v2/formrun.js"></script> </Helmet> { // .... } </>)
また、ローカル開発時や、SPAの時は、スクリプトのロード後に再度初期化をする必要がありました。SSGの場合もこちらで動きます。
import Script from 'react-load-script' // 動的な script の読み込みを楽にする npm // ... const onLoadFormrun = useCallback(() => { window.Formrun?.init('.formrun') }, []) // ... return ( <> <Script onLoad={onLoadFormrun} url="https://sdk.form.run/js/v2/formrun.js"></Script> { // ... } </>)