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

Question

Currently on my site www.deltadesigns.co , the contact submit button is working with 1 click on desktop, but takes 2 clicks when on mobile. And I would like to make it one click as now it resets the page and the user must scroll back down, click submit a second time and then the modal pops up to say submit success.

Now I think this has something to do with the hover element, but I'm not to sure how to fix it, or what I'm looking for.

I've read that it could be a rollover issues from the jquery perhaps?

I also tried to use a turn off the hover state for the submit button, but with no results. Thanks

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

Contact Form is a contact 7 form as this is a wordpress theme.

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

The submit button 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;
}

The 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

I think your problem might be with this block of the css - I removed this and it seems to help in my case. It is contained within a @media (max-width:500px) block

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

This I found at the bottom of https://deltadesigns.co/wp-content/themes/DeltaTheme/style.css?ver=version