Formulaire : Message et CSS

Bonjour,

Je viens de créer une page avec un formulaire, j'ai essayé de m'envoyer un mail avec et sa marche pas trop mal. Les deux soucis que je rencontre sont les suivants :

• Donner un style aux zones de texte. J'avais réussi sur mes pages HTML mais depuis que j'ai transformé mes pages en PHP, ça ne marche plus bizarrement.

=> Page PHP avec ce que j'obtiens maintenant : http://www.aurelienhamel.com/sites/PHP/contact.php

=> Page HTML avec ce que j'aimerais retrouver sur ma page PHP : http://www.aurelienhamel.com/sites/test/contact.html

• Deuxième souci, j'ai un peu de mal avec les messages qui notifient si le formulaire et bien ou mal rempli, que le mail à bien été envoyé, etc... J'aimerais que ces messages s'affiche juste au dessus de mon bouton "Envoyer" sur la page du formulaire mais pour le moment il s'ouvre dans une nouvelle page blanche et quand j'ai un message d'erreur, j'ai une ligne Warning + le message d'erreur sur page blanche :

Warning: mail() [function.mail]: SMTP server response: 501 <dd>: sender address must contain a domain in E:\kunden\homepages\32\d466300239\www\sites\PHP\traitement.php on line 49
Suite à un problème technique, votre message n a pas été envoyé

J'ai essayé de créer une autre page "contact_sent.php" mais je ne vois pas comment l'associer au bouton.

Page contact-sent.php :

<?php
	
$title_page = 'Formulaire de contact';
$description_page = '';
$keywords_page = '';
	
include('/includes/header.php'); 
	
?>

<div id="global">
  
  	<div id="contenu">
    
			<p class="center" style="padding-top: 10px">Votre message a bien été envoyé, une réponse vous sera donnée dans les plus brefs délais.</p>
	</div>

</div>

<?php include('/includes/footer.php');

?>

Voila pour mes deux problèmes, j'essaye de voir de mon côté mais pour le moment je bloque. Si quelqu'un pouvais m'éclairer.

Merci !

Petit up !

plop.

Pour le style du formulaire, tes input n'ont plus la class ".champ_formulaire" que tu as sur la version statique.

Je regarde pour ta deuxième question

[EDIT]
Alors ce que je te propose :
1) Dans ton formulaire, tu mets comme action contact.php.
tu construits ton formulaire normalement, et pour la validation, je te conseil d'afficher en dur directement dans le HTML tes messages.
Ainsi, tu pourras les CSS-er comme tu le sens.

2) Pour valider ton formulaire, tu passe par la condition :

if(!empty( $_POST ) )
{
// validation du form
}

Si $_POST n'est pas vide, alors tu vérifies que les champs sont bien remplis.

3) Pendant ta validation, tu crées un tableau d’erreur, que tu mettra à la place des message d'erreurs statiques dans ton HTML.

4) si il n'y a pas d'erreur, soit tu redirige effectivement vers une page d'envois du mail, ou de confirmation, soit tu reste toujours sur contact.php, et tu remplace le formulaire par le message de vaidation.

Après il y a surement d'autre méthode pour le faire
Modifié par saajuck (26 Apr 2013 - 10:40)

pour la version PHP je vais avoir du mal ^^'
Parse error: syntax error, unexpected '<' in E:\kunden\homepages\32\d466300239\www\sites\PHP\contact.php on line 19


j'attend que tu le répare pour pouvoir te répondre

C'est fait !

alors !

je te propose d'enlever le script ici :

<input type="bouton" height="26px" value="Envoyer" src="Images/b_envoyer.jpg" onclick="window.location.href='contact_sent.php'">

De cette façon, ton formulaire dirigera bien vers contact.php, défini dans le paramètre 'action'

Ensuite, tu vas valider les données que va envoyer l'utilisateur :
tu commences par verrifier que la variable $_POST existe (que le formulaire a été envoyé):

if(!empty( $_POST ) )
{
// validation du form
}

Ensuite tu va valider chacun des champs :

if(!empty( $_POST ) )
{
       $nom = $_POST["nom"];
       //Composition des messages d'erreur
       if($_POST["nom"] == "")
       {
              $errors["nom"]= "veuillez préciser un nom";
       }
       
}

Tu vas faire une clé dans ton tableau errors pour chaque champs a valider.


Ensuite 2 cas :
Soit il y a des erreurs, au quel cas tu les affiches dans ton document html :

<?php foreach ($errors as $error) :?>
   			<li> <?php echo($error);?>
    		</li>
   		 <?php endforeach;?>

Soit il n'y en a pas et tu envoies la requête pour envoyer le mail :

	if(empty($errors))
	{
                 //Envoie du mail
        }

