The data-fc-parent-url attribute is used in Formcentric forms to support double opt-in functionality in web applications, especially in single-page applications (SPAs). If the parent URL is not defined, the Formcentric client passes the base URL of the embedding web page to the Formcentric headless server, which then generates an opt-in link. This is normally sufficient. However, depending on the integration case, the states of the embedding application may need to be restored in SPAs in order to return to the form – such as when the form is located within a modal.
In this case, you can pass the required state to the Formcentric client with the data-fc-parent-url attribute:
<div
data-fc-id="..."
data-fc-parent-url=”https://my-website.com/?form=open"
...
></div>
In the case of a React application, a component could therefore restore its modal state when accessing the opt-in link as follows:
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>
);
}
