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

  1. creseltersome dit :

    tres interessant, merci

  2. Anthony B. dit :

    Bonjour, très intéressent mais je ne comprends pas comment l’intégrer dans ma page php se formulaire ne doit-on pas ajouter la balise ???? avez vous un exemple d’une page PHP fini???

  3. Florentin dit :

    Pour que ce sample de code fonctionne, il faut armoniser la 1ere, la 28ième et la 51ème ligne.

    3 fois $contact ou bien 3 fois $contactForm, mais pas mélanger les 2 😉

  4. Nicolas Verhoye dit :

    Bonjour Florentin, c’est exact merci! J’ai corrigé 😉

  5. dave dit :

    ces exemples m’ont vraiment aidé à comprendre ce superbe outil : https://github.com/kirkouimet/jformer/tree/master/examples

  6. denis dit :

    Bonjour Nicolas,

    Dans ton exemple, c’est ou que tu indiques l’adresse de destination ?

  7. Nicolas Verhoye dit :

    Bonjour denis,
    A la ligne 35 de mon dernier exemple tu as le code « $mail = new PHPMailer(); » c’est juste après cette ligne qu’il faut configurer l’adresse de destination. Tu peux prendre exemple du code PHP de mon article « Envoyer des mails avec PHPmailer » : http://www.nicolas-verhoye.com/2011/02/envoyer-des-mails-avec-phpmailer/

    Bonne journée!

  8. Hamdi dit :

    Bonjour,
    je sui entrain d’utiliser la classe jformer .
    je suis débutant entrain de tester cette class jformer j’ai crée un formulaire tous les test de validation marche très bien mais lorsque je clic sur « send » il m’affiche le bouton processing a la place de send et il n’execute pas la fonction onsubmit()

  9. Hamdi dit :

    Bonjour,
    je n’arrive pas enregistrer mes données après le submit avec la fonction onSubmit de jformer j’ai essayer tous les test possible que je connais mais j’ai pas pu connaitre le problème en plus aucun message d’alerte ou d’erreur n’est afficher

  10. Guillaume dit :

    Salut,

    j’ai testé le Jformer.
    Il est plutôt sympa mais il est par exemple impossible de gérer des erreurs customisées.

    On ne peut pas surcharger par exemple le message Required. sans appeler directement à la fois errorMessageArray sans le script php et dans le js.

    Est-ce que c’est en cours ?

    Merci

  11. Axoloth dit :

    Très intéressant.

    Dommage que JFormer ne semble pas pouvoir s’intégrer dans un environnement MVC :-(

  12. tao dit :

    Bonjour,

    savez vous comment créer une gestion de projet?

  13. aissata sarr dit :

    Bonjour ça me fait un plaisir de vous rencontrer j’ai un probléme avec jquery.
    Comment faire pour créer une page qui est composée de 2 div :div1 et div2 et on doit intégrer un champs de type input et une liste de 10 produits différentes avec un champs qui permet de faire des recherches textuelles dont seule les produits qui ont un nom portant qui contient le texte tapé sont affichés.Dans le div2,on aura un tableau de plusieurs lignes et de 2 colonnes la 1ére colonne est le nom du produit et la 2iém le prix si on clique Bonjour Nicolas ça me fait un plaisir de vous rencontrer j’ai un probléme avec jquery.
    sur un produit automatiquement on remplit le tableau avec le produit sélectionné .en dessous de ce tableau on mettra le bouton calculé qui permet de donner le total des prix d’un produit sélectionné .MERCI DE ME COMPRENDRE JE COMPTE SUR VOUS

Laisser un commentaire

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