Question 166674 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why do buttons/pages not respond when I submit a form in WordPress using jQuery?

I’m a bit new to jquery.

Currently, I have a contact 7 form on wp, and have created the function below in order to have a modal popup with a successful submission. However, while it works as intended, when the popup modal appears, the screen goes a tad darker, and neither the ‘back to home’ or close button will function – or anything else on the page for that matter.

The website is Deltadesigns.co — Feel free to submit a form — the inspect shows no errors in the console .

The code is as follows:

     <div class="col-md-9 col-sm-10">
        <div class="contact-form" id="contact-id">
        
          <?php echo do_shortcode("[contact-form-7 id="86" title="Contact form 1" html_class="form-group"]"); ?>
      
         
      </div>
    </div>

        
 <div class="modal-fade" id="submitModal" tabindex="-1" role="dialog" aria-labelledby="submitModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="submitModalLabel">Success!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Thanks for reaching out! We'll reply within 1-2 business days.
        </div>
        <div class="modal-footer">
          <a button type="button" href="https://deltadesigns.co/" class="btn btn-primary">Back to Home</button></a>
        </div>
      </div>
    </div>
  </div>

        
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
      

    
<?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
      <script type="text/javascript">
    
         document.addEventListener( 'wpcf7mailsent', function( event ) {
         if ( '86' == event.detail.contactFormId ) { // Change 123 to the ID of the form 
         jQuery('#submitModal').modal('show'); //this is the bootstrap modal popup id
       }
        }, false );
         </script>
       <?php  } ?>
      
<script type="text/javascript">
    
    document.querySelector('.close').addEventListener('click',
    function(){
        document.querySelector('.modal-fade').style.display='none';
    });

</script>




<?php
get_footer();
?>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was that the jquery function, bootstrap, or wordpress perhaps, added in a modal-backdrop element which I hadn't thought to look for, and the Z-index of the class was set higher than all other elements. Once I changed it to be below that of the popup, all was well.


  2. 0

    Here is the error in the modal-footer:

    <div class="modal-footer">
      <a button type="button" href="https://deltadesigns.co/" class="btn btn-primary">Back to Home</button></a>
</div>

    The <a> and <button> tags are merged in your code.

    Try this:

    <div class="modal-footer">
      <a href="https://deltadesigns.co/"><button type="button" class="btn btn-primary">Back to Home</button></a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search