Champs communs

• Texte sur une seule ligne
• Texte du paragraphe
• Liste des radios
• Sélectionner
• Sélection multiple
• Sélectionnez l’image
• Case à cocher unique
• Liste des cases à cocher
• Date
• Soumettre

Champs de disposition

• HTML
• Séparateur

Domaines divers

• Confirmer
• Caché
• Nombre
• Recaptcha
• Anti-spam
• Évaluation étoilée

*** Champs d’informations utilisateur, nous ne vous avons pas oublié. Chacun de ces champs sont des champs communs que nous avons renommés et spécialement conçus pour les informations fréquemment nécessaires afin que vous n’ayez pas à le faire.

Texte sur une seule ligne

Les champs de texte sur une seule ligne conviennent parfaitement aux réponses des utilisateurs à réponse courte. Les champs d’informations utilisateur pré-générés à l’aide du champ Texte sur une seule ligne comprennent les champs Prénom, Nom, Adresse, Ville, Zip, E-mail et Téléphone.

réglages généraux

Étiquette

Le nom du champ tel qu’il apparaît à vos utilisateurs.

Champs requis

S’il est activé, ce champ doit être rempli avant de soumettre le formulaire.

Paramètres d’affichage

Valeur par défaut

Le champ se chargera pré-rempli avec tout texte entré comme valeur par défaut. Ce paramètre prend en charge l’utilisation de balises de fusion pour afficher des valeurs uniques ou personnalisées.

Espace réservé

Tout texte saisi ici apparaîtra dans le champ lors du chargement du formulaire, mais disparaîtra lorsqu’un utilisateur clique dans le champ pour taper.

La description

Tout texte saisi ici apparaîtra entre l’étiquette et le champ.

[Aller en haut]

Texte du paragraphe

Le champ Paragraphe s’adapte parfaitement aux réponses plus longues de l’utilisateur qui ne rentrent pas dans un champ Texte sur une seule ligne, et offre un éditeur de texte riche pour l’utilisateur s’il le souhaite pour la mise en forme.

réglages généraux

Étiquette

Le nom du champ tel qu’il apparaît à vos utilisateurs.

Champs requis

S’il est activé, ce champ doit être rempli avant de soumettre le formulaire.

Paramètres d’affichage

Valeur par défaut

Le champ se chargera pré-rempli avec tout texte entré comme valeur par défaut. Ce paramètre prend en charge l’utilisation de balises de fusion pour afficher des valeurs uniques ou personnalisées.

Espace réservé

Tout texte saisi ici apparaîtra dans le champ lors du chargement du formulaire, mais disparaîtra lorsqu’un utilisateur clique dans le champ pour taper.

La description

Tout texte saisi ici apparaîtra entre l’étiquette et le champ.

Afficher l’éditeur de texte enrichi

S’il est activé, un éditeur de texte enrichi sera fourni à l’utilisateur pour formater ses réponses dans ce champ. Désactivé par défaut.

Le module complémentaire Disposition et styles doit être installé et activé pour voir les fonctionnalités mentionnées dans cette documentation.

Avec la disposition et les styles installés et activés, vous verrez des options apparaître dans le générateur de formulaire pour modifier la mise en page du formulaire.

Vous pouvez créer une colonne en saisissant un champ et en le faisant glisser vers la gauche ou la droite de votre formulaire.

Vous pouvez ensuite créer un espace vide sur la ligne en faisant glisser le champ sous un autre champ.

Vous pouvez ajouter un champ à la même colonne qu’un autre champ en le faisant glisser sous ce champ.

Vous pouvez ajouter un champ à sa propre ligne en le faisant glisser hors d’une colonne et sous une colonne pleine taille.

Vous pouvez supprimer un espace vide dans votre formulaire en cliquant sur «Supprimer la colonne»

Vous pouvez redimensionner les colonnes en faisant glisser la barre qui apparaît entre les champs.

Vous pouvez modifier l’ordre des lignes en cliquant sur la barre sur le côté gauche de la ligne et en la faisant glisser en place.

Ajout de styles