*Est perdu*

Je vais aller voir sur des sites parce que je comprend vraiment rien. :s

ton script est bon.
Je reprend :

<?php 
	
////////////////////////////////
//Connexion a la base de donnée
////////////////////////////////
	

$title_page = 'Formulaire de contact';
$description_page = '';
$keywords_page = '';

////////////////////////////////
	
include('includes/header.php'); 
	
////////////////////////////////
//Envoi du mail
////////////////////////////////
// Ici, tu verifie que la variable $_POST n'est pas vide. Elle exite lorsque l'utilisateur a validé ton formulaire, c'est donc a partir de la que tu va pouvoir valider les données envoyées
if(!empty( $_POST ) )
{
       //là, tu assigne a une variable ce qui était dans l'input "nom"
       $nom = $_POST["nom"];
 
       //Ici tu demande simplement si cet input est vide
       if($_POST["nom"] == "")
       {
              // si c'est le cas, alors on créé une entré dans le tableau d’erreur. 
              $errors["nom"]= "veuillez préciser un nom";
       }
	   
          // mème chose pour les autres champs
	   $prenom = $_POST["prenom"];
       
       if($_POST["prenom"] == "")
       {
              $errors["prenom"]= "veuillez préciser un prénom";
       }
	   
	   $email = $_POST["email"];
 
       if($_POST["email"] == "")
       {
              $errors["email"]= "veuillez préciser une adresse valide";
       }	   
       
	   $sujet = $_POST["sujet"];
 
       if($_POST["sujet"] == "")
       {
              $errors["sujet"]= "veuillez préciser un sujet";
       }	   
	
	   $message = $_POST["message"];
 
       if($_POST["message"] == "")
       {
              $errors["message"]= "veuillez préciser un message";
       }	 	
	
       // La, tu demande si le tableau d'erreur est vide. Tu ne vas pas verrifier que le tableau est vide sans avant savoir si des données on été envoyé ? alors on le met dans la condition qui verifie l'existence de $_POST
       if(empty($errors))
	
       {
		$mail = 'contact@aurelienhamel.fr';
		$sujet = $_POST['sujet'];
		$mail_client = $_POST['email'];
		$nom = $_POST['name'];
		$message = nl2br($_POST['message']);
		$header = 'From: '. $nom .' <'. $mail_client .'>' . "\r\n" .
		'Reply-To: '. $mail_client .'' . "\r\n" .
		'Content-type: text/html; charset=utf-8' . "\r\n";
    
		mail($mail, $sujet, $message, $header);
		redirect('contact.php');
		
       }
	
}// ici tu ferme ta première condition qui dit "y a t'il des données envoyées ? autrement dit, $_POST existe t'il ?

?> 

est-ce plus clair ?

Effectivement c'est plus clair. Mais je tiens à préciser que je suis vraiment un "novice" dans la programmation, même si je connais quand même certaine choses !

J'ai plus qu'à :

- régler le design du bouton envoyer
- placer la phrase qui doit apparaître au dessus du bouton s'il y a une erreur ou si le formulaire est bien envoyé
- les informations du mails (car quand je reçois une réponse j'ai que le message, pas les coordonnées)

exactement

Par contre pour cette partie de code :

<?php foreach ($errors as $error) :?>
   							
<li> <?php echo($error);?></li>

<?php endforeach;?>

Il faut la mettre au niveau de chaque champ qui peut comporter une erreur dans le code HTML ou au dessus du bouton envoyé comme récapitulatif des champs incorrects ?

Merci

Salut,

Je viens de lire la conversation sur le sujet.
Faire valider un formulaire en php n'est pas très agréable pour le visiteur du site (temps de chargement, bug à l'envoi...).

Je te conseil de le faire en javascript (à l'aide de jquery c'est assez facile) :

Tu met ton formulaire normal, tu met à l'EXTERIEUR du formulaire un bouton qui te dirige vers ta fonction javascript :

 <button onclick="validation_du_formulaire();">Envoyer</button>  

Puis tu fais ta fonction javascript du style :

function validation_du_formulaire(){
    var msg = "";

    if( $('#champs_nom').val() == ""){ 
          //Regarde la syntaxe JQuery : ca à l'air mais c'est pas compliquer
          msg .= "Merci de renseignez votre nom \n";
    }

    //Pareil pour tout les champs que tu veux tester

    //A la fin de ta fonction
    if( msg == ""){
          $('#id_de_ton_formulaire').submit();
    } else {
          alert(msg);
    }
}

PS: si tu veux te mettre à JQuery, je sais pas si tu connais mais tu as juste un fichier à recupérer sur leur site..
Bon courage!

Bon... alors je me suis porté sur autre chose finalement.

