GitHub

Ajouter et paramètrer un formulaire

  1. Ouvrez la Vue de la page symbolisée par le fichier .php, dans laquelle vous souhaitez insérer le formulaire, qui est situé dans le dossier layout/front/.

    Les lignes de code ci-dessous vous sont données à titre d'exemple, modifiez-les en fonction de vos besoins. Elles correspondent à la création d'une variable de type array, ou tableau. L'élément info de cette variable est indispensable. il regroupe les informations de votre formulaire. Vous pouvez ensuite ajouter autant d'éléments de champ que vous souhaitez à votre formulaire.

    Chaque NOM d'élément champ ou ID de champ doit etre unique.

    Terminez en appelant la fonction formulaire() prenant deux paramètres : la variable de type array, ou tableau, contenant les informations du formulaire ainsi que la variable $pageSecure générée automatiquement par le framework EasyFrame.
  2. 
    <?php
        
    // Fichier : layout/front/votre_page.php
    
    $arrayForm = array(
                
                "info" => array (
                    // ID du formulaire, doit etre différent pour chaque formulaire, très important !
                    'id' => 'formContact',
                    // Ajoutez une class CSS à votre formulaire ou laissez la valeur vide
                    'class' => 'top50',
                    // Message de confirmation
                    'confirmation' => '<h4><strong>Votre formulaire a bien été réceptionné...</strong></h4>
                    <p>Vous recevrez une réponse très rapidement !</p>',
                    // GET ou POST (choix par defaut si champ vide : POST)
                    'method' => 'post',
                    // Adresse de destination. Laissez vide pour envoyer le formulaire sur la même page
                    'action' => 'contact.html'
                ),
                
                
                // Champ INPUT
                
                // ID du champ, doit etre différent pour chaque champ, très important !
                "field1" => array (
                    // Element INPUT
                    "input" => array (
                        // Type du champ INPUT : text/email/hidden/number/date ... 
                        'type' => 'text',
                        // Attribut NAME du champ INPUT
                        'name' => 'nom',
                        // Chiffre pour une vérification basée sur un nombre de caractères minimum
                        // ou vérification au choix : mail/obligatoire/name/pseudo/number/password/phone_fr/same=NOMINPUT
                        'verif' => 'obligatoire',
                        // Message d'aide relatif au champ. Texte situé sous ce champ.
                        'help' => '',
                        // Attribut VALUE du champ INPUT. Valeur par défaut ou laissez vide.
                        'value' => '',
                        // Attribut PLACEHOLDER du champ INPUT. Laissez vide ou entrez une valeur
                        'placeholder' => 'Votre nom',
                        // LABEL du champ INPUT
                        'label' => 'Nom',
                        // Attribut CLASS du champ INPUT
                        'class' => ''
                    )
                ),
                
                
                // Champ SELECT
                
                // Vous pouvez ajouter autant de champs que vous souhaitez à votre formulaire
                // ID du champ, doit etre différent pour chaque champ, très important !
                "field2" => array (
                    // Element SELECT
                    "select" => array (
                        'name' => 'sexe',
                        'help' => '',
                        'label' => 'Sexe',
                        'class' => '',
                        // Laissez le champ SELECTED vide si aucune préselection / valeur d'un champ OPTION
                        'selected' => 'femme',
                        // Entrez autant de champ 'cle' => 'valeur' que vous souhaitez
                        'option' => array (
                            'homme' => 'Je suis un homme',
                            'femme' => 'Je suis une femme',
                            'animal' => 'Je suis un animal'
                        )
                    )
                ),
                
                
                // Champ CHECKBOX
                
                // Vous pouvez ajouter autant de champs que vous souhaitez à votre formulaire
                // ID du champ, doit etre différent pour chaque champ, très important !
                "field3" => array (
                    // Element CHECKBOX
                    "checkbox" => array (
                        'name' => 'langage',
                        'help' => '',
                        // Verif pour les checkbox, option : vide ou 'obligatoire'
                        'verif' => '',
                        'label' => 'Langage',
                        'class' => 'top30',
                        // Liste des INPUT type CHECKBOX /  'valeur' => 'description' OU 'valeur,checked' => 'description'
                        'input' => array (
                            'html,checked' => 'Je maitrise le HTML et le CSS',
                            'php,checked' => 'Je maitrise le PHP',
                            'js' => 'Je maitrise le JavaScript'
                        )
                    )
                ),
                
                
                // Champ RADIO
                
                // Vous pouvez ajouter autant de champs que vous souhaitez à votre formulaire
                // ID du champ, doit etre différent pour chaque champ, très important !
                "field4" => array (
                    // Element RADIO
                    "radio" => array (
                        'name' => 'experience',
                        'help' => '',
                        'label' => 'Experience',
                        'class' => '',
                        // Laissez le champ CHECKED vide si aucune préselection / valeur d'un ou plusieurs CHECKED (séparés par une virgule) 
                        'checked' => 'passionne', 
                        // Liste des INPUT type RADIO : 'valeur' => 'description'
                        'input' => array (
                            'debutant' => 'Je découvre la programmation',
                            'passionne' => 'Je suis un passionné avec quelques experiences',
                            'pro' => 'Je suis un professionnel'
                        )
                    )
                ),
                
                
                // Champ TEXTAREA
                
                // Vous pouvez ajouter autant de champs que vous souhaitez à votre formulaire
                // ID du champ, doit etre différent pour chaque champ, très important !
                "field9" => array (
                    // Element TEXTAREA
                    "textarea" => array (
                        'name' => 'message',
                        'help' => '',
                        'label' => 'Message',
                        'class' => '',
                        // Nombre de ligne du champ TEXTAREA
                        'row' => '10',
                        // Verif pour les TEXTAREA, option : vide ou 'obligatoire'
                        'verif' => 'obligatoire',
                        'placeholder' => '',
                        'value' => ''
                    )
                ),
                
                
                // Champ SUBMIT
                
                // Vous pouvez ajouter autant de champs que vous souhaitez à votre formulaire
                // ID du champ, doit etre différent pour chaque champ, très important !
                "field5" => array (    
                    // Bouton SUBMIT
                    "submit" => array (
                        'text' => 'Soumettre',
                        'class' => 'primary'
                    )
                )
                
            );
        
            // Appel de la fonction affichant le formulaire
            // Le paramètre $pageSecure est défini automatiquement par EasyFrame
            formulaire($arrayForm, $pageSecure);
        
    ?>
    
  3. Relier le Model du formulaire à votre page depuis le fichier controleur.php
  4. 
    // Fichier controleur.php
    // Model par page
    
    switch($pageSecure) {
          
        // Indiquez le nom de votre page  
        case "contact":
           
            // Model pour le formulaire
            require_once('library/form.php');
            
            break;
            
    } 
     
    

