Forums

HI,

After a form is filled out and submitted I would like to have the form reset and show a popup with a thank you message instead of redirecting to a thank you page.

I've checked the forums but unless I missed a post I don't see anything explaining how to do this.

Any idea's would be appreciated.

Thank you

Hello Tgoodrich,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How do I show a 'loading' message when the form submits?
How can I show a thanks message if I use the plug-in or module?
How can I show a Thanks Message then redirect the user?
P.S: I'm just an automated service😉

Sorry doesn't help

Hi Tgoodrich,

What kind of popup ? you can simply use the code below inside a "Load Javascript" action in the "on submit" event:

jQuery(document).ready(function($){
alert("Thanks!");
});

Regards,
Max

Hi Max,

I tried your code and it does give a popup but the form does not reload, it just goes to an empty page. Well I shouldn't say empty, most of the website shows except there is no content in the mainbody were the form should be. I would really like to have the form reload so the user can fill the form out again if they choose without having to click the link to the form again. This form is used to submit wildlife sightings and only one animal sitting per form submission. So if they have 2 sightings to report they will have to fill the form out twice.

The popup that is generated by your code would work if thats my only option. The only thing I don't care for is that its not centered on the screen and It includes my website url in part of the message, something about "The page at (my url) say's," followed by the thank you message.

I would preferably like a popup I can style to my liking. If it helps I have JCE MediaBox popup and RocketThemes Rokbox installed.

I dont want to put you out of your way for a solution on this, I just figured being the wizard you are you would know a quick solution already.

Thanks

Try the code below inside a "custom code" action in the "on submit":

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

And update your JS code to this:

jQuery(document).ready(function($){
$('#myModal').modal('show');
});

Does it work ?

Regards,
Max

Hi Max,

I put the code in just as you gave it to me to see what it would do and I think I can style this the way I want so its definitely good in that regard.

Only things I found not working was the (x) for closing the modal does not work and its not returning to the form. Still getting a page with an empty main body. I think after hitting the form submit its still going to the page where the thank you message would normally appear.

Hi Max,

Just wanted to update my last post. I fixed the close button that wasn't working.

I changed:

data-dismiss="modal"

To:

data-g-dismiss="modal"

This is after I realized this popup is very similar to the popups chronoforms uses in the admin interface. Just checked the code in developer tools and saw the the only difference was the missing "g".

Still want the form page to reload though.

Actually the popup should not affect the page content loading, could you please send me a link to the form so I can check what's happening ?

what's the url in the browser's address bar after submitting the form ?

Regards,
Max

Hi Max,

Sorry for the late reply, been out all day.

Here is the link to the form:
http://184.xxxxxxx/index.php/town-departments/conservation-commission/submit-a-wildlife-observation

And the URL after submitting:
http://184.xxxxxxx/index.php/town-departments/conservation-commission/submit-a-wildlife-observation?chronoform=wildlife-tally&event=submit

When you go to the form URL you can see the ChronoForm and ChronoConnectivity links in the left nav under observation and tally.

Also, if you need to.. Submit the form as many times as you need. Whatever is added I can just remove from the table in phpMyAdmin.

Thanks

Hi Tgoodrich,

I have just made a test, everything looks fine, you should also change the popup title or clear it.

What should be displayed if the popup is not there ? what do you have in the "on submit" event at the moment ?

Regards,
Max

Hi Max,

I agree on the popup title, I just haven't got around to styling it yet.

The desired effect I would like to have is that when the form is submitted the page/form is refreshed and the popup appears to let the user know his/her form was successfully submitted. With the code you gave I now have the popup covered, however the form disappears after being submitted and the only way to get it back is to click the form link in the left nav again.

The user may have multiple animal sightings to add but the form is made to enter only one sighting at a time. so basically I need it to work like:
1. User fills out form and clicks submit (works)
2. On-submit, form information is sent to database (works)
3. Popup appears to let them know form was submitted successfully (works)
4. Form reloads automatically and is ready to accept more data input (not working)

Concerning the on-submit event, if you are referring to what is set in "HTML (Render Form)" the "Submit event" is set to "submit".

Hope this helps.

Ok, in order to redisplay the form after submission, just add an "Event loop" action to the end of the "on submit" event, that will display the form but the fields will be auto populated, so you will need to reset them by adding a "custom code" action BEFORE the event loop and insert this code:

<?php
$form->data = array();

Hi Max,

I think we almost have it. Everything is almost working except the modal popup no longer shows as a popup.

The modal popup is just showing its text in the head of the form. Its in the same area that gives a warning message if the captcha is filled in wrong. I could work with it this way but its not really what I wanted.

Heres a screenshot of where the modal popup is appearing now after the form is submitted:



Not sure if it may have something to do with my form setup so heres a screenshot of that:



Please let me know what you think.

Just adding the "Event loop" under the "custom code" caused it to stop working ?

Hi Max,

If I remove the event loop the popup works normally but as expected the form no longer refreshes. I tried to debug whats happening but I haven't had any luck yet.

Hi Max,

I just did some more testing and I'm not sure how I missed this but it looks like when the event loop is not included then the popup adds a container div around the custom code you gave me.

Heres the code that is added around the code you gave me:

<div class="gbs3"> your code</div>

When the event loop is added I loose the above code so I simply added the div class to the code you gave me and now it is working properly.

So thank you so much working this out with me. I think so far with your help I have been able to achieve everything I have needed chronoforms to do.

Cheers

Hi again Max,

Sorry to drag this out but is there a simple way to center the popup on the screen regardless of the viewing device.

Also wondering if there is a simple way to add a faded background to the viewing screen when the popup is active. Kinda like the popup in the chronoforms backend.

Thanks

Hi,

After doing some research it appears that with this modal it should default to having a backdrop but for some reason it doesn't show on the frontend. The backdrop div is active when the modal is active so I know thats good it just doesn't show.

As far as I can tell this is some sort of css issue. Looking at the original code Max gave me this is a jquery bootstrap modal and should have worked out of the box with the code he gave.(including seeing the backdrop)

So far I have had to add a div class of "gbs3" around the code he gave and change "data-dismiss" to "data-g-dismiss" for the modal close button.

I also had to add the following css to the "On load" - "Load CSS" in setup to get the modal background to appear and center the modal on screen:

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
outline: none;
}
.gbs3 .modal {
overflow-y: inherit; 
outline: none;
top: 30%;
}

Max, any Idea why the original code didn't work as you gave it to me? Also, do you see a better way of accomplishing this other than the changes I have made and added to your code?

Thanks

Hi Max,

Now that we have it working I really like it and I think my users will also appreciate it. I personally think it will speed up form submission process in my case.

I'm not sure what others think or how widely used this type of solution is but it seems it would be a good option to include in chronoforms.

I realize now this really was a custom solution so thank you very much for the time you put in helping me with this.

Kind Regards,
TGoodrich