Mautic: Ability to Hide Form and Display Message After Submission

Created on 19 Oct 2016 · 4Comments · Source: mautic/mautic

What type of report is this:

| Q | A |
| --- | --- |
| Bug report? | |
| Feature request? | Y |
| Enhancement? | |

Description:

I would like the ability to hide the form after submission and display a message.

At the moment I'm using the callback below which I've added to /app/bundles/FormBundle/Views/Builder/form.html.php

<script>
        var MauticFormCallback = {
            <?php echo $form->generateFormName(); ?> : {
                onResponse: function (response) {
                    $('.mauticform-innerform').fadeOut();
                    $("html, body").animate({ scrollTop: 0 }, "slow");
                    ga('send', 'event', { eventCategory: 'Contact Form', eventAction: 'Submit', eventLabel: '<?php echo $form->generateFormName(); ?>'});
                }
            }
        }; 
</script>

This hides every form successfully, scrolls to the top of the form and displays the message that I've written in the "Redirect URL/Message" field in the form editor.

_It also sends an event to Google Analytics but that's a different issue._

However, in the interest of keeping things consistent I'd like to be able to control this functionality within the UI.

Perhaps adding a new successful submit action "Hide Form and Display Message".

A lot of our forms require the customer to stay on the same page, meaning a redirect won't work. Displaying the message works on some of our shorter forms, but some people remain at the bottom of the form and submit multiple forms as they don't see the success message at the top of the form.

Hopefully that makes sense?

This script has prevented this from happening, but as I said, would be great to be able to control this within the UI.

Thanks
Sam

feature

Source

sambarnes90

👍2

Most helpful comment

I accomplished this same goal, using only CSS. Not sure why this is not a default behavior.

.mauticform-post-success .mauticform-message {
    color: white;
    background-color: green;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 5px;
    font-weight: 700;
    font-size: 20px;
}

.mauticform-post-success .mauticform-innerform {
    display: none;
}

mikeamcbrien on 9 Mar 2017

👍8 🎉3 ❤2

All 4 comments

I accomplished this same goal, using only CSS. Not sure why this is not a default behavior.

.mauticform-post-success .mauticform-message {
    color: white;
    background-color: green;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 5px;
    font-weight: 700;
    font-size: 20px;
}

.mauticform-post-success .mauticform-innerform {
    display: none;
}

mikeamcbrien on 9 Mar 2017

👍8 🎉3 ❤2

Hey @sambarnes90 & @mikeamcbrien, I was wondering if you could provide slightly more detail as to how you got this to work. I'm a total Mautic newbie and not a developer. I've pasted @sambarnes90's code into the appropriate to no avail.

shoelessjoe51 on 17 Feb 2018

@shoelessjoe51
CSS has this thing whereby the last style definition takes precedence over the previous. Read here for more info.

To help you troubleshoot, I'd recommend adding the css code from above to a new css file, and then include it in your html file just above the closing head tag like this (N.B. in my example the css file is in a subfolder called css; I'm assuming you know how to set permissions so that that web agent can read the file):

<html>
    <head>
        .
        .
        .
        <link rel="stylesheet" href="css/newcssfile.css">
    </head>
    <body>
        .
        .
        .
    </body>
</html>

J-a-n-u-s on 12 Apr 2018

@mikeamcbrien 's solution didn't work on my end, unfortunately. The requisite .mauticform-post-success simply didn't appear anywhere in the DOM. What did work however—following his example in variation—is the following:

.mauticform-message:not(:empty) + .mauticform-innerform {
    display: none;
}

In any case, I agree that this behavior should be built into mautic. I also don't understand why the success message is displayed at the top of the form and not near its button.