jFormer : le framework jQuery pour créer des formulaires dynamiques

jformer

jFormer est un framework qui permet de créer des formulaires dynamiques très élégants en quelques minutes. Ce framework s’occupe aussi de la validation coté client et coté serveur, il propose le chargement de contenu AJAX, s’occupe de la prévention contre les bots (pas besoin de CAPTCHAs) et beaucoup d’autres choses encore. Nous allons voir dans cet article comment créer notre tout premier formulaire avec jFormer.

Nous allons créer un formulaire de contact assez simple comme celui-ci :

Exemple de formulaire jFormer

Installation du framework jFormer

Pour télécharger le framework vous pouvez aller sur le site de l’auteur en cliquant ici.
Décompressez l’archive sur votre serveur, et creez une nouvelle page contact.php
Nous allons installer le framework jFormer sur cette page web.
Il y a 3 fichiers à insérer entre les balises head :

  • La feuille de style CSS : jformer.css
    <link rel="stylesheet" type="text/css" href="/css/jformer.css"></link>
  • La librairie jQuery : jquery.js
    <script type="text/javascript" src="/js/jquery.js"></script>
  • Le fichier JavaScript de jFormer : jformer.js (à placer toujours après jquery.js) :
    <script type="text/javascript" src="/js/jformer.js"></script>

Ensuite nous devons nous assurer que la classe PHP de jFormer est bien présente :

require_once('/classes/jformer.php');

Création de notre formulaire de contact

1) Toujours sur la même page, nous allons créer un nouvel objet PHP pour notre nouveau formulaire.
Deux paramètres sont à prendre en considération ici :

  • L’id du formulaire (par exemple : contactForm)
  • Les options facultatives : nom du bouton de validation, personnalisation css…
$contactForm = new JFormer('contactForm', array(
    'submitButtonText' => 'Send',
    'style' => 'width: 650px;',
));

Maintenant que notre objet est en place il faut créer nos champs de formulaire.
Dans jFormer un champ de formulaire est appelé « Composant » .
Les composants peuvent être :

  • Des simples champs de saisie (type input)
  • Des zones de saisie (type textarea)
  • Des boutons radios
  • Des cases à cocher
  • Des datepicker

Ainsi dans notre cas nous avons besoins de 4 composants :

  • Le nom : nous utiliserons un champ texte.
  • Le mail : nous utiliserons un champ texte.
  • Le sujet : nous utiliserons un champ texte.
  • Le message : nous utiliserons une zone de saisie (textarea).

La création d’un composant sur jFormer se présente comme ceci :

/*Exemple pour un champ texte*/
$nom = new JFormComponentSingleLineText('name', 'Votre nom :', array(
    'validationOptions' => array('required')
));

Trois paramètres sont à prendre en considération :

  • Le nom du champ : « name »
  • Le label du champ : « Votre nom : »
  • Options supplémentaires, ici on précisera les règles de validation : « required » pour obligatoire.

Il ne nous reste plus qu’à créer les 3 derniers composants : email, sujet et message.

/*Email (input text)*/
$email = new JFormComponentSingleLineText('email', 'Votre email :', array(
    'validationOptions' => array('required', 'email')
));

/*Sujet (input text)*/
$sujet = new JFormComponentSingleLineText('subject', 'Le sujet :', array(
    'validationOptions' => array('required')
));

/*Message (textarea)*/
$message = new JFormComponentTextArea('message', 'Votre message :', array(
    'validationOptions' => array('required'),
    'height' => 'medium',
    'width' => 'longest'
));

Il faut à présent relier ces champs à notre objet de formulaire $contact comme ceci :

$contactForm->addJFormComponentArray(array(
   $nom,   $email,   $sujet,   $message
));

2) Maintenant que tous les composants/champs sont prêts, il faut s’occuper de ce qu’il va se passer quand on soumettra le formulaire avec succès. Dans notre cas nous allons envoyer un email.
Pour cela nous avons juste besoin de créer une nouvelle fonction qui devra s’appeler onSubmit, comme suit :

function onSubmit($formValues) {

    /* On supposera qu'on utilise une librairie comme PHPMailer */
    $mail = new PHPMailer();

    /*  Si jamais il y a un problème dans l'envoi */
    if(!$mail->Send()) {
        $return = array('status' => 'failure', 'response' => $mail->ErrorInfo);
       /* Message de retour en HTML  */
        $return['failureNoticeHtml'] = "Désolé envoi impossible!!"; 
    }
    else {
        $return = array('status' => 'success', 'response' => 'Message envoyé');
       /* Message de retour en HTML  */
        $return['successPageHtml'] = '<p>Merci pour votre message!!</p>'; 
    }

    return $return;
}

Et on termine par une dernière ligne de code qui servira à appeler la fonction onSubmit quand on soumettra le formulaire.

$contactForm->processRequest();

Conclusion

Voila notre formulaire de contact est à présent terminé :

$contactForm = new JFormer('contactForm', array(
    'submitButtonText' => 'Send',
    'style' => 'width: 650px;',
));

/*Nom (input text)*/
$nom = new JFormComponentSingleLineText('name', 'Votre nom :', array(
    'validationOptions' => array('required')
));

/*Email (input text)*/
$email = new JFormComponentSingleLineText('email', 'Votre email :', array(
    'validationOptions' => array('required', 'email')
));

/*Sujet (input text)*/
$sujet = new JFormComponentSingleLineText('subject', 'Le sujet :', array(
    'validationOptions' => array('required')
));

/*Message (textarea)*/
$message = new JFormComponentTextArea('message', 'Votre message :', array(
    'validationOptions' => array('required'),
    'height' => 'medium',
    'width' => 'longest'
));

$contactForm->addJFormComponentArray(array(
   $nom,   $email,   $sujet,   $message
));

function onSubmit($formValues) {

    /* On supposera qu'on utilise une librairie comme PHPMailer */
    $mail = new PHPMailer();

    /*  Si jamais il y a un problème dans l'envoi */
    if(!$mail->Send()) {
        $return = array('status' => 'failure', 'response' => $mail->ErrorInfo);
       /* Message de retour en HTML  */
        $return['failureNoticeHtml'] = "Désolé envoi impossible!!"; 
    }
    else {
        $return = array('status' => 'success', 'response' => 'Message envoyé');
       /* Message de retour en HTML  */
        $return['successPageHtml'] = '<p>Merci pour votre message!!</p>'; 
    }

    return $return;
}
$contactForm->processRequest();

C’est un exemple assez simple, le framework permet de réaliser des choses bien plus compliqué. Vous trouverez plus de documentation sur le site officiel jFormer ainsi qu’une démonstration ici.

Nicolas Verhoye

Développeur Magento, Freelance

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *