Custom layout for form success message?

Vote:
 

I have a View for my custom form.

In the view I have the following section:

 <%-- area for showing Form's status or validation --%>
        <div class="container roi">
            <div class="Form__Status bg-pattern parallax-background">
                <div class="Form__Status__Message <%: statusDisplay %>" data-f-form-statusmessage>
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Vielen Dank!</h3>
                            <div class="row success-msg">
                                <div class="col-xs-3 center-block-xs col-sm-push-0 col-md-2">
                                    <div class="square mb-1">
                                        <div class="square-content circle bg-red">
                                            <img class="icon-centered" src="/Static/img/icons/icon_check_white.svg" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-md-10">
                                    <p class="mt-1"> Übermittlung erfolgreich pp. </p>
                                    <p class="mt-1" style="color:red;"> <%= message %> </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

However when I test the form in my browser the success message looks like this:

<div class="container roi">
            <div class="Form__Status bg-pattern parallax-background">
                <div class="Form__Status__Message Form__Success__Message" data-f-form-statusmessage="">Übermittlung erfolgreich.</div>
            </div>
        </div>

It appears that EPiServer is modifying this and pasting it's own success message. How can I add a custom layout for the success message?
 
#204709
Jun 13, 2019 15:45
Vote:
 

If you just want to change the "look and feel" of the message, just change the css and inject to your page. In case you need to change how message element rendered, you need to modify the template which located in the zip file: ...\modules\_protected\EPiServer.Forms\EPiServer.Forms.zip. But in that case you also need to care what change in the template when there is an update.

#204727
Jun 14, 2019 6:03
Vote:
 

Thank you, can you please tell me which file I am looking for in the zip file? I looked and cannot find a layout specific to the success message. 

#204743
Jun 14, 2019 17:35
Vote:
 

You need modify the FormContainerBlock.ascx in views folder. Then place your file in the "~/Views/Shared" folder, this will override the default one. Note that you need to make sure your modification does not change its bussiness logic.

#204758
Jun 17, 2019 4:42
Vote:
 

Hi thanks, but that's exactly what I have done. But my styling for the success message is being over written:

I added the following into my custom FormContainerBlock.ascx:

 <%-- area for showing Form's status or validation --%>
        <div class="container roi">
            <div class="Form__Status bg-pattern parallax-background">
                <div class="Form__Status__Message <%: statusDisplay %>" data-f-form-statusmessage>
                    <div class="row">
                        <div class="col-md-12">
                            <h3>Vielen Dank!</h3>
                            <div class="row success-msg">
                                <div class="col-xs-3 center-block-xs col-sm-push-0 col-md-2">
                                    <div class="square mb-1">
                                        <div class="square-content circle bg-red">
                                            <img class="icon-centered" src="/Static/img/icons/icon_check_white.svg" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-9 col-md-10">
                                    <p class="mt-1"> Übermittlung erfolgreich pp. </p>
                                    <p class="mt-1" style="color:red;"> <%= message %> </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


But this is being replaced.
#204761
Jun 17, 2019 9:32
Vote:
 

Ah, sorry. After review the code logic in js file, I saw the entry message will be replaced with new content. So your custom code will be clear. In your case, I suggest you place your custom html OUTSIDE the Form__Status__Message then you hook into the event formsSubmitted to hide the default message and display your own.

https://world.episerver.com/documentation/developer-guides/forms/handling-events-for-forms/

#204765
Jun 17, 2019 10:22
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.