cannot read property isstep of null - Formulate Questions

JGKN 26 posts 172 karma points

Feb 17, 2021 @ 00:25

Cannot read property 'isStep' of null

Hi,

I have no prior experience with this package, but have nightmares about fixing custom themes on Umbraco Forms, so I thought I would try an alternative and give formulate a go on a site I'm developing.

The trouble is, it won't seem to submit my forms.

enter image description here

I tried to cut down on potential issues, and made a minimalistic form, but it still throws the "Unknown error. Please try again" message on submit.

I've spent the last few hours fiddling in the cms settings, but it looks like it's all set up correctly - inputs, no validation, auto-generated layout, only a 'store data' handler (in case it was an smtp error).

The umbraco logs (after setting key="Formulate:EnableLogging" value="true") don't seem to show any mention of formulate after the install, no submissions or errors of any kind.

Turns out the problem seems to be with the javascript, before it even gets to submit, as Chrome's dev tools are throwing this error:

enter image description here

I can't find anything obvious I've done to break it... Any ideas on how I can get it working?

Umbraco v8.10.1 Formulate v3.5.0

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Feb 17, 2021 @ 00:33

Thanks for listing all these details and all your effort troubleshooting.

I'll take a look at this tonight. Would you mind zipping up your ~/App_Data/Formulate/Json/ folder so I can try and reproduce on my local?

Copy Link

JGKN 26 posts 172 karma points

Feb 17, 2021 @ 00:40

Wow, thanks for the fast reply.

I can't seem to attach the file directly to the comments - but here's a google drive link: https://drive.google.com/file/d/1ABwqNn4slHE6xKMefWxRiidnOErzMoJN/view?usp=sharing

There should only be two forms in there - one was a more complex contact us form with some validation, and then the really simple test form.

Your assistance is greatly appreciated!

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Feb 17, 2021 @ 01:40

Good news and bad news. The good news is that I was able to submit your form without issue with my local install of Formulate 3.5.0.

The bad news is that I can't seem to reproduce your issue.

One thing that stands out to me with your screenshot is that it says there is a 404 error when POSTing to /umbraco/formulate/submissions/submit. That looks like the correct URL to me.

How did you install Formulate (e.g., via NuGet or in the packages section of the Umbraco back office)? Can you paste a screenshot of your bin folder? I want to be sure, for example, that it contains the Formulate DLL's (e.g., formulate.api.dll, formulate.app.dll, and so on). I think it probably does have those, given the form renders, but worth a look anyway.

Also, can you view the source of your page and paste the markup here? Here's what I get when I do that:

<!doctype html>

<html>
<head>
    <title>Formulate Plain JavaScript Example</title>
</head>
<body>


    <div class="formulate-wrapper">





<!-- Attach an ID to the script to act as a placeholder for the form. -->
<script id="formulate-form-b4a96d710ae8416494df577b14ed6f3f">
    (function () {

        // Variables.
        let formData, key;

        // Get the form data into JavaScript.
        formData = {"data":{"name":"Test Form","alias":null,"randomId":"b4a96d710ae8416494df577b14ed6f3f","fields":[{"alias":"","label":"","id":"da7241a7368f4ac18d40ffbb12a3c419","randomId":"29396182d4e5485583310e1b49d6dbd1","fieldType":"textarea","validations":[],"configuration":{},"initialValue":null,"category":null},{"alias":"","label":"Submit","id":"877231cf3a864c0490518f588587618b","randomId":"69aad962390a42bda235fe649574dab0","fieldType":"button","validations":[],"configuration":{"buttonKind":"Submit"},"initialValue":null,"category":null}],"rows":[{"isStep":false,"cells":[{"columns":12,"fields":[{"id":"da7241a7368f4ac18d40ffbb12a3c419"},{"id":"877231cf3a864c0490518f588587618b"}]}]}],"payload":{"FormId":"2cbd095dfd8f46aaa004204885dcebeb","PageId":1127,"__RequestVerificationToken":"afqqTYjzwbEB5iuaIiAKAH1GMdBcbB6xX9Z3hF8iAoULWntq8VFujh-6bOsEmXfzjb5X9s-zpSzL6vlR7P2o9UxoC6DZ5XWM6fcyd7WIlwW0wrgkf7Fh-zrWFpcryCK_Q03LT6gZb5w5tGJzK2ugPOnlrVxSTDc2KiA0nz8hQRDSRqHkxMO7F4WDXclz9ngV0"},"url":"/umbraco/formulate/submissions/submit"}};

        // Store the form data to an array on the window object.
        // Once the JavaScript loads, it will create this form based
        // on the data in this window object.
        key = "formulate-plain-js-forms";
        window[key] = window[key] || [];
        window[key].push(formData);

    })();
