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?
[ad_2]