1.html（需要引入bootstrap）
<div class="form">
<form action="post" class="form_box" id="registration_form" onsubmit="return false">
<label for="" class="form_group col-lg-6 col-md-6 col-sm-6 col-xs-12 te1">
<input type="text" required="" placeholder="Name" class="name" name="row[name]"
oninvalid="setCustomValidity('required');" oninput="setCustomValidity('');">
</label>
<label for="" class="form_group col-lg-6 col-md-6 col-sm-6 col-xs-12 te2">
<input type="text" required="" placeholder="Email" class="name" name="row[email]"
oninvalid="setCustomValidity('required');" oninput="setCustomValidity('');">
</label>
<label for="" class="mes col-lg-12 col-md-12 col-sm-12 col-xs-12">
<textarea type="text" required="" placeholder="Message / Feedback / Request" class="message"
name="row[content]" oninvalid="setCustomValidity('required');"
oninput="setCustomValidity('');"></textarea>
</label>
<div class="enquiry_make">
<p></p>
</div>
<div class="sub">
<p class="sub_btn" data-field=""><span>Get A Free Quote</span></p>
</div>
</form>
</div>
.form {
.row {
.form_group {
padding-left: 30px;
}
.te1 {
padding-left: 15px;
}
.te2 {
padding-right: 15px;
}
}
label {
margin-bottom: 1.5rem;
padding-left: 0;
padding-right: 0;
input {
width: 100%;
padding: 0;
height: 50px;
border: 1px solid rgba(0, 0, 0, 0.302);
padding-left: 30px;
background: none;
}
textarea {
width: 100%;
padding: 0;
height: 150px;
border: 1px solid rgba(0, 0, 0, 0.302);
padding-left: 30px;
padding-top: 10px;
background: none;
}
}
.subb {
line-height: 66px;
width: 100%;
overflow: hidden;
p {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
color: white;
text-align: center;
background: #005bac;
-webkit-appearance: unset;
.iconfont {
padding-left: 10px;
}
}
}
.privacy {
margin-top: 1rem;
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-family: OpenSans-Regular;
font-weight: 400;
text-decoration: underline;
color: rgba(189, 189, 189, 1);
line-height: 38px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.enquiry_make {
position: fixed;
z-index: 99;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
top: 0;
display: none;
left: 0;
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #000;
color: #fff;
padding: 20px 30px;
}
}
}
3.JS（需要引入jquery）
$("#registration_form .sub").click(function () {
var btn = $(this);
var html = btn.html();
$(this).text('Loading');
$(this).attr({
'disabled': 'disabled'
});
var name = $('#registration_form input[name="row[name]"]').val();
name = name.replace(/^\s+|\s+$/g, "");
var email = $('#registration_form input[name="row[email]"]').val();
var mess = $('#registration_form textarea[name="row[content]"]').val();
mess = mess.replace(/^\s+|\s+$/g, "");//去掉输入框前后空格
if (!name) {
$(".enquiry_make").css("display", "block");
$(".enquiry_make").css("font-size", "20px");
$('.enquiry_make').find("p").html('The name cannot be empty!');
$(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
$('#registration_form input[name="row[name]"]').focus();
btn.html(html);
btn.removeAttr("disabled");
return false;
}
if (!email) {
$(".enquiry_make").css("display", "block");
$(".enquiry_make").css("font-size", "20px");
$('.enquiry_make').find("p").html('E-mail can not be empty！');
$(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
$('#registration_form input[name="row[name]"]').focus();
btn.html(html);
btn.removeAttr("disabled");
return false;
}
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (!re.test(email)) {
console.log("err");
$(".enquiry_make").css("display", "block");
$(".enquiry_make").css("font-size", "20px");
$('.enquiry_make').find("p").html('Mailbox format error,please try again!');
$(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
$('#registration_form input[name="row[email]"]').focus();
btn.html(html);
btn.removeAttr("disabled");
return false;
}
if (!mess) {
$(".enquiry_make").css("display", "block");
$(".enquiry_make").css("font-size", "20px");
$('.enquiry_make').find("p").html('Message can not be empty!');
$(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
$('#registration_form textarea[name="row[content]"]').focus();
btn.html(html);
btn.removeAttr("disabled");
return false;
}
var form = new FormData(document.getElementById("registration_form"));
var url = window.location.href;
form.append("row[url]", url);
$.ajax({
url: "/ajax/message",
type: "post",
data: form,
processData: false,
contentType: false,
success: function (data) {
dataLayer.push({
'event': 'form-submitted'
});
data = JSON.parse(data);
if (data.code == 1) {
$(".enquiry_make").css("display", "block");
$(".enquiry_make").css("font-size", "20px");
$('.enquiry_make').find("p").html('<span>The message has been sent, thank you for submitting !</span>');
$(".form_box").css("display", "block");
$(".enquiry_make").fadeIn(400, function () {}).delay(4000).fadeOut();
} else {
$(".enquiry_make").css("display", "block");
$(".enquiry_make").css("font-size", "20px");
$('.enquiry_make').find("p").html(data.msg);
$(".enquiry_make").fadeIn(400, function () {}).delay(4000).fadeOut();
}
btn.html(html);
btn.removeAttr("disabled");
$('#registration_form')[0].reset();
},
error: function (e) {
$('.enquiry_make').find("p").html('<span>Server error, please try again later! </span>');
$(".enquiry_make").fadeIn(400, function () {}).delay(2000).fadeOut();
btn.html(html);
btn.removeAttr("disabled");
}
});
})
| 
转播