</script>

    </div>


    <script src="/App_Plugins/formulate/responsive.plain-javascript.min.js" async></script>


    <script src="/scripts/custom-formulate-script.js" async></script>

</body>

In theory, you should have something very similar.

Note that I'm on a different version of Umbraco than you, so the next thing I'll try is using the same version of Umbraco.

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Feb 17, 2021 @ 01:59

I tried again with a clean install of Umbraco 8.10.1 (I accepted the default options, which included a starter kit) and it all worked fine. The form submitted:

Form Success Message

And the data was stored to the database:

Form Submission Data

This makes me think there is something peculiar about your install. Some ideas:

Do you have Umbraco installed to a virtual directory?
Is there some sort of exotic routing you have in place?
Perhaps you have some sort of firewall issue (though I did note you are on a localhost domain, so probably unlikely)?

Here's my contact.cshtml:

@inherits UmbracoViewPage<Contact>
<!doctype html>

<html>
<head>
    <title>Formulate Plain JavaScript Example</title>
</head>
<body>

    @* Wrap the form with this element so the custom JavaScript can find it. *@
    <div class="formulate-wrapper">

        @* Render the form. *@
        @Html.Action("Render", "FormulateRendering", new { form = Model.MyForm })

    </div>

    @* The JavaScript file for Formulate's plain JavaScript template. *@
    <script src="/App_Plugins/formulate/responsive.plain-javascript.min.js" async></script>

    @* This is your JavaScript that handles events dispatched by Formulate. *@
    <script src="/scripts/custom-formulate-script.js" async></script>

</body>

And my custom-formulate-script.js:

/* This file listens for events dispatched by Formulate and responds to them appropriately. */

// Wait until the markup has rendered
setTimeout(function () {

    // Variables.
    let i, wrapper, wrappers = document.querySelectorAll(".formulate-wrapper");

    // Process each element that is wrapping a Formulate form.
    for (i = 0; i < wrappers.length; i++) {
        wrapper = wrappers[i];
        (function (wrapper) {

            // Variables.
            let validationListElement;

            // On form submit, remove the form and display a success message. You can do what you like here
            // (e.g., show a hidden element).
            wrapper.addEventListener("formulate form: submit: success", function (e) {
                let form = e.target;
                form.parentNode.replaceChild(document.createTextNode("Form submitted!"), form);
                if (validationListElement) {
                    validationListElement.parentNode.removeChild(validationListElement);
                }
                validationListElement = null;
            });

            // When proceeding to the next step in a multi-step form, clear any validation errors.
            wrapper.addEventListener("formulate: validation: next: success", function () {
                if (validationListElement) {
                    validationListElement.parentNode.removeChild(validationListElement);
                }
                validationListElement = null;
            });

            // When there is an error, show an alert dialog. Feel free to change this to something
            // that makes more sense for your project.
            wrapper.addEventListener("formulate form: submit: failure", function () {
                alert("Unknown error. Please try again.");
            });

            // When there are validation errors, add a list of error messages to the bottom of the
            // form. If you remove this, the error messages will still be shown inline below each field.
            wrapper.addEventListener("formulate: submit: validation errors", function (e) {
                let i, message, messages = e.detail.messages, form = e.target, listElement, itemElement;
                listElement = document.createElement("ul");
                listElement.classList.add("formulate__validation-summary");
                for (i = 0; i < messages.length; i++) {
                    message = messages[i];
                    itemElement = document.createElement("li");
                    itemElement.classList.add("formulate__validation-summary__error");
                    itemElement.appendChild(document.createTextNode(message));
                    listElement.appendChild(itemElement);
                }
                if (validationListElement) {
                    validationListElement.parentNode.replaceChild(listElement, validationListElement);
                }
                validationListElement = listElement;
                form.parentNode.appendChild(listElement);
            });

        })(wrapper);
    }

}, 0);

Which I've set up according to these instructions: https://www.formulate.rocks/plain-javascript/render-form

Copy Link

JGKN 26 posts 172 karma points

