Replies: 0
Hi guys,
Intermediate Elementor builder, but noob with html coding here.
I'm building a website for a client and they want on their ebook page the purchase form to only appear when they press Buy Now.
I have found some HTML code online (https://element.how/elementor-show-section-on-click/) allows me to make a Forminator form that I inserted with shortcode appear when the user presses a button. The Forminator form is for users to purchase an ebook and has a Stripe integration.
On the shortcode element I put in CSS class: showclick
Then on the 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>
The form is hidden when I visit the page and shows when I press the Buy Now button. 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.
Any ideas how I can solve this?