Skip to content
Log in Sign up

How to Hide the Search Form Until the Page Is Fully Loaded

Field dependencies are applied by JavaScript once the page has loaded, which makes search form fields jump and reflow while a visitor watches. Hide the form with CSS in your child theme and reveal it only when loading has finished.

2 minute read

If you are using Field Dependency in your search form, you may sometimes notice a visual issue: fields inside the form can “jump” or reflow while the page is loading. This happens because dependencies and layout adjustments are calculated by JavaScript only after all scripts and styles are ready.

To avoid this, you can use a simple workaround that hides the search form until the page is fully loaded, and then reveals it smoothly.

You need a child theme

The problem it solves

  • Users who enable Field Dependency may see fields shifting or resizing during the loading phase.
  • This can cause a poor user experience, especially if the search form sits in a visible area such as the homepage hero section.
  • The solution is to hide the form entirely until the page is ready, so no layout shift is ever visible to the visitor.

The workaround

We will do this in two steps:

  1. Hide the form by default using CSS inside your child theme.
  2. Reveal the form only after the page is fully loaded by adding a small JavaScript snippet through your child theme's functions.php.

Step 1: Add CSS to style.css

Open your child theme's style.css and add:

style.css 
/* Hide the form by default */.listivo-search-form-v2 {display: none !important;}
/* Reveal once the body has the page-loaded class */body.page-loaded .listivo-search-form-v2 {display: block !important;}

This ensures the form is hidden initially, no matter what other styles are applied.

Step 2: Add JavaScript via functions.php

Open your child theme's functions.php and add:

functions.php 
function td_mark_page_loaded() {?><script>// Add 'page-loaded' to <body> after all resources are fully loadedwindow.addEventListener('load', function () {if (document.body) {document.body.classList.add('page-loaded');}});</script><?php}add_action('wp_head', 'td_mark_page_loaded', 1);

This script waits until the entire page — images, fonts and external resources included — has loaded. At that point it adds a page-loaded class to <body>, and the CSS rule from Step 1 detects the class and reveals the form.

How it works

  1. When the page starts loading, the form is hidden by CSS (display:none !important).
  2. Once everything has finished loading, the JavaScript snippet adds a .page-loaded class to <body>.
  3. The second CSS rule makes the search form visible again.
  4. Visitors only ever see the fully initialized form, without field jumping or layout glitches.
That's it
The form is now hidden during load, which makes for a better experience on search forms that use field dependencies.

Ask the people who build Listivo

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?