umbraco form with bootstrap modal

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

PG 3 posts 73 karma points

Oct 21, 2016 @ 11:31
0

Umbraco Form with Bootstrap modal

Umbraco Forms

Umbraco 7
Hi,

I am using umbraco 7 with Umbraco form and showing the Umbraco Forms in the form of a Bootstrap Modal. Something like this:
```
<div class="modal fade" id="contactModal" role="dialog">
   <div class="modal-dialog">
      
        <div class="modal-content" style="padding:5px">
            @Umbraco.RenderMacro("FormsRenderForm", new {FormGuid="8a691fc6-c7e8-49b9-bfd5-1977aaaa8538"})
        </div>
    </div>
 </div>
```
The issue is that, when we submit the form, the modal dialog closes and "Thank You" message does not appear. Although, as expected if I open the Form again, it would show me the Thank You message.

what should be the best approach to get the thank you message or at least an alert to show successful submission of Form?
Copy Link
Jason Vickers 21 posts 115 karma points

Oct 23, 2016 @ 20:03

0

Without seeing your code, I can give you my initial thoughts on your situation. I would gather that your form is doing a postback, which is reloading the browser and closing your modal. To get the result that you are looking for, you might consider switching to an AJAX post. Another option would be to pass a value back to the page, through the model and use that value to trigger a JS function that reopens the modal with the desired message.

Copy Link

PG 3 posts 73 karma points

Nov 01, 2016 @ 11:12

thanks for your reply - I am actually using the default Form.cshtml comes with Form module and using this bootstrap code in the layout directly:

<div class="modal fade" id="contactModal" role="dialog">
    <div class="modal-dialog">
       <!-- Modal content-->
          <div class="modal-content" style="padding:5px">
             @Umbraco.RenderMacro("FormsRenderForm", new {FormGuid="8a691fc6-c7e8-49b9-bfd5-197123478538"})
           </div>
      </div>

Copy Link

Yasir Butt 161 posts 371 karma points

Oct 23, 2016 @ 20:21

0

Because Umbraco Form is posting as a server side post/sumbit and url get redirected

It is not a jquery/client side form submit.

i think that you may open the form in a iframe type dialog so when it post so it will only post the iframe part not the whole page.

Copy Link
PG 3 posts 73 karma points

Nov 02, 2016 @ 11:53
0
This is what I did to show the thank you message as it seems there is a bug in submitting the form using AJAX:
```
    $(document).ready(function () {
    var msgOnSubmit = $('.contourMessageOnSubmit');
    if(msgOnSubmit.text() != "")
    {
        alert(msgOnSubmit.text());
    }});
```
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?