Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • George Kent-Nye 22 posts 145 karma points
    Feb 17, 2021 @ 00:25
    George Kent-Nye
    0

    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

  • Nicholas Westby 2034 posts 7009 karma points c-trib
    Feb 17, 2021 @ 00:33
    Nicholas Westby
    0

    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?

  • George Kent-Nye 22 posts 145 karma points
    Feb 17, 2021 @ 00:40
    George Kent-Nye
    1

    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!

  • Nicholas Westby 2034 posts 7009 karma points c-trib
    Feb 17, 2021 @ 01:40
    Nicholas Westby
    0

    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.

  • Nicholas Westby 2034 posts 7009 karma points c-trib
    Feb 17, 2021 @ 01:59
    Nicholas Westby
    0

    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

  • George Kent-Nye 22 posts 145 karma points
    Feb 17, 2021 @ 02:02
    George Kent-Nye
    0

    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?

  • George Kent-Nye 22 posts 145 karma points
    Feb 17, 2021 @ 02:06
    George Kent-Nye
    0

    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>
    
  • Nicholas Westby 2034 posts 7009 karma points c-trib
    Feb 17, 2021 @ 02:09
    Nicholas Westby
    100

    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.

  • George Kent-Nye 22 posts 145 karma points
    Feb 17, 2021 @ 02:17
    George Kent-Nye
    1

    Hurray! That actually worked!

    enter image description here 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

Please Sign in or register to post replies

Write your reply to:

Draft