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
May be you are using bootstrap4.
Please try bellow code
If there is not visibility issue then please try to prevent close when submit button and check if contact form submit button action triggered.
You are missing form element for HTML and type submit for the button, or else the info wont be sent anywhere.