如何通过 1 点击而不是 2 在移动设备上提交联系表单

Question

目前在我的网站 www.deltadesigns.co 上，联系人提交按钮在桌面上只需单击 1 次，但在移动设备上需要单击 2 次。我想点击一下，因为现在它会重置页面，用户必须向下滚动，再次点击提交，然后弹出模式说提交成功。

现在我认为这与悬停元素有关，但我不确定如何修复它，或者我在寻找什么。

我听说这可能是 jquery 的翻转问题？

我还尝试使用关闭提交按钮的悬停状态，但没有结果。谢谢

@media (max-width: 500px){
.wpcf7-submit:hover {
        display: none
    }
}

联系表格是一个联系 7 表格，因为这是一个 wordpress 主题。

<div class="contact-form" id="contact-id">
         
            <div class="form-group">
              <label class="control-label col-sm-3" for="fname">First Name:</label>
              <div class="col-sm-10">
                  [text* first-name class:form-control id:fname placeholder "Enter First Name"]
               </div>
            </div>
            <div class="form-group">
             <label class="control-label col-sm-3" for="lname">Last Name:</label>
              <div class="col-sm-10">
                  [text* last-name class:form-control id:lname placeholder "Enter Last Name"]
              </div>
            </div>
            <div class="form-group">
               <label class="control-label col-sm-3" for="email">Email:</label>
              <div class="col-sm-10">
                  [email* email-250 id:email class:form-control placeholder "Enter Email"]
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-3" for="phone">Phone:</label>
              <div class="col-sm-10">
               [tel tel-921 id:phone class:form-control placeholder "Enter Phone Number"]
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="company">Company:</label>
              <div class="col-sm-10">
                 [text text-397 id:company class:form-control placeholder "Enter Company Name"]
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-2" for="comment">Question:</label>
              <div class="col-sm-10">
                [textarea textarea-739 id:comment class:form-control placeholder "What services are you interested in?"]
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                [submit class: btn class: btn-default class: btn "Send  &raquo;"]
               
              </div>
            </div>
          
        </div>     

      </div>
    </div>
  
[honeypot honeypot-73]

提交按钮css：

.wpcf7-submit {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    background: var(--bg-green);
    color: #fff;
 
    letter-spacing: 2px;
    border-radius: 7px;
    border-width: 0px;
    width: 120px;
    height: 2.2rem;
    font-size: 1.4rem;

    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
    box-shadow: 0 0 2px 2px black;
}

.wpcf7-submit:hover {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    background: rgb(1, 90, 5);
    color: rgb(153, 209, 151);

    font-size: 1.4rem;
    border-radius: 7px;
    border-width: 0px;
    width: 140px;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
    height: 2.2rem;
}

.wpcf7-submit:focus {
    box-shadow: none;
}

js

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

Answer 1

我认为您的问题可能与 css 的这个块有关 - 我删除了它，它似乎对我的情况有所帮助。它包含在 @media (max-width:500px) 块中

  .wpcf7-submit:focus {
        display: none;
    }

这是我在https://deltadesigns.co/wp-content/themes/DeltaTheme/style.css?ver=version底部找到的