Share
JotForm is een formulierbouwservice; het staat je toe om je formulieren op hun platform te bouwen en te hosten, en ze dan in je webpagina's te glijden zoals je zelf wilt. Vandaag gaan we kijken naar de vormontwerptools om te zien wat ze kunnen doen.
Notitie: lees verder om meer te weten te komen over de ontwerpwedstrijd die JotForm nu uitvoert: u kunt $ 7.500 winnen!
JotForm's builder is een drag-and-droptool die je een canvas en heel veel verschillende standaard formulierelementen geeft om op te rangschikken.
Hulpmiddelen aan de linkerkant, canvas aan de rechterkantNadat u de elementen hebt gerangschikt, kunt u hun eigenschappen (zoals de naam en id van een invoer) wijzigen en bepalen hoe groot ze moeten zijn, of ze verplichte invoer zijn enzovoort. Je kunt ook precies de details bekijken en het ontwerp bepalen, dus laten we eens kijken hoe dat werkt.
In plaats van een eigen formulier te maken, gaan we een van de beschikbare sjablonen pakken door op te klikken Formuliersjablonen in het bovenste menu. We gaan voor een PayPal-betalingsformulier van soorten:
Wanneer we de sjabloon voor het eerst openen, krijgen we links de tools, plus een menu direct erboven met een aantal instellingsopties.
Als u die instellingen voorlopig negeert (u kunt de functionaliteit later altijd uitzoeken), klikken we nu op de Formulierstijl tabblad geeft ons een hele reeks nieuwe opties.
Er zijn een heleboel stijlen en opties die u rechtstreeks vanuit dit menu kunt gebruiken, maar we gaan op de klikken Formulierontwerper item om een geheel andere interface te openen.
Na een korte laadperiode:
uw formulier wordt geopend in de ontwerper, waardoor u een andere reeks bedieningselementen rechts van het scherm krijgt.
Meteen zie je een heleboel intuïtieve opties om op te klikken en uit te proberen. Laten we kijken wat er beschikbaar is.
Om van boven naar beneden te komen, hebben we een aantal ontwerppanelen in de zijbalk, namelijk:
Beginnen met, Kleurenschema geeft ons vooraf gedefinieerde opties voor de achtergrond, tekst, frame en invoerkleuren, plus de optie om ze allemaal handmatig te definiëren. Als u snel op de eerste vooraf gedefinieerde optie klikt, krijgt u een donkerdere achtergrond en wat diepte:
Terwijl u kleuren controleert, controleert u de Simuleer de foutstatus of de Hoogtepunt simuleren radiokasten tonen u enkele van de andere dynamische toestanden die uw formulier zal hebben.
Als u op het tandwielpictogram rechts van hen klikt, kunt u de stijleigenschappen van elk ervan bewerken. Hier heb ik zojuist de fout rood iets minder opzichtig gemaakt.
Standaard is de lay-out van het formulier volledig statisch; pixels overal waar je kijkt. Echter, onder de Formulier lay-out tab vind je een optie om de lay-out responsief te maken (wat waarschijnlijk een van de eerste veranderingen is die je wilt maken).
Controle van de Maak deze vorm responsief checkbox verandert de vaste pixelbreedte (590px in het voorbeeld hierboven) in a maximum breedte.
Smalle lay-outNa dat te hebben gedaan, zullen de labels netjes boven formulierinvoer en -bediening op smallere schermen worden gestapeld.
Standaard gebruikt onze template Verdana, maar de Lettertype-opties geeft ons veel alternatieven, waaronder een aantal weblettertypen van Google.
Hier heb ik Roboto gekozen met een basistekstgrootte van 16px (ik heb Google Material momenteel stevig vast in mijn hoofd).
Opties binnen de Labelstijlen paneel eronder kunt u de typografie voor de labels aanpassen, zoals het lettergewicht en uitlijning.
Oké, dus we hebben het feit behandeld dat elk van de panelen één voor één kan worden bekeken en dat de ontwerpstijlen van de formulierelementen kunnen worden aangepast. Maar het is ook mogelijk om de visuele eigenschappen van elk blok rechtstreeks aan te passen.
Laten we bijvoorbeeld klikken op de Kopers naam blok.
Je zult merken dat een hele nieuwe set van opties in de zijbalk materialiseert.
De invoerhoogte was iets dat ik wilde veranderen, dus ik stootte het naar 30px met behulp van de Tekstvak hoogte controle. Breedtes zullen iets zorgvuldiger moeten worden aangepast als u met een responsieve lay-out werkt, omdat in plaats van met percentages te werken, alles nog steeds wordt ingesteld met behulp van pixels. Het is daarom gemakkelijk om per ongeluk elementen uit de weg te shunten door anderen te breed te maken. De bedieningselementen die ik hier zie, zijn hetzelfde voor de hele vorm, dus als ik de invoerbreedte hier wijzig, zal deze veranderen allemaal de invoerbreedten.
Notitie: Wellicht is dit geen responsieve lay-out in de ware zin, maar daar ga je ...
Misschien wilt u wat branding op uw formulier, of misschien een grotere bannerafbeelding bovenaan. Om een afbeelding naar keuze te uploaden, druk op de Voeg Form Cover toe knop aanwezig aan de bovenkant van het canvas.
Er verschijnt een ander paneel in de zijbalk (redelijk bekend op dit punt) om je de kans te geven een besturingselement en afbeelding te uploaden.
Aangezien ik een logo heb geüpload, wil ik niet dat het gelijk loopt met het formulier, dus ik heb het toegepast 40px van margin-bottom.
De gebruikersinterfacebedieningen zijn allemaal goed en wel, maar wat als je een beetje controle nodig hebt over de stijlen van je formulier? Dat is waar de CSS-tab in het spel komt.
Met dit paneel kun je alle stijlen invoeren die je leuk vindt, waardoor je een aantal selectorsuggesties krijgt om je te helpen. In feite is de code-editor behoorlijk geslaagd, waardoor je code-suggesties maakt terwijl je typt, waarbij je op fouten wijst en de CSS-syntaxis markeert om gemakkelijk te kunnen lezen.
Hier heb ik bijvoorbeeld handmatig de achtergrondkleur van het hoofdvormgebied geregeld. Dit te doen betekende dat ik het moest weten wat selecteren, helaas alleen mogelijk door het inspectiepaneel in mijn browser te gebruiken (niet intuïtief voor beginnende gebruikers). Voor zover ik kan nagaan is er geen mogelijkheid om klassen, id's of attributen toe te wijzen aan andere elementen dan formulierinvoer.
.vorm-all is blijkbaar de selector die ik nodig had.
Nu * dat is * formulierontwerpNadat u de verschillende opties die voor u openstaan in de JotForm Designer hebt besproken, is het tijd om te schakelen jouw hand ernaar toe. Gedurende de maand november biedt JotForm $ 7.500 voor het beste ontwerp van de vorm gemaakt met hun gereedschap!
Er zijn ook zes subcategorieën, die elk $ 500 aan de respectieve winnaars aanbieden, plus een aantal andere prijzen die worden aangeboden. Uw formulier moet worden gebouwd met de Form Designer van JotForm en volledig functioneel zijn. Kijk voor meer informatie op de awards-pagina en zorg ervoor dat je voor 4 december 2014 binnenkomt!
Accentsconagua