我得到了将表单重定向到 WhatsApp 的代码。我已经在 HTML 页面上对其进行了测试,并且运行良好,但是当我将其移至 Blogger HTML 模板编辑器时,无法触发该按钮并且没有任何反应。我还以为是博主上的jquery库没有安装,但是加了CDN链接,还是不行。还是我的代码中缺少某些东西,或者有什么问题?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.panel{border:none;}
.panel-heading
{
border:1px #212121 !important;
border-radius: 0px;
background-color: #212121 !important;
color: #fff !important;
padding:20px 15px !important;
font-size: 16px;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
font-size: 14px;
font-weight: 600;
padding: 8px 14px;
}
</style>
</head>
<body style='background-color:transparent;'>
<div class="row">
<div class="panel panel-success">
<div class="panel-body">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" placeholder="Name* :" id="name">
</div>
<div class="col-md-6 form-group">
<input type="text" name="company" class="form-control" placeholder="Company/Organization* :" id="company">
</div>
<div class="col-md-12 form-group">
<textarea name="product_description" class="form-control" rows="3" id="product_description" placeholder="Message* :"></textarea>
</div>
<div class='col-md-12'>
<div id="text-info"></div>
<div class="form-group">
<button align='center' class="btn btn-success sending">Send Message</button>
</div>
</div>
</div>
</div>
<script>
$(document).on('click','.sending', function(){
/* Inputan Formulir */
var input_name = $("#name").val(),
input_company = $("#company").val(),
input_email = $("#email").val(),
input_phone = $("#phone").val(),
input_product = $("#product").val(),
input_product_description = $("#product_description").val();
/* Pengaturan Whatsapp */
var walink = 'https://web.whatsapp.com/send',
phone = '6282200000000',
text = '/ Website Contact Form',
text_yes = 'Redirecting you to WhatsApp',
text_no = 'Please fill this form to start your booking.';
/* Smartphone Support */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var walink = 'whatsapp://send';
}
if(input_name != "" && input_phone != "" && input_product != ""){
/* Whatsapp URL */
var checkout_whatsapp = walink + '?phone=' + phone + '&text=' + text + '%0A%0A' +
'Name: ' + input_name + '%0A' +
'Perusahaan/Organisasi: ' + input_company + '%0A' +
'Message: ' + input_product_description
/* Whatsapp Window Open */
window.open(checkout_whatsapp,'_blank');
document.getElementById("text-info").innerHTML = '<div class="alert alert-success">'+text_yes+'</div>';
} else {
document.getElementById("text-info").innerHTML = '<div class="alert alert-danger">'+text_no+'</div>';
}
});
</script>
</body>
可能博主在模板版中屏蔽了一些javascript功能,打开新窗口不是最好的方法,
尝试将链接放入带有
<a>
的
target="_blank"
标签中
参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
const a = document.createElement("a");
a.setAttribute("target", "_blank");
a.setAttribute("href", "your whatsapp link");
a.click();
或者生成一个链接作为提交表单按钮,为此,每次用户更新表单数据时,您都必须更新链接的 href 属性(显示为提交按钮)