Share
JotForm è un servizio di creazione di moduli; ti permette di costruire e ospitare i tuoi moduli sulla loro piattaforma, quindi inserirli nelle tue pagine come preferisci. Oggi daremo un'occhiata ai suoi strumenti di progettazione dei moduli per vedere cosa possono fare.
Nota: continua a leggere per scoprire il concorso di design che JotForm sta realizzando in questo momento: potresti vincere $ 7.500!
Il builder di JotForm è uno strumento drag'n'drop che ti dà una tela e un sacco di elementi di forma standard diversi per organizzarli.
Strumenti a sinistra, tela a destraUna volta disposti gli elementi, è possibile modificare le loro proprietà (come il nome e l'ID di un input) e definire quanto dovrebbero essere grandi, se sono richiesti input e così via. Puoi anche scendere nei dettagli e controllare il design, quindi diamo un'occhiata a come funziona.
Invece di costruire la nostra forma, afferreremo uno dei modelli disponibili facendo clic Modelli di modulo nel menu in alto. Stiamo andando per una forma di pagamento PayPal di sorta:
Quando apriamo il modello per la prima volta, ci fornirà gli strumenti a sinistra, oltre a un menu direttamente sopra che mostra una serie di opzioni di configurazione.
Ignorando tali impostazioni per il momento (è sempre possibile risolvere la funzionalità in un secondo momento), faremo clic su Stile della forma scheda che ci offre una miriade di nuove opzioni.
Ci sono un sacco di stili e opzioni che puoi usare direttamente da questo menu, ma faremo clic sul pulsante Progettista di moduli elemento per aprire un'interfaccia completamente diversa.
Dopo un breve periodo di caricamento:
il tuo modulo verrà aperto nel designer, dandoti un diverso set di controlli sulla destra dello schermo.
Immediatamente puoi vedere un sacco di opzioni intuitive per fare clic e provare. Vediamo cosa è disponibile.
In ordine dall'alto al basso, abbiamo un numero di pannelli di design nella barra laterale, quelli che sono:
Iniziare con, Combinazione di colori ci fornisce le opzioni predefinite per lo sfondo, il testo, il frame e i colori di input, oltre all'opzione di definirne uno manualmente. Facendo clic rapidamente sulla prima opzione predefinita, otteniamo uno sfondo più scuro e una certa profondità:
Mentre controlli i colori, controlla il Simula lo stato di errore o il Simula l'evidenziazione i box radio ti mostreranno alcuni degli altri stati dinamici che il tuo modulo avrà.
Facendo clic sull'icona dell'ingranaggio a destra di essi, potrai modificare le proprietà di stile di ciascuno rispettivamente. Qui ho appena reso l'errore rosso leggermente meno appariscente.
Di default il layout del modulo è completamente statico; pixel ovunque tu guardi. Tuttavia, sotto il Layout del modulo scheda troverai un'opzione per rendere il layout reattivo (che è probabilmente una delle prime modifiche che vorrai apportare).
Controllo del Rendi questo modulo reattivo la casella di controllo cambierà la larghezza fissa del pixel (590px nell'esempio sopra) in a massimo larghezza.
Layout strettoFatto ciò, le etichette si impilano ordinatamente sopra gli input dei form e i controlli su schermi più stretti.
Di default il nostro modello utilizza Verdana, ma il Opzioni di carattere ci dà un sacco di alternative tra cui un certo numero di caratteri web di Google.
Qui ho scelto Roboto con una dimensione del font di base di 16px (ho Google Material saldamente bloccato nel mio cervello al momento).
Opzioni all'interno del Stili di etichetta il pannello sottostante consentirà di modificare la tipografia per le etichette, come peso del carattere e allineamento.
Va bene, quindi abbiamo coperto il fatto che ciascuno dei pannelli può essere esaminato uno per uno e gli stili di progettazione degli elementi del modulo possono essere ottimizzati mentre si procede. Ma è anche possibile modificare direttamente le proprietà visive di ciascun blocco.
Ad esempio, facciamo clic sul Nome del compratore bloccare.
Noterai che una nuova serie di opzioni si materializzerà nella barra laterale.
L'altezza di input era qualcosa che volevo cambiare, quindi l'ho confrontato con 30px usando il Altezza della casella di testo controllo. Le larghezze dovranno essere modificate leggermente più attentamente se si sta lavorando con un layout reattivo, perché invece di trattare con percentuali tutto è ancora impostato usando i pixel. È quindi facile smontare accidentalmente gli elementi facendo diventare gli altri troppo larghi. I controlli che vedo qui sono comuni a tutto il modulo, quindi se modifico la larghezza di input qui, cambierà tutti le larghezze di input.
Nota: Probabilmente, questo non è un layout reattivo nel vero senso, ma ci vai ...
Potresti desiderare del branding sul tuo modulo o magari un banner più grande in alto. Per caricare un'immagine di tua scelta colpisci il Aggiungi copertina modulo pulsante presente nella parte superiore della tela.
Ti verrà presentato un altro pannello nella barra laterale (abbastanza familiare da questo punto) per darti la possibilità di caricare un controllo un'immagine.
Dal momento che ho caricato un logo, non voglio che sia allineato al modulo, quindi l'ho applicato 40px di margin-bottom.
I controlli dell'interfaccia utente vanno tutti bene, ma cosa succede se hai bisogno di un controllo preciso sugli stili del tuo modulo? È qui che entra in gioco la scheda CSS.
Questo pannello ti consente di inserire gli stili che ti piacciono, offrendoti alcuni suggerimenti per aiutarti. In effetti, l'editor di codice è piuttosto completo, fornisce suggerimenti sul codice durante la digitazione, evidenziando errori ed evidenziando la sintassi CSS per una facile lettura.
Qui, ad esempio, ho controllato manualmente il colore di sfondo dell'area del modulo principale. Fare questo ha significato che dovevo sapere che cosa selezionare, purtroppo solo possibile usando il pannello di controllo nel mio browser (non intuitivo per gli utenti inesperti). Per quanto posso dire, non vi è alcuna possibilità di assegnare classi, ID o attributi a elementi diversi dai moduli di input.
.forma-all è apparentemente il selezionatore di cui avevo bisogno.
Ora * questo è * design del moduloDopo aver coperto le varie opzioni disponibili in JotForm Designer, è ora di cambiare il tuo mano per esso. Per tutto il mese di novembre, JotForm offre $ 7.500 per il miglior design dei moduli realizzato con i loro strumenti!
Ci sono anche sei sottocategorie, ognuna delle quali offre $ 500 ai rispettivi vincitori, oltre a una serie di altri premi in offerta. Il tuo modulo deve essere compilato utilizzando Form Designer di JotForm ed essere completamente funzionante. Dai un'occhiata alla pagina dei premi per maggiori dettagli e assicurati di ottenere il tuo ingresso entro il 4 dicembre 2014!
Accentsconagua