[英]How to make contact form submit with 1 click and not 2 on mobile
目前在我的网站www.deltadesigns.co上,联系人提交按钮可以在桌面上单击 1 次,但在移动设备上需要单击 2 次。 我想让它单击一下,因为它现在重置页面并且用户必须向下滚动,再次单击提交,然后弹出模式说提交成功。
现在我认为这与 hover 元素有关,但我不确定如何修复它,或者我正在寻找什么。
我读到这可能是 jquery 的翻转问题?
我还尝试使用关闭 hover state 作为提交按钮,但没有结果。 谢谢
@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 »"]
</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>
我认为您的问题可能与 css 的这个块有关 - 我删除了它,它似乎对我的情况有所帮助。 它包含在@media (max-width:500px)
块中
.wpcf7-submit:focus {
display: none;
}
这是我在https://deltadesigns.co/wp-content/themes/DeltaTheme/style.css?ver=version的底部找到的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.