FOUCs may be hacked around when using web parts with SharePoint.

I am using web parts to empower jQuery to manipulate list forms in SharePoint as discussed here. I would like a miniform to appear before a proper form asking the user two questions. Upon asking the questions, the real form is to unhidden with particular fields preprepped with certain values. This means I need to initially hide the proper form. I find if I make a web part after the proper form that contains some jQuery that does this...

$(".ms-formtable").attr('style', 'display: none;');

 
 

...will hide the form, but only when it "kicks in" as the form will be visible for a second and then disappear from view. This is known as FOUC (flash of unstyled content). How do we get rid of it? Could we create two separate web parts and wrap the content to hide in a div tag? We could start like this...

<div style='display: none;' id='newhelper'>

 
 

...and end like this...

</div>
<script type="text/javascript" src="http://www.hdri.net/Scripts/jquery-1.4.4.min.js">
</script>
<script type="text/javascript">
   $(function() {
      alert('whatever');
   });
</script>

 
 

...but, unfortunately, this will not work as SharePoint will put a closing div tag after the open div tag in the first web part. Using two web parts is a good idea, but they should not contain an open tag and a close tag for a div. Instead, the second web part should have jQuery content as shown above while the first web part should have CSS content like so:

<style type="text/css">
   .ms-formtable {
      display:none !important;
   }
</style>

 
 

This should both get rid of the FOUC and make the form impossible to use without having JavaScript enabled which really is a must in my scenario.