Que vous modifiez les styles de formulaire par défaut, les styles de champ par défaut, les types de style de champ, les styles d’erreur ou les styles de champ individuels, vous disposez de nombreuses options identiques. Dans ce document, j’espère expliquer les bases du CSS que vous pourriez avoir besoin de connaître afin de libérer la puissance de l’extension Layout & Styles pour Ninja Forms.

Propriétés CSS de base

Bien que nous puissions en ajouter d’autres à l’avenir, nous conservons ici les éléments de base disponibles pour vous permettre de styliser vos éléments de formulaire.

Couleur de l’arrière plan

Cela offre un sélecteur de couleurs très simple pour vous permettre de composer une couleur sélectionnée ou de saisir une valeur de couleur HEX.

Largeur de la bordure

Cela peut accepter de 1 à 4 valeurs. Vérifiez les exemples suivants:

• 1px – Ceci ajoutera une bordure de 1 pixel sur les quatre côtés.
• 1px 2px – Cela ajoutera une bordure de 1 pixel en haut et en bas et une bordure de 2 pixels sur les côtés gauche et droit
• 1px 2px 3px – Cela ajoutera une bordure de 1 pixel en haut, une bordure de 2px sur les côtés gauche et droit et une bordure de 3 pixels en bas.
• 1px 2px 3px 4px – Cela ajoutera une bordure de 1 pixel en haut, 2 pixels à droite, 3 pixels en bas et 4 pixels à gauche.

Couleur de la bordure

Cela offre un sélecteur de couleurs très simple pour vous permettre de composer une couleur sélectionnée ou de saisir une valeur de couleur HEX.

Couleur du texte

Cela offre un sélecteur de couleurs très simple pour vous permettre de composer une couleur sélectionnée ou de saisir une valeur de couleur HEX.

la taille

Choisissez la hauteur de votre élément avec un entier suivi de px ou%. Comme en 500px ou 100%.

Largeur

Choisissez la largeur de votre élément avec un entier suivi de px ou%. Comme en 500px ou 100%.

Propriétés CSS avancées

Ce sont des éléments dont vous n’avez peut-être pas besoin aussi souvent pour l’utilisateur moyen, mais nous les incluons au cas où vous souhaiteriez un peu plus de contrôle.

Flotte

Cela accepte à gauche, à droite ou aucun.

Taille de police

Ce sera le plus souvent un entier suivi de px ou em. Comme en 16px ou 1 em.

Marge

Cela peut accepter de 1 à 4 valeurs. Il ajoute un espace à l’extérieur de ce à quoi vous l’appliquez tant qu’il s’agit d’un élément de niveau bloc. Vérifiez les exemples suivants:

• 1px – Ceci ajoutera une marge de 1 pixel sur les quatre côtés.
• 1px 2px – Cela ajoutera une marge de 1 pixel en haut et en bas et une marge de 2 pixels à gauche et à droite.
• 1px 2px 3px – Cela ajoutera une marge de 1 pixel en haut, une marge de 2px à gauche et à droite et une marge de 3 pixels en bas.
• 1px 2px 3px 4px – Cela ajoutera une marge de 1 pixel en haut, 2 pixels à droite, 3 pixels en bas et 4 pixels à gauche.

Rembourrage

Cela peut accepter de 1 à 4 valeurs. Il ajoute un espace à l’intérieur de ce à quoi vous l’appliquez tant qu’il s’agit d’un élément de niveau bloc. Vérifiez les exemples suivants:

• 1px – Ceci ajoutera un rembourrage de 1 pixel sur les quatre côtés.
• 1px 2px – Cela ajoutera un rembourrage de 1 pixel en haut et en bas et un rembourrage de 2 pixels à gauche et à droite.
• 1px 2px 3px – Cela ajoutera un rembourrage de 1 pixel en haut, un rembourrage de 2 pixels à gauche et à droite et un rembourrage de 3 pixels en bas.
• 1px 2px 3px 4px – Cela ajoutera un remplissage de 1 pixel en haut, 2 pixels à droite, 3 pixels en bas et 4 pixels à gauche.

CSS avancé

Cette option est destinée à ceux qui connaissent bien CSS ou qui ne veulent pas expérimenter. Ici, vous pouvez écrire toutes les règles que vous souhaitez, tout comme vous le feriez si vous écriviez CSS dans son propre fichier. Exemple:

