Elementi: Form di iscrizione

Elementi. Form

Questo è il punto chiave della conversione. L'obiettivo è che il visitatore lasci i suoi dati

Verifica sempre che il formulario sia di facile comprensione e contenga le istruzioni in forma chiara e precisa

Inserire il form alla tua landing

1. Trascina l' icona dell' elemento form sulla tua area di lavoro.

2. Si apre la finestra con le opzioni dell' elemento form.

Potrai aggiungere input, caselle testo, check, radio, seleziona e elementi nascosti 

Per completare ti spieghiamo come e a cosa serve ciascuno di questi elementi del form.

Tutti i campi del form hanno tre parametri.

- Nascondere l' etichetta: non verrà mostrata l' etichetta del campo ad essa collegato.

- Campo obbligatorio: se si attiva, il campo dovrà essere compilato prima di inviare il formulario.

- Messaggi di errore: è un avvertenza che apparirà nel caso in cui il campo obbligatorio non sia stato compilato

Aggiungere campi di testo al form(input)

1. Fai clic sull'icona campo del testo (input)

Appaiono le opzioni dell' elemento campo di testo o input.

A sinistra potrai vedere una serie di opzioni "Configurazione dell' elemento".

I campi di testo o input di un form hanno le loro specifiche proprietà.

• Etichetta (label): è il titolo o la legenda di ognuno dei campi 
• Richiesto o obbligatorio: un utente non potrà inviare il formulario se si ha un campo obbligatorio vuoto 

- Nella parte etichetta potrai aggiungere il nome che vuoi dare al campo del tuo form, per esempio Nome.

Se vuoi che il campo sia obbligatorio, flagga la casella Campo obbligatorio. Vedrai che apparirà automaticamente un asterisco al lato dell' etichetta.

Con i selettori  delle frecce potrai muovere il campo in alto e in basso e posizionarlo nell'ordine che vuoi nel tuo form. 

Se vuoi cancellare il campo, fai clic sull'icona cancellare .

- Se vuoi che una parola o  più appaiano nel campo di input aggiungi il testo che vuoi nell'opzione "Testo di default". Si possono utilizzare come etichette ma dentro il proprio riquadro di testo. 

- se nella stringa-query della landing desideri indicare un parametro con un valore che deve prendere un campo input, indica il nome di questo parametro nella "Variabile" Per esempio, http://genlandings-backend.mdirector.com/54ae123456789?v1=source-google

Aggiungere caselle di testo nel form di iscrizione 

Una area di testo è come una semplice casella di testo, ma alla quale l'utente ha dato molto spazio per poter scrivere un testo lungo. Sono utili all' utente per contattarci, discutere domande, chiedere suggerimenti etc etc... 

Dale el alto a tu textarea insertando el valor que quieras:

La lista delle opzioni (check e radio)

La lista delle opzioni sono di grande aiuto per i form per i quali chiediamo all' utente di scegliere tra differenti opzioni. 

Diponiamo, per questo, di differenti opzioni.

• Radio

I checkboxes permettono di scegliere una o più opzioni dentro una lista, mentre i pilsanti radio permettono di scegliere una sola opzione tra varie.

Check

I checkboxes o caselle di verifica dispongono di controlli del form che permettono all'utente di selezionare e deselezionare opzioni individualmente. 

 

Sebbene in numerose occasioni si mostrano varie caselle congiunte, ciascuna di esse è completamente indipendente dal resto. Per questo motivo si utilizzano quando l' utente può attivare o disattivare vaie opzioni collegate ma che non si escludono a vicenda.

Per aggiungere le opzioni desiderate, digitare il nome nell'opzione "elemento del gruppo"

Radio

I controlli di tipo radiobottone sono simili ai controlli di tipo checkbox però ti permettono di scegliere una sola opzione tra le varie opzioni che si presentano insieme.

Ogni volta che si seleziona una opzione, si deseleziona automaticamente l' altra opzione che era stata selezionata.

Aggiungere caselle di testo nel form (Select)

I campi di selezione si utilizzano per inserire i menu semplici e quelli a tendina.

 "Primo valore non è valido" significa che questo valore è solo formativo per l'utente, in questo caso vogliamo mostrare un testo del tipo "Seleziona un'opzione", indica che l'elemento apparirà come selezionato. Questo attributo non prende valori.

