Help! Forminator form won’t show credit card field when I make it “showonclick” in html

Intermediate WordPress/Elementor builder. Noob with html coding.

I’m building a website for a client (on Elementor/Wordpress) and they want their ebook page’s purchase form to only show when the user presses Buy Now. I’m using Forminator with Stripe integration for the purchase form. I can hide the form and make it appear fine. But when the form shows it displays the “Credit/Debit Card” title and the “Powered By Stripe!” text, but not the actual card details field. The page can be seen here: [https://body.vision/the-three-pillars-of-weight-loss](https://body.vision/the-three-pillars-of-weight-loss)

To get to this point:

I found some HTML code online ([https://element.how/elementor-show-section-on-click/](https://element.how/elementor-show-section-on-click/)) that allows me to make the form appear when the user presses a button.

Following that page I did the following:

On the Forminator element I put in CSS class: showclick

Then on the Buy Now button element I put in the CSS class: clicktoshow

Then I put an HTML element under the button and put in the following code:

<script>

document.addEventListener(‘DOMContentLoaded’, function() {

jQuery(function($){

$(‘.clicktoshow’).each(function(i){

$(this).click(function(event){

event.preventDefault();

$(‘.showclick’).eq(i).show();

$(‘.clicktoshow’).eq(i).hide();

}); });

}); });

</script>

<style>

.clicktoshow{

cursor: pointer;

}

.showclick{

display: none;

}

</style>

Any ideas how I can solve this?

 

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