Overview

This technique is demonstrated to provide a little more style and control to the way a form opens. This opens the form by sliding it down from the top instead of the typical "blink" open.

View the difference by opening and closing the two forms to the right.

In my experience, this gives the form a little time to completely render before the slide happens, so it has less blink and is more smooth.

The improvement is more pronounced with a heavier form.

Create a form, set up the fields and actions as needed

1. In the form settings, set the Display Mode to either "In Text" or "Manual"

2. In the settings, Initialization Scripts, add the following jquery that simply hides the form as it is being initialized.

//Add this so the form opens hidden, unhide it later with a sliding appearance as the last action in the events
 $('#dnn1064root').css('display','none');

3. Substitute your module id in that code instead of 1064

4. Then, in the form's event list, in the "On Init" action stack, add an "Execute Javascript Code And Stop Execution" action to the bottom of the stack and paste in the following code, which simply pauses briefly then unhides the form in the sliding method.

setTimeout(function(){
  $('#dnn1057root').slideDown("slow","swing");
}, 500);

5 Substitute your module id in that code instead of 1064

6. Then you can open the form using either the Open Form action or the javascript method as usual.

This JQuery action has options you might be interested in to control the way the slide action works. See the details here:

https://api.jquery.com/slidedown/

If you are interested in a different opening transition, there are some to be found or created with JQuery. Google will show you.