Vérification des champs du formulaire

  1. Pour appliquer une vérification spécifique à un champ, il vous faut indiquer la méthode de vérification propre à ce champ dans l'array, ou tableau, de la page du formulaire. Reprenez la variable créée précédemment pour l'affichage du formulaire et ajoutez la valeur représentant un type de vérification à la clé verif :
  2. 
    // Fichier : layout/front/votre_page.php
    
    // ID du champ, doit etre différent pour chaque champ, tres important !
    "field1" => array (
        // Element INPUT
        "input" => array (
            'type' => 'text',
            'name' => 'nom',
            
            // 'verif' => '5'             : Nombre de caractères minimum
            // 'verif' => 'mail'          : La valeur doit être une adresse mail  
            // 'verif' => 'obligatoire'   : Le champ est obligatoire et contient une valeur quelconque
            // 'verif' => 'name'          : La valeur doit être un nom ou prénom 
            // 'verif' => 'pseudo'        : La valeur doit être un pseudonyme, comprise entre 5 et 20 caractères
            // 'verif' => 'number'        : La valeur doit être un nombre
            // 'verif' => 'password'      : Mot de passe avec UNE majuscule minimum, Un chiffre minimum
            //                              La valeur doit être comprise entre 6 et 20 caractères
            // 'verif' => 'phone_fr'      : La valeur doit être un numéro de téléphone français de 10 chiffres
            
            // 'verif' => 'same=motpasse' : La valeur de ce champ doit etre égale à la valeur d'un autre champ
            //                              que l'on définira par "same=nom_du_champ"
            //                              Par exemple pour entrer deux fois son mot de passe lors d'une inscription
            
            // Laisser la valeur vide si vous ne souhaitez appliquer aucune vérification
            
            // Dans l'exemple ci-dessous, la vérification renverra TRUE si la valeur entrée a 5 caractères minimum
            // Si la vérification est fausse, alors le formulaire ne sera pas traité et ce champ sera en surbrillance rouge
            'verif' => '5',
            
            'help' => '',
            'value' => '',
            'placeholder' => 'Votre nom',
            'label' => 'Nom',
            'class' => ''
        )
    )
    
    
  3. Comme pour l'affichage du formulaire, il vous faut relier le Model de vérification de formulaire à votre page depuis le fichier controleur.php. Une fois ce Model lié à votre page, il vous faudra appeler la fonction traitement_formulaire() qui prendra deux arguments en paramètres :
    • La variable $_POST['send'], sécurisée par la fonction htmlspecialchars.
      Cette variable contiendra automatiquement les données des champs du formulaire envoyé.
    • ID du formulaire qui subira le traitement.
      l'ID de votre formulaire est défini dans l'élément INFO de la variable de ce formulaire
  4. 
    // Fichier controleur.php
    // Model par page
    
    switch($pageSecure) {
          
        // Indiquez le nom de votre page  
        case "contact":
           
            // Model pour le traitement du formulaire
            require_once('library/form_process.php');
            
            // Id du formulaire qui subira un traitement
            $id_form_send = "formContact";
            
            // Appel de la fonction du MODEL "form_process.php" effectuant le traitement du formulaire
            traitement_formulaire(htmlspecialchars($_POST['send']), $id_form_send);
           
            // Model pour le formulaire
            require_once('library/form.php');
            break;
            
    } 
     
    

