Copied to clipboard

Flag this post as spam?

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


  • Michael Beever 69 posts 150 karma points
    Dec 11, 2020 @ 13:22
    Michael Beever
    0

    Hi,

    Getting there but I am not very good with JS.

    How can I add a custom message in the Umbraco CMS to display in the submit button?

    I have a contact us page that I want to say we will get back in touch as soon as possible but then a CV submission section were i want the message to say that the CV will be kept on file for x amount of time.

    I know i could put this in the form but would prefer when the submit button is clicked.

    Thanks

  • Nicholas Westby 2045 posts 7034 karma points c-trib
    Dec 11, 2020 @ 17:32
    Nicholas Westby
    0

    I'm not entirely sure what you're asking as I'm confused by some of the terms you are using. First, I'll get the easy thing out of the way that seems like what you asked but which I think is not what you meant:

    How can I add a custom message in the Umbraco CMS to display in the submit button?

    This sounds like you are asking how to make the text on the submit button custom. So, instead of "Send", it could say "Submit my Data" (or whatever). You edit the button in the back office to have custom text; no programming required. However, I don't think that's what you meant. Here's what I think you meant to ask:

    How do I display a custom message once a user has successfully submitted the form? In essence, something like "thank you, your submission has been received".

    You will sort of find the answer here: https://www.formulate.rocks/plain-javascript/render-form

    It shows a big block of JavaScript that includes this portion:

    // 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;
    });
    

    Like the comment says, you can do what you want there. Right now, all it is doing is removing the form and replacing it with some text that says "Form submitted!" Instead, you could render something in the Razor view and then have the JavaScript display that element instead. Here is a quick proof of concept:

    @* 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 })
    
        @* The success message (initially hidden, and revealed by JavaScript). *@
        <div style="display: none;" data-js-form-success-message>
            <p>
                Thanks for submitting the form soon after @DateTime.Now.
            </p>
        </div>
    
    </div>
    

    If you add the success message as shown above (this example is modified from the page I linked above), you can then modify the JavaScript to show the success message when the form submits:

    // 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,
            successElement = wrapper.querySelector("[data-js-form-success-message]");
        form.parentNode.removeChild(form);
        successElement.style.display = "block";
        if (validationListElement) {
            validationListElement.parentNode.removeChild(validationListElement);
        }
        validationListElement = null;
    });
    

    I'm still removing the form, but instead of the JavaScript rendering the text, the JavaScript just displays the text that was already rendered by the Razor view.

Please Sign in or register to post replies

Write your reply to:

Draft