Share
JotForm est un service de création de formulaire; il vous permet de créer et d'héberger vos formulaires sur leur plate-forme, puis de les insérer dans vos pages Web à votre guise. Aujourd'hui, nous allons examiner ses outils de conception de formulaire pour voir ce qu'ils peuvent faire..
Remarque: lisez la suite pour en savoir plus sur le concours de design JotForm en cours, vous pourriez gagner 7 500 $!
Le générateur de JotForm est un outil de type drag'n'drop qui vous donne un canevas et des charges de différents éléments de formulaire standard à organiser..
Outils à gauche, toile à droiteUne fois que vous avez organisé les éléments, vous pouvez modifier leurs propriétés (telles que le nom et l'id d'une entrée) et définir leur taille, leur caractère obligatoire, etc. Vous pouvez également entrer dans les détails et contrôler la conception. Voyons comment cela fonctionne..
Au lieu de créer notre propre formulaire, nous allons saisir l'un des modèles disponibles en cliquant sur Modèles de formulaire dans le menu du haut. Nous allons pour un formulaire de paiement PayPal de sortes:
Lorsque nous ouvrirons le modèle pour la première fois, il nous fournira les outils à gauche, ainsi qu’un menu situé juste au-dessus, affichant un certain nombre d’options de configuration..
En ignorant ces paramètres pour le moment (vous pourrez toujours régler les fonctionnalités plus tard), nous allons maintenant cliquer sur le bouton Style de formulaire onglet nous donnant une foule de nouvelles options.
Vous pouvez utiliser plusieurs styles et options directement à partir de ce menu, mais nous allons cliquer sur le bouton Concepteur de formulaire article pour ouvrir une interface complètement différente.
Après une brève période de chargement:
votre formulaire sera ouvert dans le concepteur, vous donnant un ensemble de contrôles différent à droite de l'écran.
Immédiatement, vous pouvez voir une tonne d'options intuitives sur lesquelles cliquer et essayer. Voyons ce qui est disponible.
De haut en bas, nous avons un certain nombre de panneaux de conception dans la barre latérale, à savoir:
Pour commencer, Schéma de couleur nous donne des options prédéfinies pour l’arrière-plan, le texte, les cadres et les couleurs d’entrée, ainsi que la possibilité de les définir manuellement. En cliquant sur la première option prédéfinie, nous obtenons rapidement un arrière-plan plus sombre et une certaine profondeur:
Pendant que vous contrôlez les couleurs, vérifiez la Simuler l'état d'erreur ou la Simuler la surbrillance boîtes radio vous montreront quelques-uns des autres états dynamiques de votre formulaire.
En cliquant sur l'icône représentant un engrenage à leur droite, vous pourrez modifier les propriétés de style de chacune d'elles. Ici, je viens de faire l'erreur rouge légèrement moins criard.
Par défaut, la présentation du formulaire est complètement statique. pixels partout où vous regardez. Cependant, sous la Disposition de formulaire onglet, vous trouverez une option pour rendre la mise en page sensible (qui est probablement l'une des premières modifications que vous voudrez apporter).
Vérification du Rendez ce formulaire sensible Si vous cochez cette case, la largeur de pixel fixe (590 pixels dans l'exemple ci-dessus) sera remplacée par une maximum largeur.
Mise en page étroiteCeci fait, les étiquettes s’empileront proprement au-dessus des entrées de formulaire et des commandes sur des écrans plus étroits.
Par défaut, notre modèle utilise Verdana, mais le Options de police nous donne beaucoup d'alternatives, y compris un certain nombre de polices Web de Google.
Ici, j'ai choisi Roboto avec une taille de police de base de 16 pixels (j'ai du matériel Google fermement collé à mon cerveau pour le moment)..
Options dans le Styles d'étiquette Le panneau situé en dessous vous permettra d’affiner la typographie des étiquettes, comme le poids et l’alignement de la police..
Nous avons donc expliqué le fait que chacun des panneaux peut être examiné un à un et que les styles de conception des éléments de formulaire peuvent être modifiés au fur et à mesure. Mais il est également possible de modifier directement les propriétés visuelles de chaque bloc.
Par exemple, cliquons sur le Nom de l'acheteur bloc.
Vous remarquerez qu'un nouvel ensemble d'options se matérialise dans la barre latérale..
La hauteur de saisie était quelque chose que je voulais changer, je l’ai donc augmentée à 30 pixels à l’aide du bouton Hauteur de la zone de texte contrôle. Les largeurs devront être légèrement ajustées avec plus de précision si vous travaillez avec une disposition réactive, car au lieu de traiter avec des pourcentages, tout est toujours défini en pixels. Il est donc facile de contourner par inadvertance des éléments en les rendant trop larges. Les contrôles que je vois ici sont communs à l’ensemble du formulaire. Par conséquent, si je modifie la largeur d’entrée ici, cela modifiera tout les largeurs d'entrée.
Remarque: On peut dire que ce n'est pas une mise en page réactive au vrai sens du terme, mais voilà…
Vous voudrez peut-être une marque sur votre formulaire, ou peut-être une bannière plus grande en haut. Pour télécharger une image de votre choix, cliquez sur le bouton Ajouter une couverture de formulaire bouton présent en haut de la toile.
Il vous sera présenté un autre panneau dans la barre latérale (assez familier par ce point) pour vous permettre de télécharger un contrôle sur une image..
Comme j'ai téléchargé un logo, je ne veux pas le coller contre le formulaire, j'ai donc appliqué 40px de marge inférieure.
Les contrôles de l'interface utilisateur sont très bons, mais que se passe-t-il si vous avez besoin d'un contrôle précis sur les styles de votre formulaire? C'est là que l'onglet CSS entre en jeu.
Ce panneau vous permet de saisir le style de votre choix, en vous proposant des suggestions de sélecteur pour vous aider. En fait, l'éditeur de code est assez abouti, il fait des suggestions de code au fur et à mesure de la frappe, signalant les erreurs et soulignant la syntaxe CSS pour une lecture facile..
Ici, par exemple, j'ai contrôlé manuellement la couleur d'arrière-plan de la zone de formulaire principale. Faire cela a signifié que j'avais besoin de savoir quoi pour sélectionner, malheureusement uniquement possible en utilisant le panneau de l'inspecteur dans mon navigateur (pas intuitif pour les utilisateurs novices). Autant que je sache, il n’est pas possible d’attribuer des classes, des identifiants ou des attributs à des éléments autres que des entrées de formulaire..
.forme-tout est apparemment le sélecteur dont j'avais besoin.
Maintenant * c'est * la conception de formulaireAprès avoir couvert les différentes options qui s’offrent à vous dans JotForm Designer, il est temps de passer à autre chose. votre la main à elle. Tout au long du mois de novembre, JotForm offre 7 500 $ pour la meilleure conception de formulaire réalisée avec ses outils.!
Il existe également six sous-catégories, chacune offrant 500 $ aux gagnants respectifs, ainsi qu'un certain nombre d'autres prix en vente. Votre formulaire doit être construit à l'aide du concepteur de formulaires de JotForm et être pleinement fonctionnel. Consultez la page des prix pour plus de détails et assurez-vous d'avoir votre inscription avant le 4 décembre 2014!
Accentsconagua