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.

Tip: If you don’t already have a child theme, start here:
Utilizing a child theme: modifying PHP, CSS, JS files while maintaining future update compatibility

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 is placed in a visible area like the homepage hero section.

  • The solution is to hide the form entirely until the page is ready, preventing any layout shifts from being 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:

/* 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:

function td_mark_page_loaded() {
?>
<script>
// Add 'page-loaded' to <body> after all resources are fully loaded
window.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 (including images, fonts, and external resources) is loaded. At that point, it adds a page-loaded class to <body>. The CSS rule from Step 1 detects this 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. As a result, your visitors only see the fully initialized form, without any field jumping or layout glitches.

✅ That’s it! You’ve successfully hidden the form during load and improved the user experience for your search form with field dependencies.