• rayon-frontière: 5px;
• hauteur de ligne: 18px;
• boîte-ombre: 2px 2px 2px 3px # 333;

N’oubliez pas de terminer chaque ligne par un point-virgule.

Disposition et hiérarchie des styles

L’extension Ninja Forms Layout & Styles vous offre la possibilité de créer des mises en page et des styles de formulaires très complexes par défaut et par formulaire, mais la compréhension de l’ordre dans lequel les styles sont appliqués est cruciale pour tirer le meilleur parti de cette extension.

Pour commencer, lorsque vous installez l’extension Layout & Styles, vous obtiendrez un sous-menu Styling sous votre menu Ninja Forms. Lorsque vous cliquez dessus, vous verrez 4 onglets et ceux-ci représentent les styles par défaut de Ninja Forms. Lorsque vous définissez ces options, elles seront appliquées dans un ordre très spécifique.

Onglet Styles de formulaire

Cet onglet représente les valeurs par défaut des éléments de vos formulaires Ninja. Des éléments tels que le conteneur principal, les lignes et le message de réussite sont définis ici et sont appliqués à chaque formulaire que vous créez avec Ninja Forms, alors assurez-vous que ces styles soient appliqués à chaque formulaire avant de continuer.

Onglet Styles de champ par défaut

Lorsque vous créez un champ ou tout autre élément avec Ninja Forms, cela crée certaines sorties requises. Un div enveloppant autour d’une étiquette et de l’élément réel. Les seules exceptions sont les éléments de mise en page où il n’y a pas d’étiquette et peut-être pas de div enveloppant, auquel cas seuls les styles d’élément s’appliquent.

Dans tous les cas, ces styles s’appliquent à TOUS les champs créés dans Ninja Forms, quel que soit leur type. Encore une fois, si vous ne voulez pas qu’elle soit appliquée à tout, utilisez cette option avec parcimonie.

Onglet Styles des types de champ

Ici, vous serez présenté avec les mêmes options que les styles de champ par défaut avec l’ajout de l’option pour sélectionner un type de champ ou d’élément spécifique. Cela signifie que vous pouvez styliser toutes vos zones de texte dans un sens et tous vos boutons Soumettre dans un autre sens. Fondamentalement, vous pouvez créer des styles par défaut pour chaque type d’élément que Ninja Forms vous permet de créer.

Onglet Styles d’erreur

Si le formulaire n’est pas correctement rempli, des messages s’affichent en haut du formulaire ainsi qu’avec chaque champ auquel une erreur est associée. Cela vous permettra de styliser ces messages et champs contenant des erreurs pour tous vos formulaires Ninja.

Comprendre la hiérarchie

Fondamentalement, plus vous êtes spécifique, plus le style est appliqué. Dans cet esprit, les styles de types de champs sont appliqués en premier, puis les styles de champs par défaut. Gardez cet esprit lorsque les choses ne semblent pas apparaître comme vous le pensez.

Modification du nombre de colonnes dans une liste à l’aide d’un nom de classe

Vous pouvez utiliser le nom de classe NUMBER -col-list comme nom de classe de conteneur de champ de liste sous les options de champ de liste.

Pour afficher cette fonctionnalité, vous devrez activer le «Mode développeur» .

Exemple: vous pouvez utiliser la liste à trois colonnes pour afficher les options de la liste dans trois colonnes.

Articles supplémentaires

Styliser vos formulaires
Ajouter du CSS personnalisé à vos formulaires Ninja
Comment écrire la règle CSS parfaite – Partie 1
Comment écrire la règle CSS parfaite – Partie 2

Le module complémentaire File Uploads doit être installé et activé pour voir les fonctionnalités mentionnées dans cette documentation.

1. Ajout et configuration d’une option de téléchargement de fichiers pour vos utilisateurs
2. Joindre un fichier téléchargé à un e-mail
3. Enregistrement des fichiers téléchargés sur Dropbox, Google Drive ou Amazon S3
4. Paramètres généraux de téléchargement de fichiers
5. Fonctionnalité avancée

Ajout d’une option de téléchargement de fichiers à votre formulaire