Réception du formulaire par mail

Pour recevoir les différents formulaires envoyés par vos visiteurs sur votre mail, il vous faudra ajouter un dernier paramètre à la fonction traitement_formulaire() : l'adresse mail à laquelle le formulaire doit être envoyé.

Sur l'exemple ci-dessous, le formulaire sera traité en fonction des vérifications appartenant à chaque champ puis, si aucune erreur n'est détectée, ce formulaire sera envoyé à l'adresse indiquée par la variable $mail qui sera fournie en paramètre à la fonction traitement_formulaire().

Indiquez ce paramètre depuis le fichier controleur.php :


// Fichier controleur.php
// Model par page

switch($pageSecure) {
      
    // Indiquez le nom de votre page  
    case "contact":
       
        // Model pour le traitement du formulaire
        require_once('library/form_process.php');
        $id_form_send = "formContact";
        
        // Ajoutez le paramètre d'adresse mail pour la réception du formulaire
        $mail = "creatroyes@gmail.com";
        
        // Appel de la fonction du MODEL "form_process.php" effectuant le traitement du formulaire
        traitement_formulaire(htmlspecialchars($_POST['send']), $id_form_send, $mail);
       
        // Model pour le formulaire
        require_once('library/form.php');
        break;
        
} 
 

Configurer le mail du formulaire

Vous pouvez configurer ou modifier le mail que vous recevrez à chaque envoi de formulaire depuis le fichier form_mail.php du dossier Library/


// Fichier library/form_mail.php
// Envoi du formulaire par mail

function envoi_formulaire($MailTo, $contenu_form, $MailSubject) {
    
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";

    $MailBody = "
        <html>
            <head>
                <meta charset=\"UTF-8\">
                <title>".$MailSubject."</title>
                <style type=\"text/css\">
                    body { padding:10px;font-family:'Helvetica', Arial;font-size:16px; }
                    h1 { color:#fff;background:#555;padding:20px;idth:100%;font-size:1.5em; }
                    ul { list-style-type:none;font-size:14px;color:#777;margin:0;padding:20px;border:1px solid #ccc;background:#f1f1f1; }
                    ul li { margin-bottom:5px; }
                    ul li strong { font-weight:bold; color:#111;margin-left:5px; }
                </style>
            </head>
            <body>".$contenu_form."</body>
        </html>";

    mail($MailTo, $MailSubject, $MailBody, $headers);    
    
}