I have a problem with the ActiveCampaign form in my Next.js 14 component. On the first load, the form appears correctly, but when I navigate to another page and then return, the form does not load again.
Here is my component:
'use client'
import Image from "next/image"
import { BgImg, FormContainer, ImgWrapper, PGContainer, PGWrapper } from "./styles"
import PG_3 from "@/imgs/PG3.webp"
import PG_3_1 from "@/imgs/PG3_1.webp"
import PG_3_2 from "@/imgs/PG3_2.webp"
import Script from "next/script"
const PG3 = () => {
return (
<PGContainer id='form'>
<ImgWrapper>
<BgImg src={PG_3} alt=""/>
</ImgWrapper>
<PGWrapper>
<Image src={PG_3_1} alt='' className="Img"/>
<Image src={PG_3_2} alt='' className="Img"/>
<FormContainer>
<h1>Preencha o formulário e receba mais informações sobre o curso.</h1>
{/* Div onde o formulário será inserido */}
<div className="_form_23"></div>
{/* Script para carregar o formulário */}
<Script
src=".php?id=23"
strategy="lazyOnload" // Carrega o script de forma assíncrona para não bloquear o carregamento da página
onLoad={() => console.log('Formulário carregado com sucesso')}
onError={(e) => console.error('Erro ao carregar o formulário', e)}
charSet="utf-8"
/>
</FormContainer>
</PGWrapper>
</PGContainer>
)
}
export default PG3
How can I ensure that the form reloads properly when navigating back to the page?
I just tried putting it inside a useEffect, but then the form never loaded.