Un champ Téléchargements de fichiers peut être ajouté au formulaire en cliquant sur le bouton Ajouter un champ en bas à droite, puis en choisissant le champ Téléchargement de fichiers dans la liste.

Configuration de votre champ de téléchargement de fichiers

Cliquez sur le champ Téléchargement de fichier pour ouvrir sa fenêtre de paramètres.

réglages généraux

Étiquette

Le nom du champ tel qu’il apparaît à vos utilisateurs.

Champs requis

S’il est activé, ce champ doit être rempli avant de soumettre le formulaire.

Enregistrer sur le serveur

Activée par défaut, cette option enregistre un fichier téléchargé sur votre serveur lorsque le formulaire est soumis.

Renommer le fichier téléchargé

Si vous souhaitez que le fichier conserve le nom que votre utilisateur lui a donné, laissez ce champ vide. Si vous préférez votre propre convention de dénomination, vous pouvez la saisir ici à l’aide du bouton de fusion de balises .

Il y a une balise de fusion {file: extension}, mais cela n’a pas besoin d’être ajouté à la fin du paramètre car il sera ajouté automatiquement.
Les balises de fusion {file: name} et {file: extension} ne sont utilisées que dans les paramètres de champ et ne peuvent pas être utilisées dans des actions ou à d’autres endroits. Vous pouvez également créer des répertoires en utilisant / dans le nom.

Les anciens «shortcodes» sont toujours pris en charge pour le changement de nom et peuvent être mélangés avec des balises de fusion., Lesquels Ces shortcodes peuvent être trouvés dans la section extensible immédiatement ci-dessous:

Renommer les conventions

% filename% – Le nom de fichier d’origine du fichier, avec tous les caractères spéciaux supprimés.
% formtitle% – Le titre du formulaire actuel, avec tous les caractères spéciaux supprimés.
% username% – Le nom d’utilisateur WordPress pour l’utilisateur, s’il est connecté.
% userid% – L’ID WordPress (int) pour l’utilisateur, s’il est connecté.
% displayname% – Le nom d’affichage WordPress pour l’utilisateur, s’il sont connectés.
% lastname% – Le nom WordPress pour l’utilisateur, s’il est connecté.
% firstname% – Le nom WordPress pour l’utilisateur, s’il est connecté.
% date% – La date du jour en aaaa-mm-jj format.
% month% – Le mois d’aujourd’hui au format mm.
%journée%– La journée d’aujourd’hui au format jj.
% year% – L’année d’aujourd’hui au format aaaa.
% field_X% où X est l’ID du champ que vous souhaitez utiliser pour renommer le fichier. Vous pouvez trouver l’ID en consultant le formulaire via l’aperçu et en utilisant l’élément Inspecter sur le champ que vous souhaitez utiliser. Ex: si l’ID est «nf-field-4», vous utiliseriez% field_4%.

Enregistrer dans la médiathèque

Si ce paramètre est activé, le téléchargement de fichiers sera enregistré dans la bibliothèque multimédia du serveur.
Vous pouvez récupérer des données sur la pièce jointe créée dans la médiathèque à l’aide des balises de fusion suivantes:
{field: my_field_key: attachment_id} – l’ID de la pièce jointe
{field: my_field_key: attachment_url} – l’URL de la pièce jointe
{field: my_field_key: attachment_embed } – une image HTML de la pièce jointe

Paramètres de restrictions

Limite de fichier

Utilisez cette option pour ajuster le nombre de fichiers à télécharger à partir de ce champ Téléchargement de fichier.

Taille de fichier maximale

Définissez la taille maximale du fichier qui peut être téléchargé ici. Ce paramètre par défaut est MB. Votre serveur a également probablement une limite de taille de fichier maximale, donc si vous définissez quelque chose ici et que les utilisateurs ne peuvent toujours pas télécharger des fichiers de cette taille, contactez votre hôte pour augmenter la taille de fichier du serveur.

Taille de fichier minimale

Définissez la taille minimale du fichier qui peut être téléchargé ici. Ce paramètre par défaut est Mo

Types de fichiers autorisés