Aggiungi a ogni elemento del gruppo le opzioni di cui hai bisogno.                     Puoi aggiungere gli elementi con questo bottone 

Il valore di ogni elemento si assegna con il bottone 

Il nome dell' elemento è quello che appare nella lista della selezione, mentre il valore e il dato che verrà passato al DB o lista di sincronizzazione.

Nel caso si trattasse di una lista molto lunga, hai la possibilità di caricare una lista da Excel a discesa (per esempio una lista di Province)

Se hai bisogno di caricare i valori in modo dinamico vedi questa guida.

Aggiungere campi di testo nel form (hidden/nascosto)

I campi nascosti o hidden si usano per aggiungere informazioni nascoste nel form. Questo tipo di controllo non permette nessun tipo di visualizzazione, L'utente non lo vedrà, però il datò sarà passato...

Il suo utilizzo si presenta quando dal server si genera una pagina dinamica per esempio attraverso PHP e rimane in un campo nascosto, il valore verrà visto al caricamento del form sul server.

Questo campo ha le seguenti proprietà:

- Valore: Valore di default.

- Variabile: se nel query-string della landing vuoi indicare un parametro con un valore che deve avere un campo nascosto, indica il nome di questo parametro in  "Variabile". 

Aggiungere campo per accettare le condizioni (privacy)

Il campo privacy o privacidad si utilizza per essere in regola con legge GDPR (Maggio 2018) in modo che un contatto all'iscriversi accetti i termini e le condizioni, privacy e indichi le comunicazioni che vuole ricevere.

Il Tag indica il titolo dell'elemento e l'informazioni del testo.

Utilizzando il bottone "Caricare file HTML" si potrà caricare un html con le condizioni e/o la politica di privacy. Al caricarlo, MDirector mostrerà il messaggio con una finestra, dove potrai copiare e incollare tutto il link:

cliccando su questa finestra verrà copiato il link in questo modo: 

[terms.html](/resources/249/terms_50760_terms.html)

dove il testo che appare tra le parentesi quadre, e l' url  che appare tra le parentesi tonde è il link cliccabile. Con questo formato potrai utilizzarlo in tutti i form di iscrizione. Potrai anche inserire un link esterno, per esempio:

[Política de privacidad](https://www.mdirector.com/politica-de-privacidad/)

Dopo compariranno gli elementi tipo checkbox che il contatto alla registrazione dovrà accettare:

In ogni elemento, il prime testo è quello che verrà visualizzato nel form, i 3 bottoni si utilizzeranno:

</> per aggiungere il valore che si salva nel DB di default oppure per indicare un box obbligatorio per registrarsi.

(+) per aggiungere un altro campo alle opzioni

cestino: per eliminare l'elemento dalla lista.

Aggiungi i campi predefiniti

I campi predefiniti servono per definire i valori di default. Possono essere campi già compilati come per esempio "Termini e condizioni", o i campi nei quali offri una serie di variabili già predefinite come i giorni, mesi e gli anni, questo metodo evita errori di formato.

Per reindirizzare alla pagina Termini e condizioni del servizio, dovrai scrivere il testo che vorrai mostrare, con il testo collegato tra le parantesi graffe, e la URL con la quale vuoi collegare tra parentesi. Per esempio:

Accetto i [termini e condizioni](http://www.mdirector.com/termini-e-condizioni/)

Avrai anche la possibilità di caricare i tuoi Termini e Condizioni in un documento HTML. Se sostituisci il file HTML con uno nuovo, dopo aver salvato, non dimenticarti di aggiornare la pagina per pulire la cache e poter visualizzar il nuovo file caricato.

Potrai anche aggiungere con dei dati pre-compilati un telefono, una email, così come una data. Con l'opzione "Facebook Login", darai la possibilità all'utente di registrarsi con i suoi dati di Facebook.

Bottone di invio del form

La maggior parte dei form ha un bottone per inviare al server i dati introdotti dall'utente. 

Se aggiungi un form, verrà aggiunto anche un bottone, che potrai editare per dare il design che vorrai.

Bottone Modifica

Accede alla configurazione del form  

Nella sezione "Bottone" incontrerai tutte le caratteristiche da poter personalizzare. L' "allineamento" indica in quale posizione del form deve vedersi il bottone. Se si seleziona "Libero" il bottone potrà essere spostato dove vorrai.