skip to Main Content

I have multiple forms on my site that are loaded in a Bootstrap Modal on a click of a button. For some reason when I try to submit the forms nothing happens. I have checked the browser console and I can’t find any errors. Also there is no error in the error_log file.

The code below is what I have for my forms. Have I done something wrong?

Edit: I have tested with another form and it seems javascript/jquery is not being loaded in the modal.

<button type="button" class="application_button button" data-toggle="modal" data-target="#jobapplyform">
    <?php esc_attr_e( 'Apply for job', 'wp-job-manager' ); ?>
</button>

<div class="modal fade" id="jobapplyform" tabindex="-1" role="dialog" aria-labelledby="jobModalLabel" aria-hidden="true">                             
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close-btn-modal" data-dismiss="modal" aria-label="Close">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/close-icon.png"/>
                </button>
                <h2 class="modal-title" id="jobModalLabel">Apply</h2>
            </div>                                   
            <div class="modal-body">
                <div class="application_details">
                    <?php echo do_shortcode('[contact-form-7 id="5096" title="Claim This Profile"]'); ?>
                </div>
            </div>                                 
        </div>
    </div>                               
</div>

2

Answers


  1. May be you are using bootstrap4.

    Please try bellow code

        <!-- The Modal -->
     <!-- Button to Open the Modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#jobapplyform">
        Open modal
      </button>
        <div class="modal" id="jobapplyform">
            <div class="modal-dialog">
                <div class="modal-content">
    
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="close-btn-modal" data-dismiss="modal" aria-label="Close"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/close-icon.png"/></button>
                    </div>
    
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="application_details">
                            <?php echo do_shortcode('[contact-form-7 id="5096" title="Claim This Profile"]'); ?>
                        </div>
                    </div>
    
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
    
                </div>
            </div>
        </div>
    

    If there is not visibility issue then please try to prevent close when submit button and check if contact form submit button action triggered.

    Login or Signup to reply.
  2. You are missing form element for HTML and type submit for the button, or else the info wont be sent anywhere.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search