如何通过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