Form Bootstrap in due minuti


Sei un fan del framework Bootstrap ma vorresti scrivere il tuo codice più velocemente?
Vuoi creare un form di immissione dati per il tuo sito ma non sai da dove iniziare?
Ecco la soluzione che fa per te: Bootstrap Form Builder.
Negli ultimi anni tra gli sviluppatori front end (e non) si sta diffondendo l’uso del framework creato da Twitter.
La prima versione fu rilasciata come progetto open source su Github nell’Agosto 2011, due anni dopo fu introdotta la versione 3 anche se molti sviluppatori usano ancora la versione 2.
La sua diffusione è così capillare da essere adottato anche da CMS come Prestashop.

In questo articolo non ti spiegherò il suo funzionamento piuttosto ti parlerò di Bootstrap Form Builder uno strumento molto utile per chi realizza interfacce grafiche con Bootstrap.

In rete sono reperibili diversi siti con la dicitura Bootstrap Form Builder, alcuni come il tool di minikomi sono dei progetti open source su Github ai quali è possibile contribuire con delle proprie modifiche o proposte.

Il  Bootstrap Form Builder che ho adottato recentemente è uno dei tool del sito bootsnipp, vera e propria miniera per chi usa Bootstrap, disponibile qui. La mia scelta è caduta su questo builder in quanto permette di scegliere la versione di Bootstrap con la quale lavorare.

Ora ti mostrerò quanto sia facile costruire un form con Bootstrap Form Builder.

Iniziamo vedendo com’è la pagina web:

 

home page Bootstrap From Builder

Possiamo già intuire il funzionamento dalle essenziali indicazioni: basta scegliere il componente desiderato e trascinarlo sul form, è possibile rimuovere un componente trascinandolo via.
Come prima cosa diamo un nome al nostro form:

nome form Bootstrap Form Builder

Fatto questo iniziamo a prendere i componenti necessari trascinandoli nel form:

drag & drop Bootstrap Form Builder

E`possibile assegnare ad ogni componente tutte le proprietà necessarie:

proprietà elementi Bootstrap Form Builder

All’interno di Bootstrap Form Builder sono disponibili tutti i tipi di campi necessari per un form, nell’immagine sottostante vediamo una select:

select Bootstrap Form Builder

E non manca nemmeno la possibilità di scegliere e personalizzare i pulsanti:

pulsanti disponibili in Bootstrap Form Builder

personalizzazione pulsanti in Bootstrap Form Builder

 

Il nostro form è pronto:

form generato da Bootstrap Form Builder

Infine prendiamo il codice HTML generato da Bootstrap Form Builder così da poterlo riportare all’interno del nostro progetto:

codice HTML generato da Bootstrap Form Builder

 

Questa breve guida termina qui. Spero di averti fornito uno strumento efficace per i tuoi progetti. Dimmi la tua nei commenti.

A presto.