Share
JotForm este un serviciu de formare a formelor; vă permite să construiți și să găzduiți formularele pe platforma dvs., apoi să le introduceți în paginile dvs. web, oricum doriți. Astăzi vom examina instrumentele de design pentru a vedea ce pot face.
Notă: citiți mai departe pentru a afla despre competiția de design JotForm care rulează chiar acum - ați putea câștiga 7.500 $!
Constructorul lui JotForm este un instrument drag'n'drop care îți oferă o pânză și o mulțime de elemente de formă standard diferite pentru a le aranja.
Instrumente la stânga, panza spre dreaptaOdată ce ați aranjat elementele, puteți să le modificați proprietățile (cum ar fi numele și id-ul intrărilor) și să definiți cât de mari ar trebui să fie acestea, indiferent dacă sunt necesare intrări și așa mai departe. De asemenea, puteți obține detalii detaliate și puteți controla design-ul, deci, să aruncăm o privire la modul în care funcționează.
În loc să construim o formulă proprie, vom apuca una din șabloanele disponibile făcând clic Formulare șabloane din meniul de sus. Mergem pentru un formular de plată PayPal de tip:
Când deschidem pentru prima oară șablonul, ne va oferi instrumentele în stânga, plus un meniu direct deasupra care arată o serie de opțiuni de configurare.
Dacă ignorați aceste setări pentru moment (puteți rezolva oricând mai târziu funcționalitatea), vom face clic pe Forma stilului fila oferindu-ne o serie de opțiuni noi.
Există o mulțime de stiluri și opțiuni pe care le puteți utiliza direct din acest meniu, dar vom face clic pe Form Designer pentru a deschide o interfață complet diferită.
După o scurtă perioadă de încărcare:
formularul dvs. va fi deschis în designer, oferindu-vă un set diferit de comenzi în partea dreaptă a ecranului.
Imediat puteți vedea o mulțime de opțiuni intuitive pentru a face clic și a încerca. Să vedem ce este disponibil.
În ordine de sus în jos, avem un număr de panouri de design în bara laterală, acestea fiind:
Pentru început, Schema de culori ne oferă opțiuni predefinite pentru culorile de fond, text, cadru și de intrare, plus opțiunea de a defini fiecare manual. Făcând clic pe prima opțiune predefinită ne dă repede un fundal mai întunecat și o adâncime:
În timp ce controlați culorile, verificați Simulați starea de eroare sau Simulați evidențierea casetele radio vă vor arăta câteva dintre celelalte stări dinamice pe care le va avea forma.
Dacă faceți clic pe pictograma roată din partea dreaptă a acestora, veți putea să modificați proprietățile stilului fiecăruia. Aici tocmai am făcut eroarea roșie puțin mai puțin ciudată.
Implicit, aspectul formularului este complet static; pixeli oriunde arăți. Cu toate acestea, în cadrul Aspectul formularului veți găsi o opțiune pentru a face aspectul receptiv (care este probabil una dintre primele schimbări pe care le veți face).
Verificați Faceți acest formular receptiv căsuța de bifare va schimba lățimea fixă a pixelilor (590px în exemplul de mai sus) la a maxim lăţime.
Structura îngustăDupă ce ați făcut acest lucru, etichetele vor fi stivuite cu grijă deasupra intrărilor și controalelor pe ecrane mai înguste.
Implicit, șablonul nostru folosește Verdana, dar Opțiuni pentru fonturi ne oferă o mulțime de alternative, inclusiv un număr de fonturi web de la Google.
Aici am ales Roboto cu dimensiunea fontului de 16px (am materialul Google ferm blocat în creierul meu în acest moment).
Opțiuni în cadrul Etichete stiluri panoul din partea de jos vă va permite să modificați tipografia pentru etichete, cum ar fi greutatea fontului și alinierea.
Bine, deci am acoperit faptul că fiecare dintre panourile poate fi examinat unul câte unul și stilurile de design ale elementelor de formă pot fi modificate în timp ce mergeți. Dar este, de asemenea, posibilă modificarea directă a proprietăților vizuale ale fiecărui bloc.
De exemplu, hai să faceți clic pe Numele cumpărătorului bloc.
Veți observa că în bara laterală se materializează un set complet de opțiuni.
Înălțimea de intrare a fost ceva ce am vrut să schimb, așa că l-am lovit la 30px folosind Înălțimea casetei Control. Lățimile vor trebui să fie modificate puțin mai atent dacă lucrați cu un aspect receptiv, pentru că în loc să faceți față procentelor, totul este încă setat folosind pixeli. Prin urmare, este ușor să ștergeți accidental elementele din cale, făcând alții prea largi. Comenzile pe care le văd aici sunt comune pentru întreaga formă, așadar dacă modific modificarea lățimii de intrare aici, aceasta se va modifica toate lățimile de intrare.
Notă: În mod evident, acest aspect nu este un aspect receptiv în adevăratul sens, dar acolo mergeți ...
Poate doriți să aveți un branding pe formularul dvs. sau, probabil, un banner mai mare grafic în partea de sus. Pentru a încărca o imagine la alegere, apăsați pe Adăugați o coală de formular buton prezent în partea de sus a pânzei.
Veți fi prezentat încă un panou din bara laterală (destul de familiarizat cu acest punct) pentru a vă oferi șansa de a încărca o imagine de control.
După ce am încărcat o siglă, nu vreau să se potrivească cu formularul, așa că am aplicat 40px de margin-bottom.
Controalele UI sunt bune și bune, dar dacă ai nevoie de un control mai bun asupra stilurilor formularului tău? Aici intră în joc tab-ul CSS.
Acest panou vă permite să introduceți orice stiluri doriți, oferindu-vă câteva sugestii de selecție pentru a vă ajuta. De fapt, editorul de cod este destul de realizat, făcând sugestii de cod pe măsură ce tastați, subliniind erorile și evidențiind sintaxa CSS pentru citirea ușoară.
Aici, de exemplu, am controlat manual culoarea de fundal a zonei formularului principal. Făcând asta a însemnat că trebuia să știu ce pentru a selecta, din păcate, posibil numai prin utilizarea panoului de inspectori din browserul meu (nu este intuitiv pentru utilizatorii începători). În măsura în care pot spune că nu există posibilitatea de a atribui clase, ID-uri sau atribute altor elemente decât intrările din formă.
.Formularul-all este aparent selectorul de care aveam nevoie.
Acum * asta e * designul de formăDupă ce ați acoperit diferitele opțiuni deschise în proiectantul JotForm, este timpul să vă întoarceți ta mână pentru ea. Pe parcursul lunii noiembrie, JotForm oferă 7.500 de dolari pentru cel mai bun design de formă realizat cu uneltele sale!
Există, de asemenea, șase subcategorii, fiecare oferind 500 de câștigători, plus un număr de alte premii oferite. Formularul dvs. trebuie să fie construit utilizând Form Designer JotForm și să fie pe deplin funcțional. Uitați-vă la pagina de premii pentru mai multe detalii și asigurați-vă că ați primit intrarea înainte de 4 decembrie 2014!
Accentsconagua