I would appreciate any help. I have set a contact form up and want to show a button to download a file once the form is submitted. This is showing all the time and should be hidden until the form is filled in.

 <div class="visible-only-if-sent"> 
  <a href="demo.ogi.co.uk/download/1323" class="button big_large_full_width center default">Download CVM10-Lite
  </a> 
 </div>

But it is still showing on the page all the time. Can you please help me if I'm doing something wrong somewhere?

I would appreciate any help. I have set a contact form up and want to show a button to download a file once the form is submitted. This is showing all the time and should be hidden until the form is filled in.

 <div class="visible-only-if-sent"> 
  <a href="demo.ogi.co.uk/download/1323" class="button big_large_full_width center default">Download CVM10-Lite
  </a> 
 </div>

But it is still showing on the page all the time. Can you please help me if I'm doing something wrong somewhere?

• forms
• plugin-contact-form-7

3 Answers 3

You can add listener on submit ..something like this:

  document.addEventListener( 'wpcf7submit', function( event ) 

{ if ( '123' == event.detail.contactFormId )    

  { alert( "The contact form ID is       123." ); //    do something productive } }, 

   false );

Using JS, You can add an event listener that listens for when the CF7 form is submitted and add the class "visible-only-if-sent" to the element in the DOM.

Register your script in the function.php file in your Theme folder.

function.php

wp_enqueue_script( 'js-file', get_template_directory_uri() . '/js/show-button.js');

Theme folder Theme/JS/show-button.js

show-button.js

 document.addEventListener( 'wpcf7submit', function( event ) 
       { 
         var button_clicked = document.getElementsByClassName("download-file"); 
         button_clicked.classList.add("visible-only-if-sent");
       }, 

 false );

  

Template file

<div class="download-file"> 
  <a href="demo.ogi.co.uk/download/1323" class="button big_large_full_width center default">Download CVM10-Lite
  </a> 
</div>

Use This Code This code work after completly submitting form 'wpcf7mailsent'

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) 

       { 
<!-- write whatever you want -->
       let btn = document.getElementById('show_pdf');
        btn.style.display = "block";   
       }, 
 false );
</script>