J'ai modifié mon code dans le fichier contact.php, j'ai créé une page contact_sent.php et également script.js.

Pour que ce soit clair, voici quelques codes :

contact.php

<form id="formulaire" action="contact_sent.php" method="post">
                
<label for="name">Nom *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="name" name="name" value="Nom" size="30" /><br /><br />
                    
<label for="firstname">Prénom *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="firstname" name="firstname" value="Prénom" size="30" /><br /><br /> 
                    
<label for="phone">Tél. *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="phone" name="phone" value="Téléphone" size="30" /><br /><br />                                      
             
<label for="email">Email *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="email" name="email" value="Email" size="30" /><br /><br />
                    
<label for="sujet">Sujet *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="sujet" name="sujet" value="Sujet" size="30" /><br /><br />                    
             
<label for="message">Message *</label> <br /> <br />
<textarea class="champ_formulaire" id="message" rows="6" cols="45" name="message"></textarea><br /><br />
             
<input type="submit" value="Envoyer" />
                    
</form> 

contact_sent.php

<?php
 
////////////////////////////////
//Connexion a la base de donnée
////////////////////////////////
	

$title_page = 'Contactez-moi - Aurélien Hamel';
$description_page = '';
$keywords_page = '';

////////////////////////////////
	
	
include('includes/header.php');  

 
// nettoyage des variables
$nom = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$prenom = filter_var($_POST['firstname'], FILTER_SANITIZE_STRING);
$telephone = filter_var($_POST['phone'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$sujet = filter_var($_POST['sujet'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
 
// on verifie que le nom n'est pas vide
if($nom == "")
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Veuillez entrer votre nom",
                            "input" => "name"
    ));
    return false;
}


// on verifie que le prénom n'est pas vide
if($prenom == "")
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Veuillez entrer votre prénom",
                            "input" => "firstname"
    ));
    return false;
}


// on verifie que le téléphone n'est pas vide
if($telephone == "")
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Veuillez entrer un numéro",
                            "input" => "phone"
    ));
    return false;
}


// on verifie que l'email est un email valide
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Veuillez entrer un email valide",
                            "input" => "email"
    ));
    return false;
}
 
 
// on verifie que le sujet n'est pas vide
if($sujet == "")
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Veuillez entrer votre message",
                            "input" => "sujet"
    ));
    return false;
}

 
// on verifie que le message n'est pas vide
if($message == "")
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Veuillez entrer votre message",
                            "input" => "message"
    ));
    return false;
}
 
 
// construction du message
$content = $nom."<br /><br />".$prenom."<br /><br />".$telephone."<br /><br />".$email."<br /><br />".$sujet."<br /><br />".$message;
 
 
// envoi de l'email
ini_set('sendmail_from', 'tonadresse@serveur.com'); 

if(mail("contact@aurelienhamel.fr", "Aurélien Hamel", $content))
{
    echo json_encode(array(
                            "result" => true
    ));
    return true;
}
else
{
    echo json_encode(array(
                            "result" => false,
                            "message" => "Votre message n'a pu être envoyé"
    ));
    return false;
}
 
 
include('includes/footer.php');


?>

script.js

$(document).ready(function(){
 
    $("#ajax_form").submit(function(e){
        var scope = $(this);
        var nom = $("nom").val();
		var prenom = $("firstname").val();
		var telephone = $("phone").val();
        var email = $("email").val();
		var sujet = $("sujet").val();
        var message = $("message").val();
 
        $.ajax({
            type: scope.attr("method"),
            url: scope.attr("action"),
            data: scope.serialize(),
            dataType: "json",
            success: function(data){
                if(data.result)
                {
                    scope.html("Message envoyé, merci");
                }
                else
                {
                    alert(data.message);
                    $(data.input).focus();
                }
            }
        });
 
        e.preventDefault();
    });
 
});

Voila, après avoir établi ces nouveaux éléments, voici les petits soucis :

1 • Quand j'envoie le formulaire correctement, une page s'ouvre avec {"result":true}

2 • Quand j'envoie le formulaire avec une erreur, j'ai ce message {"result":false,"message":"Veuillez entrer un email valide","input":"email"}

3 • Quand je reçois le mail dans ma boite, le contenu ne tiens pas compte du HTML et du coup les renseignements sont à la suite avec des balises </ br>

4 • J'aimerais que le message de validation ou les messages d'erreurs s'affichent soit en haut du bouton Envoyer, soit en remplacement du formulaire sur la page contact.php.

Je me suis aidé de ça : http://www.codertuts.com/soumettre-un-formulaire-en-ajax-avec-jquery-51.html

Merci !
Modifié par DKProject (29 Apr 2013 - 15:53)

