When indie invisible element, shortcode doesn’t work

I searched online everywhere for an answer didn’t find any.
However, ChatGPT has me covered: https://i.imgur.com/hZ8DiOy.png

Hi @jack1132132

I hope you’re well today and I’m glad you found an answer, however it’s not entirely true actually.

Try doing this:

– create a new page or post on site
– add a “Custom HTML” type block to it
– put this code into it

<div style="display:none;">[forminator_form id="5584"]</div>

– publish that post and visit it on front end.

Make sure that there’s no any custom JS added to it etc.

You will not see the form but if you check page source you will see the entire form markup and if you (e.g. using browser tools) change make that div visible with CSS form will show up.

The issue would most likely be here related to some JS handling those tabs or the way that markup code is added/included to the site. If it’s “dynamically injected” into the site then it will not work in most cases and it would be quite close to what you got from ChatGPT.

Specifically, it will be an issue if you got a tab and the actual content of that tab is indeed loaded e.g. via ajax or similar way only after JS “triggers” that loading. But it isn’t really related to CSS display set to visible or not in this case.

In general though: if either entire tab “module” or at least its content (that includes e.g. form shortocde) is generated dynamically then yes – it would be a problem but I can’t tell much more without knowing exactly how these tabs are made and working so if you’d like to share some insights (and more related code) we can happily look into it.

Kind regards,
Adam

Hello,

If I turn off “Load form using AJAX”, the form will <span style=”text-decoration: underline;”>sometimes</span> load without css applied and the submit button not working like so: https://i.imgur.com/lJwmeSz.png

Instead of like so: https://i.imgur.com/b0rSUkV.png

If I turn on “Load form using AJAX” then it will always load correctly, but when the form loads inside a hidden element and different url, and then I click on the tab to display it, it will load like so:

<div class="forminator-response-message forminator-error" aria-hidden="true"></div>

The only solution I can think of is just to reload when I press the tab so css can be applied:

jQuery('a[data-tab="withdraw"].um-account-link').on('click', function(){setTimeout(()=>{location.reload()}, 1);});

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer