Les formulaires peuvent constituer l’un des aspects les plus complexes de votre travail de développement frontal. Ils sont bien plus compliqués que la plupart des éléments avec lesquels vous travaillez, tant du point de vue HTML que CSS
Si vous avez déjà été frustré par les formulaires, ne vous inquiétez pas, il y a de l'espoir! Aujourd'hui, nous allons passer en revue des outils et des cadres qui vous aideront à faire le travail sans soucis.
Deux façons de peau ce chat
Nous allons examiner deux types d’outils qui pourraient vous aider à créer d’excellents formulaires: des frameworks et des applications Web.
Les cadres représentent la voie du bricolage, ils vous offrent un style et des fonctionnalités prédéfinis tout en permettant le type de règne libre que seul le codage à la main peut offrir. Le niveau de connaissance et de talent est encore assez élevé, mais vous ne payerez pas un centime et vous garderez une totale liberté pour faire ce que vous voulez.
En revanche, les applications de création de formulaire représentent une solution automatisée. Ceux-ci sont souvent alimentés par des systèmes de conception WYSIWYG qui vous évitent d'écrire un seul caractère de code. En outre, ils sont généralement associés à un service qui accepte et catalogue les soumissions de formulaires, ce qui est un avantage considérable. L'inconvénient est qu'ils ne sont pas toujours gratuits et que vos options de personnalisation sont plus limitées que si vous codiez à la main.
Examinons quelques-unes des versions les plus populaires et les plus efficaces des deux types d’outils de formulaire.
Cadres
Le premier est la route du cadre. Ce sont des noms que vous reconnaîtrez, mais avez-vous déjà examiné leurs caractéristiques de forme? Ils ont tendance à être assez volumineux et utiles.
Bootstrap
Twitter Bootstrap est devenu un outil extrêmement populaire et un point de départ pour les développeurs. Cela vous donne une base solide comme base de travail et vous permet d'économiser des heures et des heures à l'avant de votre flux de travail.
Le style de la forme dans Bootstrap est incroyablement étendu. Vous pouvez mettre vos étiquettes de formulaire en haut ou sur le côté, vos champs peuvent être carrés ou arrondis, ajouter des cases à cocher et sélectionner des menus; tout cela et plus dans une variété de styles différents à choisir.
Comme pour tout ce qui est dans Bootstrap, retirer ceci est aussi simple que de décrire un code HTML de base avec quelques classes soigneusement placées. La documentation est assez complète, mais voici un exemple pour vous donner un aperçu du fonctionnement des formulaires avec Bootstrap.
Assez simple! Gardez à l'esprit que tous ces éléments seront pré-stylés, ce qui signifie que nous n'avons pas à entrer maintenant dans une série de CSS. Ils ont fière allure dès la sortie de la boîte!
Là encore, il y a suffisamment de fonctionnalités pour que vous puissiez créer le type de formulaire que vous voulez avec très peu d'effort. Il existe même une bibliothèque javascript autocomplete soignée, appelée "typeahead".
Maintenant, supposons que vous ne vouliez pas utiliser Bootstrap pour construire votre site, mais que vous souhaitiez tout de même tirer parti de ces fonctionnalités géniales, est-ce possible? Tu paries. Rendez-vous simplement dans le générateur de téléchargement personnalisé et décochez tout sauf le module de formulaires. Cela limitera votre téléchargement aux éléments nécessaires à la création du formulaire.
Fondation
Foundation by Zurb a également une tonne de fonctionnalités de forme. Vous pouvez créer des formulaires très avancés en utilisant des techniques très similaires à celles décrites dans Bootstrap.
Le code pour l'implémentation de formulaires dans Foundation devrait ressembler beaucoup à ce que nous avons vu auparavant. Nous utilisons simplement les éléments de base fournis par HTML5 avec quelques noms de classes spéciaux:
Comme vous pouvez le constater, que ce soit avec Bootstrap ou Foundation, il n’ya pas grand chose à apprendre au-delà des éléments HTML à utiliser et où. Le fichier CSS inclus fera tout le travail de détournement de ces éléments et leur donnera une belle apparence.
Le support de formulaire de la Fondation n'est pas assez aussi approfondi et étendu que celui de Bootstrap, mais rappelez-vous que cela pourrait être une bonne chose. Si vous construisez des formulaires simples, vous n’avez pas toujours besoin de fluff.
Une chose intéressante de Foundation est un JavaScript qui vous permet d'implémenter vos propres éléments de formulaire personnalisés. Par exemple, si vous souhaitez créer une conception de case à cocher personnalisée, Foundation le rend aussi simple que quelques classes et un extrait de code JavaScript minuscule.
52 cadre
52 Framework était l'un des tout premiers frameworks HTML5 à être utilisé sur le Web. Je ne suis pas sûr de la façon dont il a été activement développé ces derniers temps, mais certaines fonctionnalités de base du formulaire sont en effet incluses.
Vous pouvez voir une page de démonstration ici et un guide vidéo vous expliquant les fonctionnalités ici.
En fin de compte, je pense que vous êtes beaucoup mieux avec Basecamp ou Foundation, qui sont beaucoup plus impressionnants, complets et à jour. Toutefois, si vous avez déjà utilisé 52 Framework et que vous maîtrisez déjà ce logiciel, vous souhaiterez peut-être examiner les fonctionnalités du formulaire.
Formaliser
Formalize est un framework CSS visant à uniformiser le style des formulaires dans tous les principaux navigateurs. Vous l'associez à votre bibliothèque JavaScript préférée et elle fait tout le travail lourd à votre place.
Formaliser a été créé par Nathan Smith, qui a également créé le système 960 Grid. Évidemment, puisque c'est le cas, vous savez que Formalize est de premier ordre et aide le plus grand nombre de navigateurs possibles à prendre en charge les dernières fonctionnalités du formulaire HTML5.
Pour moi
Formee est un autre excellent cadre uniquement dédié à vous aider à construire des formes parfaites.
Formee a trois objectifs principaux. Le premier objectif est de faciliter la mise en page. Formee est basé sur les idées de 960.gs et vous permet d’utiliser des conventions similaires pour présenter vos formulaires. Le deuxième objectif est la compatibilité entre navigateurs. Formee normalise l'apparence de vos formulaires dans tous les principaux navigateurs. Le troisième objectif est de rendre les formulaires superbes.Un style attrayant par défaut est appliqué et peut être entièrement personnalisé pour répondre à vos besoins.
Formateurs
Maintenant que nous avons trouvé certains des meilleurs frameworks de formulaire, passons maintenant à quelques constructeurs de formulaires et services vraiment stellaires.
Wufoo
Si vous parlez de créateurs de formulaires, vous ne pouvez tout simplement pas manquer d’évoquer Wufoo, qui est de loin l’une des meilleures options dans ce domaine.
Wufoo facilite incroyablement la création de formulaires Web de toutes sortes, que vous connaissiez un peu de code ou non. Tout ce que vous avez à faire est de faire glisser les éléments de formulaire pré-formatés et pré-codés sur votre canevas, où vous pouvez les modifier et les organiser facilement.
Je ne saurais vraiment en dire assez sur à quel point Wufoo est à la fois un constructeur et un service général de gestion de formulaires Web. Même si vous avez du style avec les formes à la main, il y a tout ce qui concerne les développeurs back-end qui se complique vraiment très vite. Courriels, notifications, acceptation de paiements, analyses, téléchargement de fichiers, si vous ne savez pas ce que vous faites, cela peut être un cauchemar. Wufoo poignées tout pour vous. Au lieu de maux de tête, vous obtenez un service simplifié et un tableau de bord agréable pour gérer tous vos formulaires.
Wufoo a un joli petit compte gratuit pour vous aider à démarrer, et si vos besoins sont basiques, c'est peut-être tout ce dont vous avez besoin. Lorsque vous êtes prêt pour les ligues majeures, vous vous retrouvez entre 15 et 200 dollars par mois.
JotForm
Si vous cherchez une bonne alternative à Wufoo, consultez JotForm. Ce service génial existe depuis longtemps, je l'ai personnellement utilisé pendant des années avant d'avoir entendu parler de Wufoo.
Pour la plupart, les fonctionnalités de JotForms sont comparables à celles de Wufoo. Les fonctionnalités de création de formulaires et de création de rapports ne sont pas aussi belles que celles de Wufoo, mais elles restent parfaitement fonctionnelles et si faciles à utiliser que quiconque peut créer d'excellents formulaires avec elles.
Comme Wufoo, JotForm peut gérer tous vos besoins complexes tels que le paiement via PayPal ou par bande, les CAPTCHAs, l'auto-complétion et plus.
Une chose que JotForm a vraiment va pour cela est un génial structure de prix. Ils donnent à tous les utilisateurs un nombre illimité de formulaires avec des champs illimités, puis augmentent le coût en fonction du nombre de soumissions reçues, du stockage dont vous avez besoin, etc. une fortune si vous envisagez le plan Wufoo à 200 $ / mois.
Qu'est ce que tu utilises?
La création de formulaires, le style et la création de rapports ont tendance à propulser des projets de conception de sites Web apparemment élémentaires sur un territoire de développement de haut niveau. Ne vous inquiétez pas, vous n'êtes pas le seul à être confus au sujet de ce genre de choses, c'est pourquoi il existe tant d'excellents outils comme ceux ci-dessus pour vous aider.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de ces options et de la méthode ou du service que vous utilisez pour les formulaires.