Ce paramètre crée une liste blanche des types de fichiers qui peuvent être téléchargés par extension de fichier (par exemple .pdf, .jpg, .png, .xls, etc.). Une fois les données entrées dans ce paramètre, les utilisateurs pourront uniquement télécharger des fichiers de ce type.

Paramètres d’affichage

La description

Tout texte saisi ici apparaîtra entre l’étiquette et le champ.

Sélectionner le texte du bouton de fichier

Par défaut, le texte qui apparaît sur le bouton Téléchargements de fichiers lors de la visualisation du formulaire indiquera «Sélectionner les fichiers». Cela peut être changé en ce que vous voulez ici.

Afficher les fonctionnalités avancées

 

•  
•  

 

 

---

[Aller en haut]

Joindre un fichier téléchargé à un e-mail

Cela peut être accompli de deux manières, la première méthode via la balise de fusion, qui créera ensuite un lien vers le ou les fichiers téléchargés dans l’e-mail reçu.

Envoi d’un lien de téléchargement avec l’e-mail

1. Dans l’ onglet Emails et actions , modifiez l’action par e-mail en cliquant sur le symbole d’engrenage de l’action. À partir d’ici, cliquez sur le bouton de fusion de balises situé dans la ligne de message électronique , illustré ci-dessous. 2. Ajoutez la balise de fusion File Uploads au corps du message électronique en cliquant simplement dessus. Si votre liste affiche de nombreuses balises de fusion et que vous ne parvenez pas à localiser la bonne balise, profitez de la barre de recherche de balises de fusion et tapez File Uploads pour localiser la balise appropriée.

Joindre le (s) fichier (s) à l’e-mail

La deuxième méthode joindra le (s) fichier (s) lui-même à l’e-mail lui-même.

1. Dans l’ onglet Emails et actions , modifiez l’action par e-mail en cliquant sur le symbole d’engrenage de l’action.
2. Dans le tiroir coulissant, faites défiler jusqu’à l’ onglet Avancé et cliquez pour dérouler .
3. Ensuite, activez (cliquez) la bascule Attacher les téléchargements de fichiers .

---

[Aller en haut]

Enregistrement des fichiers téléchargés sur Dropbox, Google Drive ou Amazon S3

Ce processus nécessite 2 étapes: 1) ajuster les paramètres du plugin et 2) ajuster les paramètres du formulaire

1. Configurez les paramètres de votre plugin pour envoyer les fichiers téléchargés vers un service externe

Connecter des formulaires Ninja à Dropbox

Connexion de formulaires Ninja à Amazon S3

1.  
2.  
3.  
4.  
5.  
6.  

Connexion de formulaires Ninja à Google Drive

2. Configurez votre formulaire pour envoyer les fichiers téléchargés à un service externe

Maintenant que votre plugin est configuré pour envoyer à Dropbox ou Amazon S3 (étape 1), vous devez ajouter et configurer une action de téléchargement de fichier externe sur le formulaire lui-même. Ouvrez votre formulaire et accédez à l’onglet E-mails et actions, puis cliquez sur le cercle bleu / + dans le coin inférieur droit pour ajouter une nouvelle action.

Sous l’action de téléchargement de fichiers externes, vous pouvez choisir le service dans lequel vous souhaitez enregistrer les fichiers de votre formulaire.

---

[Aller en haut]

Paramètres généraux de téléchargement de fichiers

Accédez à ces paramètres dans votre tableau de bord WordPress sous Ninja Forms> File Uploads.

Téléchargements par navigateur

Cet onglet vous permet de visualiser ou de supprimer tous les fichiers téléchargés qui ont été enregistrés sur votre serveur. Vous pouvez trier par formulaire ou par date.

Paramètres de téléchargement

• Taille maximale du fichier (en Mo) – La taille maximale de téléchargement de fichier autorisée par formulaire.
• Message d’erreur de téléchargement de fichier – Le message d’erreur que l’utilisateur reçoit lorsque la taille maximale du fichier est atteinte.
• Répertoire personnalisé – est utilisé pour créer des répertoires dynamiques.

