Share
JotForm är en formbyggnadstjänst; det låter dig bygga och vara värd för dina blanketter på sin plattform och släppa dem sedan in på dina webbsidor men du vill. Idag ska vi titta på formverktyget för att se vad de kan göra.
Notera: läs vidare för att se om designkonkurrensen JotForm körs just nu - du kan vinna $ 7,500!
JotForms byggare är ett dragverktyg som ger dig en duk och massor av olika standardformelement för att ordna det.
Verktyg till vänster, duk till högerNär du har ordnat elementen kan du ändra sina egenskaper (till exempel en inmatnings namn och id) och definiera hur stor de ska vara, oavsett om de krävs inmatningar och så vidare. Du kan också komma direkt ner i detaljerna och styra designen, så låt oss ta en titt på hur det fungerar.
I stället för att bygga vår egen form, tar vi en av de tillgängliga mallarna genom att klicka Formmallar på toppmenyn. Vi ska ha en PayPal-betalningsblankett av olika slag:
När vi först öppnar mallen ger vi oss verktygen till vänster, plus en meny direkt ovanför som visar ett antal inställningsalternativ.
Ignorerar dessa inställningar för tillfället (du kan alltid sortera ut funktionaliteten senare) vi klickar nu på Form Style fliken som ger oss en mängd nya alternativ.
Det finns en massa stilar och alternativ som du kan använda direkt från den här menyn, men vi klickar på Form Designer objekt för att öppna ett helt annat gränssnitt.
Efter en kort laddningstid:
Din form öppnas i formgivaren, vilket ger dig en annan uppsättning kontroller till höger på skärmen.
Omedelbart kan du se massor av intuitiva alternativ att klicka på och prova. Låt oss se vad som är tillgängligt.
I order från topp till botten har vi ett antal designpaneler i sidofältet, de är:
Till att börja med, Färgschema ger oss fördefinierade alternativ för bakgrunds-, text-, ram- och inmatningsfärger, plus möjligheten att definiera var och en manuellt. Genom att klicka på det första fördefinierade alternativet ger vi oss en mörkare bakgrund och lite djup:
Medan du kontrollerar färger kontrollerar du Simulera felstatus eller den Simulera markera radio lådor visar dig några av de andra dynamiska stater som din blankett kommer att ha.
Genom att klicka på kugghjulsikonen till höger om dem kan du redigera stilens egenskaper för respektive. Här har jag bara gjort felet rött lite mindre garish.
Formulärlayouten är som standard helt statisk; pixlar överallt du ser ut. Men under Form Layout fliken hittar du ett alternativ för att göra layouten mottaglig (vilket förmodligen är en av de första ändringarna du vill göra).
Kontrollerar Gör detta formulär responsivt kryssrutan ändrar den fasta pixelbredden (590px i exemplet ovan) till a maximal bredd.
Smal layoutEfter att ha gjort det, kommer etiketterna noga att stapla ovanför formingångarna och styra på smalare skärmar.
Som standard använder vår mall Verdana, men Teckensnittsalternativ ger oss många alternativ, inklusive ett antal webbfonter från Google.
Här har jag valt Roboto med en basstorlek på 16px (jag har Google Material fast fast i min hjärna just nu).
Alternativ inom Etikett Styles panelen nedan gör att du kan justera typografi för etiketterna, t.ex. typsnitt och justering.
Okej, så vi har täckt det faktum att var och en av panelerna kan granskas en efter en och utformningsstilarna i formelementen kan tweaked när du går. Men det är också möjligt att direkt anpassa de visuella egenskaperna hos varje block.
Till exempel, låt oss klicka på Köparens namn blockera.
Du märker en helt ny uppsättning alternativ som materialiseras i sidofältet.
Ingångshöjden var något jag ville ändra, så jag stötte den till 30px med Textbox Höjd kontrollera. Bredder måste tweaked lite mer noggrant om du arbetar med en lyhörd layout, för istället för att hantera procentandelar ställs allt fortfarande på pixlar. Det är därför lätt att oavsiktligt shunta element ur vägen genom att göra andra för breda. Kontrollerna jag ser här är vanliga för hela formuläret, så om jag ändrar ingångsbredden här kommer den att förändras Allt ingångsbredderna.
Notera: Förmodligen är det här inte en responsiv layout i sann mening, men där går du ...
Du kanske vill ha någon märkning på din blankett, eller kanske en större banderolls grafik längst upp. För att ladda upp en bild av ditt val, tryck på Lägg till formulärkåpa knapp som finns på toppen av duken.
Du kommer att presenteras med en annan panel i sidofältet (ganska bekant med denna punkt) för att ge dig chansen att ladda upp en kontroll en bild.
När jag har laddat upp en logotyp vill jag inte att den spola mot formuläret, så jag har sökt 40 bildpunkter av margin-bottom.
UI-kontrollerna är alla bra och bra, men vad händer om du behöver lite fin kontroll över stilen på din form? Det är där CSS-fliken kommer in i spel.
Med den här panelen kan du ange vilka stilar du vill, och ger dig några valmöjligheter för att hjälpa dig med. Faktum är att kodredigeraren är ganska utförd, vilket gör kodförslag när du skriver, pekar på fel och markerar CSS-syntaxen för enkel läsning.
Här har jag till exempel kontrollerat bakgrundsfärgen på huvudformen. Att göra detta har inneburit att jag behövde veta Vad att välja, tyvärr bara möjligt genom att använda inspektionspanelen i min webbläsare (inte intuitiv för nybörjare). Såvitt jag kan säga finns det ingen möjlighet att tilldela klasser, ids eller attribut till andra element än formingångar.
.form alla är tydligen den väljare jag behövde.
Nu * det är * formdesignEfter att ha täckt de olika alternativen som är öppna för dig i JotForm Designer, är det dags att vända din hand till det. Under november månad erbjuder JotForm $ 7.500 för den bästa formdesignen med sina verktyg!
Det finns också sex underkategorier, vardera erbjuder $ 500 till respektive vinnare, plus ett antal andra priser som erbjuds. Din formulär måste byggas med JotForms Form Designer och vara fullt fungerande. Ta en titt på utmärkelsessidan för mer information och var noga med att få din inlämning före 4 december 2014!
Accentsconagua