0
フォームが正常に送信されると、送信ボタンの上の同じページに成功メッセージが表示されます。また、フォームが正常に送信されない場合は、送信ボタンの上に表示されることを示すメッセージが表示されます。 フォームが正常に送信されたときに何が起こっているのか、メッセージがない新しい空白ページが表示されることです。以下はフォームと同じページの成功またはエラーメッセージ
私がこれまで持っているものです。
autosize(document.querySelectorAll('#message_content'));
var validator = $("#comment_form").validate({
ignore: [],
rules: {
gender: {
required: true,
},
first_name: {
required: true,
},
last_name: {
required: true,
},
email: {
required: true,
email: true,
minlength: 3
},
email_again: {
email: true,
minlength: 3,
equalTo: '#email'
},
message_subject: {
required: true,
minlength: 2
},
message: {
required: true,
minlength: 4
},
hiddenRecaptcha: {
required: function() {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
}
});
jQuery.extend(jQuery.validator.messages, {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please use identical email addresses.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});@font-face {
font-family: Questrial;
src: url(Questrial-Regular.otf);
}
div {
font-family: Questrial;
}
input {
font-family: Questrial;
}
text-area {
font-family: Questrial;
}
span {
font-family: Questrial;
}
p {
font-family: Questrial;
}
form {
font-family: Questrial;
}
<style>html {
text-align: center
}
body {
display: inline-block;
margin: 0px auto;
text-align: left;
}
#comment_form {
width: 302px;
}
.label-radio {
font-size: 0.8em;
color: #d8e3e6;
margin-right: 10px;
font-family: questrial;
}
.inputfield3 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.inputfield2 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 0px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.textareafield {
max-height: 350px;
width: 302px;
max-width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 10px 10px 10px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
#g-recaptcha-outer {
width: 302px;
height: 72px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: 16px;
margin: -10px auto 20 auto;
}
#recaptcha-header {
margin: 30px 0px -15px 0px;
color: #d8e3e6;
font-size: 1.0em;
font-family: questrial;
font-size: 0.8em;
letter-spacing: -0.03em;
}
#contact_submit_button {
display: block;
text-decoration: none;
margin: 10px auto 80px auto;
width: 230px;
height: 33px;
padding: 0px 15px 0px 15px;
background-color: rgb(0, 157, 233);
color: #ffffff;
border-radius: 16px;
border: none;
outline: none;
font-family: questrial;
font-size: 1em;
}
.requiredmark {
margin: 0px 0px 0px 295px;
display: inline-block;
color: #d8e3e6;
padding: 20px 0px 0px 0px;
}
.requiredmark2 {
margin: -39px 0px 0px 295px;
display: inline-block;
color: #d8e3e6;
padding: 20px 0px 0px 0px;
}
.requiredmark-radio {
margin: 20px 0px 0px 0px;
display: inline-block;
color: #d8e3e6;
font-family: questrial;
}
.error {
display: none;
}
.error_show {
color: red;
}
input.invalid,
textarea.invalid {
border: 1px solid red;
}
input.valid,
textarea.valid {}
label.error {
margin-top: -10px;
margin-bottom: 30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}
#hiddenRecaptcha-error {
margin-top: 65px!important;
margin-bottom: 30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}
.gender {
border-radius: 16px;
margin-top: 5px;
margin-bottom: 7px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
#gender-error {
float: right;
margin-bottom: 0px!important;
margin-top: 20px!important
}
.errMsg {
color: #ffffff;
}<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{ 'iframeresizer-min.js' | url_asset }}" type="text/javascript"></script>
<script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></script>
</head>
<body>
<form id="comment_form" action="form.php" method="post">
<div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms" required><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>
<input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)">
<br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="email_again" name="email_again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>
<input class="inputfield3" type="text" name="telephone_number" placeholder="telephone number (country code included)">
<br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<textarea id="message_content" name="message_content" class="textareafield" type="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>
<p id="recaptcha-header">before sending, please show us you're real:</p>
<div><span class="requiredmark">*</span>
<div id="g-recaptcha-outer" class="compulsoryfield2">
<div class="g-recaptcha" data-sitekey="mySiteKey" required></div>
</div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<br><br>
<div class="succMsg"></div>
<div class="errMsg"></div>
<input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">
</form>
</body>
</html>次のようMY PHPは次のとおりです。
<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])):
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
//your site secret key
$secret = 'mySecretKey';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success):
//contact form submission code
$gender = !empty($_POST['gender'])?$_POST['gender']:'';
$first_name = !empty($_POST['first_name'])?$_POST['first_name']:'';
$last_name = !empty($_POST['last_name'])?$_POST['last_name']:'';
$company_name = !empty($_POST['company_name'])?$_POST['company_name']:'';
$customer_number = !empty($_POST['customer_number'])?$_POST['customer_number']:'';
$email = !empty($_POST['email'])?$_POST['email']:'';
$email_again = !empty($_POST['email_again'])?$_POST['email_again']:'';
$telephone_number = !empty($_POST['telephone_number'])?$_POST['telephone_number']:'';
$message_subject = !empty($_POST['message_subject'])?$_POST['message_subject']:'';
$message_content = !empty($_POST['message_content'])?nl2br($_POST['message_content']):'';
$to = '[email protected]';
$subject = 'FOTEL | A new contact form has been submitted now';
$htmlContent = "
<h1>Contact request details</h1>
<p>'<b>From: </b>".$gender." ".$last_name.", ".$first_name."</p>
<p><b>Company name: </b>".$company_name."</p>
<p><b>Customer number: </b>".$customer_number."</p>
<p><b>Email address: </b>".$email."</p>
<p><b>Telephone number: </b>".$telephone_number."</p>
<p><b>Message subject: </b>".$message_subject."</p>
<p><b>Message: </b></br></br>".$message_content."</p>
";
// Always set content-type when sending HTML email
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
// More headers
$headers .= 'From:'.$gender.' '.$first_name.' '.$last_name.'<'.$email.'>' . "\r\n".
'Reply-To: '.$email."\r\n";
//send email
@mail($to,$subject,$htmlContent,$headers);
$succMsg = 'Your contact request have submitted successfully.';
else:
$errMsg = 'Robot verification failed, please try again.';
endif;
else:
$errMsg = 'Please click on the reCAPTCHA box.';
endif;
else:
$errMsg = '';
$succMsg = '';
endif;
nl2br($_POST['message_content'])
?>
「currentPage.php？msg = success' – Swellar
@Carl Jan、ありがとう、私はこれをどのようにコード化するのですか？現在のページにリダイレクトしてから、URLにGETを追加します。 – Eddy
すべてが成功した場合（またはそうでない場合）、 'header（ 'Location：currentPage.php？msg ='）'を使用してGET – Swellar