Share
JotForm er en formbygningstjeneste; det tillater deg å bygge og være vertskap for skjemaene dine på plattformen, og deretter spalte dem inn på websidene dine, men du vil. I dag skal vi se på skjemaets designverktøy for å se hva de kan gjøre.
Merk: Les videre for å finne ut om designkonkurransen JotForm kjører akkurat nå - du kan vinne $ 7,500!
JotForms byggherre er et drag'n'drop-verktøy som gir deg et lerret og masse forskjellige standardformelementer for å ordne det.
Verktøy til venstre, lerret til høyreNår du har ordnet elementene, kan du endre egenskapene deres (for eksempel et inntastings navn og ID) og definere hvor stor de skal være, om de er nødvendige innspill og så videre. Du kan også komme helt ned i detaljene og kontrollere utformingen, så la oss se på hvordan det fungerer.
I stedet for å bygge vår egen form, skal vi ta en av de tilgjengelige mallene ved å klikke Form maler på toppmenyen. Vi skal ha betalingsformular for PayPal:
Når vi først åpner malen, vil den gi oss verktøyene til venstre, pluss en meny rett over som viser en rekke opsjonsalternativer.
Ignorer disse innstillingene for øyeblikket (du kan alltid sortere funksjonaliteten senere), nå klikker du på Form Style kategorien gir oss en rekke nye alternativer.
Det finnes en rekke stilarter og alternativer du kan bruke direkte fra denne menyen, men vi skal klikke på Form Designer element for å åpne et helt annet grensesnitt.
Etter en kort lastingstid:
Skjemaet ditt vil bli åpnet i designeren, og gir deg et annet sett med kontroller til høyre på skjermen.
Umiddelbart ser du massevis av intuitive alternativer for å klikke på og prøve ut. La oss se hva som er tilgjengelig.
I rekkefølge fra topp til bunn har vi en rekke designpaneler i sidepanelet, de er:
Til å begynne med, Fargevalg gir oss forhåndsdefinerte alternativer for bakgrunns-, tekst-, ramme- og inngangsfargene, samt muligheten til å definere hver enkelt manuelt. Ved å klikke på det første forhåndsdefinerte alternativet gir vi oss en mørkere bakgrunn og litt dybde:
Mens du kontrollerer farger, kontrollerer du Simuler feilstatus eller Simuler høydepunkt radiobokser vil vise deg noen av de andre dynamiske tilstandene skjemaet ditt vil ha.
Ved å klikke på tannhjulikonet til høyre for dem, kan du redigere stilegenskapene til hver av dem. Her har jeg nettopp gjort feilen rød, litt mindre garish.
Formuleringsoppsettet er som standard helt statisk; piksler overalt hvor du ser ut. Men under Form Layout fanen finner du et alternativ for å gjøre oppsettet lydhørt (som trolig er en av de første endringene du vil gjøre).
Kontrollerer Gjør dette skjemaet responsivt avkrysningsboks vil endre den faste pixelbredden (590px i eksempelet ovenfor) til a maksimum bredde.
Smal layoutEtter å ha gjort det, vil etikettene stables pent over skjemainnganger og kontrollerer på smalere skjermbilder.
Som standard bruker vår mal Verdana, men Fontalternativer gir oss mange alternativer, inkludert en rekke nettskrifter fra Google.
Her har jeg valgt Roboto med en base skriftstørrelse på 16px (jeg har Google Material fast fast i hjernen min for øyeblikket).
Alternativer innenfor Etikett stiler panelet under vil tillate deg å justere typografien for etikettene, for eksempel skriftvekt og justering.
Ok, så vi har dekket det faktum at hver av panelene kan undersøkes en etter en, og design stilene på skjemaelementene kan tweaked når du går. Men det er også mulig å justere de visuelle egenskapene til hver blokk direkte.
For eksempel, la oss klikke på Kjøpernavn blokkere.
Du vil legge merke til at et helt nytt sett med alternativer materialiseres i sidefeltet.
Inngangshøyden var noe jeg ønsket å forandre, så jeg ramte den til 30px ved hjelp av Tekstbokhøyde styre. Bredder må tweaked litt mer nøye hvis du jobber med en responsiv layout, fordi i stedet for å håndtere prosentandeler er alt fortsatt satt ved hjelp av piksler. Det er derfor lett å tilfeldigvis shunt elementer ut av veien ved å gjøre andre for store. Kontrollene jeg ser her er felles for hele skjemaet, så hvis jeg endrer inngangsbredden her, vil den endre seg alle inngangsbredder.
Merk: Dette er kanskje ikke et responsivt layout i sann sans, men der går du ...
Du vil kanskje ha noen merkevarebygging på skjemaet ditt, eller kanskje en større banner grafikk øverst. For å laste opp et bilde av ditt valg, trykk på Legg til skjemadeksel knappen på toppen av lerretet.
Du vil bli presentert med enda et panel i sidebjelken (ganske kjent av dette punktet) for å gi deg muligheten til å laste opp en kontroll et bilde.
Som jeg har lastet opp en logo, vil jeg ikke ha det flush mot skjemaet, så jeg har søkt 40px av margin-bottom.
UI-kontrollene er alt bra og gode, men hva om du trenger litt fin kontroll over stilene på skjemaet ditt? Det er her CSS-fanen kommer inn i spill.
Dette panelet lar deg legge inn hvilke stiler du liker, og gir deg noen valgforslag som hjelper deg med. Faktisk er kodeditoren ganske oppnådd, og du lager kodeforslag mens du skriver, peker ut feil og uthever CSS-syntaksen for å lese det lett..
Her har jeg for eksempel kontrollert bakgrunnsfargen på hovedformområdet. Å gjøre dette har betydd at jeg trengte å vite hva å velge, dessverre bare mulig ved å bruke inspeksjonspanelet i nettleseren min (ikke intuitiv for nybegynnere). Så vidt jeg kan fortelle, er det ingen mulighet til å tilordne klasser, ids eller attributter til andre elementer enn skjemainnganger.
.form alle er tilsynelatende den velger jeg trengte.
Nå * det er * form designEtter å ha dekket de ulike alternativene som er åpne for deg i JotForm Designer, er det på tide å snu din hånd til det. I løpet av november måned tilbyr JotForm $ 7,500 for den beste formdesign laget med verktøyene sine!
Det er også seks underkategorier, hver med $ 500 til de respektive vinnerne, pluss en rekke andre premier som tilbys. Skjemaet ditt må bygges med JotForms Form Designer, og være fullt funksjonell. Ta en titt på utmerkelsessiden for flere detaljer, og vær sikker på at du får inn oppføringen før 4. desember 2014!
Accentsconagua