URGENT - Some forms work, some don't why? Please help!

Support
1

I’m trying to interact with my form on this page but it is not working whatsoever and I’d really love some advice… I can’t make sense of it.

When you login to the main page - this form is interactive, works as intended no problems. (Form on the right with the few options in hero)

When you go to the buy online page, I use the same component just a different form (Buy Online) and I cannot interact with it at all, options are not being saved, clicking submit does no expected validations, what gives?

Form ID: Geh7wj
Life Form Link: Buy Online

Same issue with this page - except I’m trying to embed my Schedule Inspection form but it is defaulting to the Buy Online one for some weird reason, very very weird. Despite the fact that you can see in the code it should be rendering form ID 4woWfO - which what it is showing is not a step at all in that form… :\

Building on Webflow as well

2

Update, tried adjusting the embed code on schedule inspection page to this format:

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
    <div id='container'></div>
    <script>
    (() => {
        Feathery.init('b56f1b0f-2230-4c19-a88a-a454a3229bb5')
        Feathery.renderAt('container', { formName: "Schedule Inspection" });
    })();
    </script>

Still displays buy online form though, unlucky.

I am able to interact with the buy online form however on this page:

So perhaps it is a container issue, but wouldn’t explain why the one on the home page is still interactive, at least I think that’s odd anyways.

3

HI @igunn

Can you send me the way you embedded the form on the one that works and on the one that doesn’t?

4

On the schedule inspection page:

I tried embedding the following:

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
    <div id='container'></div>
    <script>
    (() => {
        Feathery.init('b56f1b0f-2230-4c19-a88a-a454a3229bb5')
        Feathery.renderAt('container', { formName: "Schedule Inspection" });
    })();
    </script>

that didn’t work, and I also tried:


    <script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
    <div id='container'></div>
    <script>
    (() => {
        Feathery.init('b56f1b0f-2230-4c19-a88a-a454a3229bb5')
        const loginEnabled = false;
        Feathery.renderAt('container', { formId: "4woWfO" }, loginEnabled);
    })();
    </script>

Also didn’t work, it just displays my buy online form.

And you can’t interact with it for some weird reason.

As for the buy online form, it does not work here:

This is how that one is embedded:

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
    <div id='container'></div>
    <script>
    (() => {
        Feathery.init('b56f1b0f-2230-4c19-a88a-a454a3229bb5')
        Feathery.renderAt('container', { formName: "Buy Online" });
    })();
    </script>

It shows the correct form, but again, you can’t interact with it.

And then the same form is embedded on this page:

With the same code as above, but you can interact with it.

Let me know if that makes sense.

5

Update, I think I might have got it working - I adjusted the ‘container’ in the code to be a random new variable such as ‘container1’ and ‘container2’ and that rendered them correctly when bound to the correct form and they are now interactive again. I will post another update if it messes up when being pushed to production, but it does appear to be working fine in test.