Dans mon formulaire de contact je veux afficher "" Message envoyé, merci de nous contacter! " au bas du conteneur après que l'utilisateur appuie sur le bouton "Envoyer". J'ai inclus la variable php dans une balise div dans mon HTML. mais quand j'appuie sur envoyer, il va à une page blanche vierge au lieu de rester sur la même page et afficher le message. quel pourrait être le problème?Variable PHP ne pas imprimer après avoir appuyé sur 'Envoyer'
/*----------------- START OF FORM ----------------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
\t margin:0;
\t padding:0;
\t box-sizing:border-box;
\t -webkit-box-sizing:border-box;
\t -moz-box-sizing:border-box;
\t -webkit-font-smoothing:antialiased;
\t -moz-font-smoothing:antialiased;
\t -o-font-smoothing:antialiased;
\t font-smoothing:antialiased;
\t text-rendering:optimizeLegibility;
}
body {
\t font-family:"Open Sans", Helvetica, Arial, sans-serif;
\t font-weight:300;
\t font-size: 12px;
\t line-height:30px;
\t color:#777;
/* \t background:#0CF;*/
}
.error {
color: red;
}
.success {
color: #ff9966;
text-align: center;
font-weight: bold;
font-size: 14px;
}
.container5 {
\t max-width:500px;
\t width:100%;
\t margin:0 auto;
\t position:relative;
float: left;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
\t background:#F9F9F9;
\t padding:25px;
\t margin: 0;
}
#contact h3 {
\t color: #F96;
\t display: block;
\t font-size: 30px;
\t font-weight: 400;
}
#contact h4 {
\t margin:5px 0 15px;
\t display:block;
\t font-size:13px;
}
fieldset {
\t border: medium none !important;
\t margin: 0 0 10px;
\t min-width: 100%;
\t padding: 0;
\t width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
\t width:100%;
\t border:1px solid #CCC;
\t background:#FFF;
\t margin:0 0 5px;
\t padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
\t -webkit-transition:border-color 0.3s ease-in-out;
\t -moz-transition:border-color 0.3s ease-in-out;
\t transition:border-color 0.3s ease-in-out;
\t border:1px solid #AAA;
}
#contact textarea {
\t height:100px;
\t max-width:100%;
resize:none;
}
#contact button[type="submit"] {
\t cursor:pointer;
\t width:100%;
\t border:none;
\t background:#0CF;
\t color:#FFF;
\t margin:0 0 5px;
\t padding:10px;
\t font-size:15px;
}
#contact button[type="submit"]:hover {
\t background:#09C;
\t -webkit-transition:background 0.3s ease-in-out;
\t -moz-transition:background 0.3s ease-in-out;
\t transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
\t outline:0;
\t border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
#sendButton{
background-color: rgba(204, 204, 204, 0.52);
color: black;
width: 60px;
font-weight: bold;
}
/*----------------- END OF FORM ----------------- */
<link rel="stylesheet" href="form.css" type="text/css">
<div class="container5">
<form id="contact" action="form_process.php" method="POST">
<h3>Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" name="name" tabindex="1" autofocus>
<span class="error"><?= $name_error ?></span>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="text" name="email" tabindex="2">
<span class="error"><?= $email_error ?></span>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="text" name="phone" tabindex="3">
<span class="error"><?= $phone_error ?></span>
</fieldset>
<fieldset>
<textarea name="message" tabindex="5">
</textarea>
</fieldset>
<fieldset>
<input class=sendButton type="submit" value="Send">
</fieldset>
<div class="success"><?= $success ?></div>
</form>
</div>
PHP:
<?php
// define variables and set to empty values
$name_error = $email_error = $phone_error = "";
$name = $email = $phone = $message = $success = "";
//form is submitted with POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$name_error = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$name_error = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$email_error = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
if (empty($_POST["phone"])) {
$phone_error = "Phone is required";
} else {
$phone = test_input($_POST["phone"]);
// check if e-mail address is well-formed
if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$phone)) {
$phone_error = "Invalid phone number";
}
}
if (empty($_POST["message"])) {
$message = "";
} else {
$message = test_input($_POST["message"]);
}
if ($name_error == '' and $email_error == '' and $phone_error == ''){
$message_body = '';
unset($_POST['submit']);
foreach ($_POST as $key => $value){
$message_body .= "$key: $value\n";
}
$to = '[email protected]';
$subject = 'Contact Form Submit';
if (mail($to, $subject, $message_body)){
$success = "Message sent, thank you for contacting us!";
$name = $email = $phone = $message = '';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
Vous avez écrit action = "form_process.php" dans la balise forme, qui redirigera sur form_process.php après le dépôt de forme. Donc, est-ce le même nom de fichier dans lequel vous avez écrit le code php? –
Ainsi, votre page blanche peut avoir plusieurs raisons. Êtes-vous sûr de passer toutes les validations? – vbrmnd
Vous pouvez poster le formulaire en utilisant [Ajax] (https://en.wikipedia.org/wiki/Ajax_ (programmation)) à la place. Ensuite, vous serez toujours sur la même page et pouvez faire ce que vous voulez quand il est posté. –