The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk

Preventing conditional fields from displaying on form load

Labels

This Discussion is public

Notifications

There was discussion about this a while back, but thought I'd share some quick code to help anyone experiencing this.

You may notice on forms that have several conditionals (especially large blocks of radio buttons/checkboxes that must be hidden) that these fields briefly display on the page before they're hidden. This is because it takes JavaScript a moment to process all the logic and update the CSS. This happens in a lot of dynamic plugins and displays, not just Formidable - it's sometimes referred to as FOUC (Flash of Unstyled Content).

The way to fix this (well at least hide its effect) is to hide the entire form on page load, and then to unhide it after a short time, giving the form time to hide the fields before the user sees. You can use JavaScript's setTimeout() method to do this, but I found a more elegant way is to use jQuery's fading functionality. You can hide just the form, or apply it to the whole page as I've done here:

<style>
body {display:none}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$( "body" ).fadeIn( 500 );
});
</script>

You should be able to put that into your WordPress post/page (on the HTML Text tab) and be good to go. The 500 is the number of milliseconds to take before fading in (500 = half a second), so you can experiment reducing it.

It may be worth considering to add a 'delay form display' feature to the Form Settings page where we can specify this.

Hope that helps.

Vaughan

This is one great post and a great quickie! - Vaughan! - Very cool!

Best, Mikkael

Excellent Vaughan, thanks very much for sharing this.. exactly what I needed.

Especially good where you have links to the page which contain anchors, as it can cause the anchor to be pushed if content is loaded after the anchor jump.

Thanks!

Discussion closed.