Salut,

Je vois que tu es partie sur de l'ajax, mais c'est un peu lourd pour ce que tu veux faire.
Voilà ce que je te conseil :
-Dans ton contact.php

<form id="formulaire" action="contact_sent.php" method="post">
                
<label for="name">Nom *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="name" name="name" value="Nom" size="30" /><br /><br />
                    
<label for="firstname">Prénom *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="firstname" name="firstname" value="Prénom" size="30" /><br /><br /> 
                    
<label for="phone">Tél. *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="phone" name="phone" value="Téléphone" size="30" /><br /><br />                                      
             
<label for="email">Email *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="email" name="email" value="Email" size="30" /><br /><br />
                    
<label for="sujet">Sujet *</label> <br /> <br />
<input class="champ_formulaire" type="text" id="sujet" name="sujet" value="Sujet" size="30" /><br /><br />                    
             
<label for="message">Message *</label> <br /> <br />
<textarea class="champ_formulaire" id="message" rows="6" cols="45" name="message"></textarea><br /><br />

</form>            
<!-- Tu ferme ton formulaire -->

<!-- Tu met une div pour tes messages d'erreur, je te conseillerai de la mettre sous le bouton ou de laisser la taille de la div souhaiter pour ne pas que le bouton se décale à l'écriture ou sinon tu peux colorer les champs mal remplis -->
<div id='display_error'></div>
<button onclick='validate_formulaire();'>Envoyer<button> 

-Dans ton fichier javascript.js

//Cette fonction vient de  http://www.commentcamarche.net/forum/affich-812243-verifier-l-email-dans-un-formulaire  mais tu peux en trouver partout sur google
function is_valide_mail(mailteste)
{
	var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');

	if(reg.test(mailteste))
	{
		return(true);
	}
	else
	{
		return(false);
	}
}

//Celle-ci sert à valider ton formulaire
function validate_formulaire(){
    var msg = "";
    
    //oubli pas le # devant ton id de champs pour le selectionner
    if( $('#nom').val() == ""){ 
          msg .= "Merci de renseignez votre nom \n";
         
          //Tu peux aussi colorer le champs
          //$('#nom').css('background-color', 'red');
    }

    if( $('#firstname').val() == ""){ 
          msg .= "Merci de renseignez votre prénom \n";
    }


    if( $('#phone').val() == ""){ 
          msg .= "Merci de renseignez votre prénom \n";
    }

    if( ! is_valide_mail($('#email').val())){ 
          msg .= "Merci de renseignez un email valide \n";
    }


    //A la fin de ta fonction
    if( msg == ""){
          $('#formulaire').submit();
    } else {
          alert(msg);
          //OU avec la div display_error au dessus de ton bouton
          //$('#display_error').append(msg);
    }
}

-Dans ton contact_sent.php

<?php
////////////////////////////////
//Connexion a la base de donnée
////////////////////////////////
	

$title_page = 'Contactez-moi - Aurélien Hamel';
$description_page = '';
$keywords_page = '';

////////////////////////////////
	
	
include('includes/header.php');  

 
// nettoyage des variables
$nom = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
$prenom = filter_var($_POST['firstname'], FILTER_SANITIZE_STRING);
$telephone = filter_var($_POST['phone'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$sujet = filter_var($_POST['sujet'], FILTER_SANITIZE_STRING);
$message = filter_var($_POST['message'], FILTER_SANITIZE_STRING); 
 
// construction du message
$content = $nom."<br /><br />".$prenom."<br /><br />".$telephone."<br /><br />".$email."<br /><br />".$sujet."<br /><br />".$message;
 
 
// envoi de l'email
ini_set('sendmail_from', 'tonadresse@serveur.com'); 

if(mail("contact@aurelienhamel.fr", "Aurélien Hamel", $content))
{
    echo "l'email à bien était envoyé";
}
else
{
    echo "Une erreur est survenue, merci de réitéré votre demande...";
}
 
include('includes/footer.php');

?>

Voilà, cela devrai régler le problème des messages d'erreurs.

Après perso je pense que la page contact_sent.php est inutile :
Tu peux mettre un input hidden dans ton formulaire :

 <input type='hidden' name='formulaire_est_valider' value='oui' /> 

Tu redirige ton formulaire sur la page courante :

 <form id="formulaire" action="#" method="post"> 

Et dans ton contact.php tu test la variable :

<?php 
    if( isset( $_POST['formulaire_est_valider'] ) && $_POST['formulaire_est_valider'] == 'oui'){
        //code de la page contact_sent.php
    } else {
        //Tu affiche ta page contact.php
    }
?>

Ceci serait plus simple pour le maintient de ton site dans l'avenir.

En espérant t'avoir aider..