Question

我的网站上有多个表单，单击一下按钮即可将其加载到Bootstrap模式中。由于某些原因，当我尝试提交表单时，没有任何反应。我已经检查了浏览器控制台，找不到任何错误。而且error_log文件中没有错误。

下面的代码是我填写表单的代码。我做错了什么吗？

编辑：我已经用另一种形式进行了测试，看来javascript / jquery没有加载到模式中。

<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>

Answer 1

可能您正在使用bootstrap4。

请尝试以下代码

    <!-- 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>

如果没有可见性问题，请尝试防止在提交按钮时关闭，并检查是否触发了联系表单提交按钮操作。

Answer 2

您缺少HTML的表单元素，而是为按钮键入提交，否则信息将不会发送到任何地方。

联系表格7：“提交”按钮在Twitter Bootstrap Modal中不起作用

2 个答案: