Guida per creare form html/css – JotForm Generator

Cosa sono i Form?

I form sono dei moduli, schede contenenti campi che gli utenti possono compilare. Quelli più comuni sono i Form di iscrizione a siti web e forum, Form per invio email, commenti e così via…

Oggi vedremo come realizzare dei form complessi, con numerose opzioni non di uso comune, e per farlo utilizzeremo un tool online che si chiama JotForm Generator, e che possiamo trovare all’indirizzo jotform.com.

JotForm Generator consente di eseguire numerose opzioni avanzate che non sono di facile realizzazione, sopratutto se si è inesperti di codice HTML.

Guida JotForm

JotForm una volta avviato si presenta con questa grafica:

Menu orizzontale in alto

In alto troviamo delle opzioni fisse ( Salvataggio, Preview, Passo indietro, Passo Avanti), e delle opzioni che cambiano in base all’area di gestione e modifica che stiamo visualizzando in quel preciso momento.

Le aree di gestione e modifica sono tre:

Form Style, dove si organizza lo stile grafico del form.

Setup & Embed, dove si gestisce il codice e le impostazioni principali del Form.

Proprietà, dove si gestiscono le proprietà di ogni singolo Form.

Menu verticale laterale sinistro

Al lato abbiamo invece una barra laterale con menu a scomparsa e diverse aree. In particolare in questa barra sono presenti tutti i comandi che è possibile inserire all’interno del nostro Form di iscrizione, Form di contatti e così via:

1. Form Tools

• Heading (Inserimento di un titolo)
• Text Box (Campo personalizzabile per l’inserimento di un campo testo)
• Text Area (Campo testo generico più esteso, adatto a descrizioni di qualunque genere)
• Drop Down (Campo testo generico con possibilità di scelta opzioni tramite menu a tendina)
• Radio Button (Scelta opzioni tramite bottone)
• Check Box (Scelta opzioni tramite spunta)
• File Upload (Campo personalizzato per l’invio di file)
• Submit Button (Tasto per l’invio del modulo a fine compilazione)

1. Quick Tools

• Full Name (Campo specifico per Nome e Cognome)
• E-mail (Campo specifico per l’inserimento di email)
• Address (Campo specifico per l’inserimento del proprio indirizzo)
• Phone (Campo specifico per l’inserimento di numeri di telefono)
• Birth Date Picker (Campo specifico per inserimento data di nascita)
• Number (Campo specifico per inserimento numero)

1. Survey Tools

• Star Rating (Sistema di votazione/apprezzamento tramite stelline)
• Scale Rating Sistema votazione/apprezzamento tramite mi piace)
• Grading
• Slider
• Range
• Spinner
• Matrix
• Form Collapse
• Page Break

1. Power Tools

• Free Text (html) (Campo per l’inserimento di testo libero
• Date Time (Campo per l’inserimento di un range di date)
• Password Box (Campo per inserimento password)
• Hidden Box
• Unique ID
• Captcha (Codice di protezione per riconoscimento macchina/uomo)
• Image (inserimento immagine/logo)
• Auto Complete

1. Payment Tools

• Paypal
• Paypal Pro
• Authorize.Net
• Google Checkout
• 2checkout
• clickbank
• worldpay
• bip
• Purchase order

 Come iniziare?

Il primo passo per creare il proprio Form è scegliere i vari elementi dalla barra laterale sinistra ed inserirli a cascata nella pagina.

Dopo è possibile modificare le proprietà generali, o dei singoli Form.

Possiamo gestire la grafica.

Salviamo il tutto e copiamo il codice sorgente per poter utilizzare il Form sul proprio sito web.

Conclusioni

Per qualsiasi richiesta non esitate a contattarmi tramite modulo contatti posto in fondo alla pagina.