Feb 17, 2021 @ 02:02

The raw source code is a bit bloated, but I'm pretty confident its all being included correctly (for now I'll just include the main bits):

In the view:

<div class="m-contact__main__form formulate-wrapper">
            @Html.Action("Render", "FormulateRendering", new { form = Model.ContactForm })
</div>

<script type="text/javascript" src="/App_Plugins/formulate/responsive.plain-javascript.js" async></script>
<script type="text/javascript" src="~/_Frontend_Output/js/formulate-contact-form.js" async></script>

In the model:

public ConfiguredFormInfo ContactForm;
ContactForm = CurrentPage.Value<ConfiguredFormInfo>("contactFormPicker");

In the js:

let i, wrapper, wrappers = document.querySelectorAll(".formulate-wrapper");

Here's the screenshot of my bin folder - I originally installed it using NuGet, and its certainly got some formulate dll's in the folder:

enter image description here

But I did also have a think about that other error message - the posting error to "/umbraco/formulate/submissions/submit".

I've followed the advice from this page: https://our.umbraco.com/documentation/reference/security/Security-hardening/ and renamed my umbraco folder so people can't just go to /umbraco and try and login

This has meant that I've had to change the name of the /umbraco/ folder in the httpdocs - now I'm not 100% the inner workings of umbraco and certainly not Formulate :) , but would that affect the form being submitted?

Copy Link

JGKN 26 posts 172 karma points

Feb 17, 2021 @ 02:06

Looks like we posted similar replies at the same time!

Just to confirm, this is what the form looks like when I view source:

<div class="m-contact__main__form formulate-wrapper">

<!-- Attach an ID to the script to act as a placeholder for the form. -->
<script id="formulate-form-642fe41d95234e35864d390ed88c5ddb">
    (function () {

        // Variables.
        let formData, key;

        // Get the form data into JavaScript.
        formData = {"data":{"name":"Test Form","alias":null,"randomId":"642fe41d95234e35864d390ed88c5ddb","fields":[{"alias":"","label":"","id":"da7241a7368f4ac18d40ffbb12a3c419","randomId":"3732bb98fa584e149d598a154cec7d79","fieldType":"textarea","validations":[],"configuration":{},"initialValue":null,"category":null},{"alias":"","label":"Submit","id":"877231cf3a864c0490518f588587618b","randomId":"5dd31164fe434f2cb292b1a489430cf7","fieldType":"button","validations":[],"configuration":{"buttonKind":"Submit"},"initialValue":null,"category":null}],"rows":[{"isStep":false,"cells":[{"columns":12,"fields":[{"id":"da7241a7368f4ac18d40ffbb12a3c419"},{"id":"877231cf3a864c0490518f588587618b"}]}]}],"payload":{"FormId":"2cbd095dfd8f46aaa004204885dcebeb","PageId":1238,"__RequestVerificationToken":"DA4Vk4dzTWOZn8lIPA4ocBUDUkdiOjiIJitkFiHGWlFZVerK4YlKU8e5GGynaJPuZhKmZiQAGPL22P0CSvQPsRFkevNnMual98PykLGteC01"},"url":"/umbraco/formulate/submissions/submit"}};

        // Store the form data to an array on the window object.
        // Once the JavaScript loads, it will create this form based
        // on the data in this window object.
        key = "formulate-plain-js-forms";
        window[key] = window[key] || [];
        window[key].push(formData);

    })();
</script>
          </div>

Copy Link

Nicholas Westby 2054 posts 7103 karma points c-trib

Feb 17, 2021 @ 02:09

In your source it says this:

"url":"/umbraco/formulate/submissions/submit"

That means it's posting to that URL. Since it seems like you may have renamed your umbraco folder. you might try changing the URL here to use the new URL. You can do so by modifying Responsive.Plain JavaScript.cshtml, around this portion:

url = "/umbraco/formulate/submissions/submit"

If you changed the URL to umbraco-new, then you'd change that line to something like:

url = "/umbraco-new/formulate/submissions/submit"

I have no idea if that'll actually work, but worth a shot.

Copy Link

JGKN 26 posts 172 karma points

Feb 17, 2021 @ 02:17

Hurray! That actually worked!

enter image description here

Thanks for all the help - I've just tested with the more complex contact us form and it works there too

Copy Link

is working on a reply...

Flag this post as spam?

Cannot read property 'isStep' of null