Integrating Forminator into Your Custom WordPress Page (and Fixing Visibility Issues) 🛠️

✅ Introduction

Forminator is a powerful and flexible WordPress plugin for building forms, polls, and quizzes. It offers drag-and-drop ease with advanced features like conditional logic, spam protection, and even payment gateways.

But what if you’ve built a custom page template in your theme and the Forminator form doesn’t appear properly?

You’re not alone — this often happens when theme styles override the form or the template is missing essential WordPress functions and assets.

In this guide, you’ll learn how to:

• Embed a Forminator form inside a custom template




• Fix invisible or broken forms with CSS




• Debug deeper issues like missing scripts or plugin conflicts

🧩 Step 1: Embed the Forminator Form Using a Shortcode

Suppose you’ve created a custom template file like page-contact.php.

Add the Forminator shortcode inside your custom HTML/PHP markup:

<div class="custom-form">

    <?php echo do_shortcode( '[forminator_form id="123"]' ); ?>

</div>

🔹 Tip: Replace 123 with your actual Forminator form ID.

Find it in: WordPress Admin → Forminator → Forms → Hover over the form name.

If you prefer a dynamic ID from a custom field, escape it for safety:

echo do_shortcode( '[forminator_form id="' . esc_attr( $form_id ) . '"]' );

**

🎨 Step 2: Fix Visibility Issues with Scoped CSS**

Sometimes the form is technically present but hidden due to theme CSS conflicts.

Add this to your style.css or Customizer → Additional CSS:

/* Scope to this page’s wrapper to avoid affecting other pages */

.custom-form .forminator-ui,

.custom-form .forminator-custom-form,

.custom-form .forminator-design--default {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    max-height: 100% !important;

}

🔎 Use your browser dev tools (F12 → Inspect) to check which CSS rules are overriding Forminator’s default styles.

🔍 Step 3: Load WordPress Assets in Your Template

If the form still doesn’t load or looks broken, make sure your template includes WordPress’s standard hooks and assets.

At the top of your template:

<?php

/* Template Name: Custom Form Page */

get_header(); // Loads header.php, which should call wp_head()

?>

<!-- Your custom content -->

<?php

get_footer(); // Loads footer.php, which should call wp_footer()

Most themes already include wp_head() and wp_footer() inside header.php and footer.php.

Only call these functions directly if you’re building a blank template.

🛠️ Step 4: Debug JavaScript Errors

Still blank? Open the browser console (F12 → Console) and check for:

• Uncaught ReferenceError




• jQuery is not defined




• 404 errors for missing JS or CSS files

If you see these, it usually means scripts aren’t being enqueued or a plugin is interfering.

🚫 Bonus: Check for Plugin or Cache Conflicts

Performance plugins (minification, lazy loading, caching) can block Forminator assets.

Try:

• Disabling lazy-loading for Forminator forms




• Excluding Forminator from CSS/JS minification




• Temporarily deactivating other plugins to find conflicts




• Flush permalinks (Settings → Permalinks → Save Changes) to refresh rewrite rules

✅ Final Result

Once everything is set up, your rendered page will look like:

<div class="custom-form">

    <!-- Forminator Form Rendered Here -->

    <form class="forminator-custom-form"> ... </form>

</div>

No more hidden inputs, missing scripts, or CSS ghosts. 🎯

🧠 Conclusion

Integrating Forminator into a custom WordPress page is straightforward, but rendering issues can trip up developers.

By ensuring that:

• The shortcode is placed correctly




• CSS conflicts are scoped and overridden




• All necessary WordPress assets are loaded

…you can build beautiful, interactive forms even in fully custom templates — without sacrificing theme flexibility or performance.