Si vous migrez à partir d’un autre serveur et que le chemin de téléchargement de fichiers pointe vers l’ancien emplacement du serveur, vous pouvez désactiver puis réactiver vos plug-ins de téléchargement de fichiers et de formulaires Ninja pour réinitialiser le chemin de fichier.

Fonctionnalité avancée

Veuillez noter que la modification de votre module complémentaire avec du code personnalisé n’entre pas dans le cadre de l’assistance que nous sommes en mesure de fournir. Cependant, cette section fournit des solutions à des cas d’utilisation très spécifiques de téléchargements de fichiers qui peuvent être utiles si vous en avez besoin!

Envoi d’un lien direct vers l’URL publique d’un fichier téléchargé sur les services externes

Vous pouvez utiliser le code suivant pour envoyer un lien direct vers l’URL publique du fichier téléchargé sur Dropbox, Google Drive ou Amazon S3

define (‘NINJA_FORMS_UPLOADS_USE_PUBLIC_URL’, true);

Liste des types de fichiers autorisés par les téléchargements de fichiers mais pas par WordPress

Pour des raisons de sécurité, File Uploads autorise uniquement le téléchargement des types de fichiers autorisés par WordPress. Cependant, cette liste de types de fichiers peut être modifiée avec le filtre ‘ninja_forms_upload_mime_types_whitelist’:

 snippetfile1.txt 236 octets 

 

123456

add_filter( 'ninja_forms_upload_mime_types_whitelist', 'my_ninja_forms_upload_mime_types_whitelist' );
function my_ninja_forms_upload_mime_types_whitelist( $types ) {
    $types['esx'] = 'application/octet-stream';

    return $types;
}

Vous pouvez également désactiver cette vérification de type si vous ajoutez des extensions à la liste blanche dans le paramètre de champ à l’aide de ce filtre:

 snippetfile1.txt 80 octets 

 

1

add_filter( 'ninja_forms_upload_check_mime_types_whitelist', '__return_false' );

Remarque: Le dossier de téléchargement de WordPress est accessible par défaut sur les installations WordPress. Pour limiter l’accès au dossier de téléchargements WordPress, vous pouvez utiliser un fichier htaccess

Formulaires en plusieurs parties

Le  module complémentaire Formulaires en plusieurs parties doit être installé et activé pour voir les fonctionnalités mentionnées dans cette documentation.

Création d’un formulaire en plusieurs parties

Commencez par ajouter des champs à la première partie de votre formulaire. Une fois que vous avez ajouté un champ, vous devriez voir un cercle gris / signe + apparaître en bas à droite du générateur de formulaire.

Une fois la pièce ajoutée, vous pouvez alors modifier ses paramètres en cliquant sur l’onglet qui apparaît en bas de l’écran.

Ce tiroir d’options vous donnera les options pour renommer la pièce ou la supprimer.

Vous pouvez vous déplacer entre les pièces en cliquant sur les icônes de cercle gris / <> ou sur les onglets en bas du formulaire.

Vous pouvez déplacer des champs vers différentes parties du formulaire en les faisant glisser vers les flèches ou les onglets.

Vous pouvez modifier l’ordre des pièces en faisant glisser les onglets dans l’ordre souhaité.

Configurez des fonctionnalités supplémentaires en plusieurs parties sur le formulaire.

Il existe un certain nombre de fonctionnalités et de paramètres qui peuvent être appliqués à votre nouveau formulaire en plusieurs parties. Vous pouvez trouver ces fonctionnalités dans l’onglet Avancé du générateur de formulaires.

Valider chaque pièce : lorsque cette option est activée (vert), les utilisateurs ne pourront pas se déplacer entre les pièces tant que chaque champ requis ou champ de confirmation n’aura pas été rempli.

Afficher le fil d’Ariane : affiche la navigation du fil d’Ariane en haut de chaque partie. Cela permet à l’utilisateur de cliquer entre les pièces elles-mêmes.

Afficher la barre de progression : affiche une barre de progression en haut de chaque partie.

Afficher les titres des pièces: affiche le titre de la pièce en haut de chaque pièce pour l’utilisateur.

Étiquette du bouton précédent : modifie le texte du bouton Précédent sur chaque partie.

Étiquette du bouton suivant : modifie le texte du bouton suivant de chaque partie.