Modification du plugin Form Manager selon vos besoins graphiques

wordpress-logo-stacked-rgb

Utilisation du plugin wordpress Form manager 

Le plugin WordPress Form Manager est un outil de création de formulaire qui permet de recueillir et de télécharger les données envoyées sur un site WordPress.

Ses moyens:

  • Validation
  • Champs obligatoires
  • Notification par e-mail après soumission (personnaliser)
  • Modèle d'affichage du formulaire

Les modèles de type d’élément:

  • Champs de texte
  • Zone de texte
  • Menu déroulant
  • Boutons radio
  • Checkbox / Checkbox List
  • Select
  • Upload files
  • reCaptcha

Compatibilité:

  • WordPress 3.0.0 jusqu' à 4.0.1

Cliquez ici pour télécharger et voir le manuel d'installation et plus d'infos.

Les avantages  :

  •  La possibilité d’exporter les données enregistrées du formulaire (format csv ) selon les filtres de données
Page de téléchargement des données soumit par la formulaire

Page de téléchargement des données soumit par la formulaire

  • Le formulaire est ajouté par utilisation d’un format shortcode simple
<?php
/**
 *  insertion du formulaire form-contact
 */
echo do_shortcode('[form form-contact]');
?>
  • Il existe déjà une validation (JavaScript) pour chaque type d’élément du formulaire

Les inconvénients :

  • Le design du formulaire est simple
  • Pas de validation PHP
  • Les erreurs de validation sont affichées avec un « alerte JavaScript »

Les Solutions:

  • Le design du formulaire :
              Étapes de configuration du nouveau formulaire:
  1. Activez le plugin form manager
  2.  Créez votre  propre formulaire et les validations respectives

    Remplir la formulaire

    Remplir la formulaire

  3. Remplir les "nickname" de chaque champ car ceux-ci nous aident à parcourir les labels, attribut name en cliquant sur l'onglet Form-extra dans la colonne "identifiant".articles3
  4. Dans les moyens ci-dessus on a vu qu'il est possible de créer un modèle d'affichage du formulaire, on peut alors l'exploiter. Tout d'abord, pour créer ce nouveau Template il faut se rendre dans wp-content/plugins/wordpress-form-manager/templates ,le nom du fichier (précisément du php)  commence toujours par "fm-form-<nom_du_formulaire>" par exemple fm-form-contact.php . De plus les éléments obligatoires qui figurent dans le fichier pour que le plugin le reconnaisse comme modèle de formulaire sont:

 

<?php
/*
Template Name: Formulaire de contact 
Template Description: formulaire de contact presse
Template Type: form
option: $showFormTitle, checkbox
label: Show form title:
	default: checked
option: $showBorder, checkbox
	label: Show border:
	default: checked
option: $labelPosition, select
	label: Label position:
	description: Labels can be placed to the left or above each field
	options: 'left' => 'Left', 'top' => 'Top'
	default: left
option: $labelWidth, text
	label: Label width (in pixels):
	description: Applies to checkboxes, and when labels are to the left
	default: 200

Template Name: Formulaire de contacts presse 

Le nom du modèle est visible dans le Back Office

Template Description: formulaire de contacts presse

Description du Template

Le reste

Ce sont les valeurs par défaut du plugin form manager.

Pour parcourir les labels, attribut name et les champs qui sont requis pour ajout "astérisque" ou "*" par code

<?php 
//initilisation array pour stocké les labels
$form_labels = array(); //tableau d'element string
//initialisation array pour stocké les names 
$form_items = array(); //tableau d'élément alphanumerique
//initialisation array pour stocké 
$form_required = array(); //tableau d'element boolean

while(fm_form_have_items()): fm_form_the_item();
    $form_items[fm_form_the_nickname()] = fm_form_the_ID();
    $form_required[fm_form_the_nickname()] = fm_form_is_required();
    $form_labels[fm_form_the_nickname()] = fm_form_the_label();
endwhile;

Comme vous avez pu le voir dans l'image relative à l'ajout d'identifiant(nickname), pour chaque élément du formulaire il suffit de manipuler les variables tableau comme suit :

<fieldset class="fieldItem ">
<label for="<?php echo $form_items['nom'];?>"><?php echo __("Votre nom","wordpress-form-manager");?> <?php if ($form_required['nom']):?>*<?php endif;?></label>
 <input type="text" name="<?php echo $form_items['nom'];?>" placeholder="<?php echo $form_labels['nom'];?>" value="<?php echo (!empty($_POST[$form_items['nom']])) ? $_POST[$form_items['nom']] : '';?>">
<p class="erroMsg">Lorem ipsum dolor sit amet.</p>
</fieldset>

Et ainsi de suite.Vous pouvez mettre votre style selon l'attente du client. N'oubliez pas les autres fonctions du plugin form manager sur la balise principale du formulaire 

<?php echo fm_form_start(); ?>
, le bouton validation du formulaire
<?php echo fm_form_the_submit_btn(); ?>
, elements de formulaire de securisation  
<?php echo fm_form_hidden(); ?>
et la fermeture de la balise principale du formulaire 
<?php echo fm_form_end(); ?>

  •  Validation PHP:

Pour effectuer une validation PHP il faut insérer votre code dans le fichier api.php dans la fonction  fm_processPost( $formInfo )  et retourner false si la validation n'est pas correcte à la valeur transmit dans la formulaire.

  • Rectification de la validation javascript :

La modification de l'affichage du message d'erreur est située dans le fichier wordpress-form-manager/js/userscripts.js  dans les fonctions  fm_check_text_validation(formID) (pour la validation) et fm_check_required_items(formID) (pour les champs requis). Une petite manipulation Javascript ou jQuery et c'est fait.

A vous de jouer !

4 commentaires

  1. Bon tutorial Narisoa.
    Si je dois ajouter mon grain de sel, je pense qu’une des souplesses du plugin est qu’on peut ajouter des validations personnalisés (javascript bien sur) dans les réglages avancés à condition d’être bon en expression régulier.
    Et pour la validation PHP, je pense qu’utiliser les hooks du plugin (http://www.campbellhoffman.com/question/action-hooks/) est plus adapté que d’ajouter directement du code dans le plugin qui seront écrasé lors de mise à jour.
    Sinon à part ça, très bon tuto, WP Form Manager est un très bon plugin très souple, bien qu’il existe des alternatives.
    Vivement le prochain tuto.

  2. Merci Johary!
    Je vais y prendre note pour cette utilisation hook pour la validation PhP, et encore Merci pour les compliments

  3. Bonjour,

    J’utilise Form manager depuis peu. J’ai créé un formulaire et j’y ai rajouté un champ privé « numéro d’id ». Je voudrais savoir s’il serait possible de l’affiché dans le formulaire ou lors de l’envoi pour que la personne puisse noté ce numéro un peu comme lors d’une commande.

    En vous remerciant

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.