Das Attribut data-fc-parent-url wird in Formcentric-Formularen verwendet, um die Double-Opt-in-Funktionalität in Webanwendungen, insbesondere in Single-Page-Anwendungen (SPAs), zu unterstützen. Wenn die Parent URL nicht definiert ist, übergibt der Formcentric-Client die Base URL der einbettenden Website an den Formcentric Headless-Server, um einen Opt-in-Link zu generieren. Dies ist in der Regel ausreichend, jedoch müssen in SPAs je nach Integrationsfall die States der einbettenden Anwendung wiederhergestellt werden, um zum Formular zurückzukehren, z. B. wenn sich das Formular in einem Modal befindet.
In diesem Fall können Sie den benötigten State über das Attribut data-fc-parent-url an den Formcentric-Client übergeben:
<div
data-fc-id="..."
data-fc-parent-url="https://meine-website.de/?form=open"
...
></div>
Im Falle einer React-Anwendung könnte eine Komponente dementsprechend wie folgt ihren Modalzustand bei Aufrufen des Opt-in-Links wiederherstellen:
const FormModal = () => {
const [open, setOpen] = useState(false);
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
const formOpen = urlParams.get('form');
if (formOpen === 'open') {
setOpen(true);
window.formcentric.initFormcentric()
}
}, []);
return (
<div>
{open && (
<div
data-fc-id="..."
data-fc-parent-url="https://my-website.com/?form=open"
{...otherAttributes}
/>
)}
<button onClick={() => setOpen(true)}>Open Form</button>
</div>
);
}
