Issue embedding multiple forms on website

Support
1

I am attempting to embed two distinct forms on my website - one in the footer and the other on a specific page. I have different JavaScript for each of them. However, when I add the code to my site, the footer form appears in both locations or doesn’t show up at all. Additionally, I am unable to get the other form to load on the page. Is there a way to configure the settings to prevent this issue from occurring?

2

Hi Kate, can you share the script you are using for both forms? Please make sure the containers’ id for each of them is unique.

3 
<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<div id='container'></div>
<script>
(() => {
    Feathery.init('account-key')
    Feathery.renderAt('container', { formName: "The Center Square - Newsletter Signup - Footer" });
})();
</script>


<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<div id='container'></div>
<script>
(() => {
    Feathery.init('account-key')
    Feathery.renderAt('container', { formName: "The Center Square - Newsletter Signup" });
})();
</script>
4

Please find below revised script where the container ids are updated so each container has a unique id. Let us know if you have further questions. Thank you.

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<div id='footerFormContainer'></div>
<script>
(() => {
    Feathery.init('your-key')
    Feathery.renderAt('footerFormContainer', { formName: "The Center Square - Newsletter Signup - Footer" });
})();
</script>


<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<div id='pageFormContainer'></div>
<script>
(() => {
    Feathery.init('your-key')
    Feathery.renderAt('pageFormContainer', { formName: "The Center Square - Newsletter Signup" });
})();
</script>
5

That worked. Thank you!