Form Contatti
Panoramica
I form contatti sono form compilabili da chi naviga il sito e che vengono spediti all'email associata, con tutti i dati inseriti dall'utente. Ad una pagina è possibile associare un form contatti, che a sua volta sarà collegato ad un Modulo Contatti che imposta l'indirizzo email di ricezione, e i messaggi di conferma.
Il form contatti ha come campi obbligatori "email" e "captcha", entrambi da compilare obbligatoriamente. Tuttavia il campo captcha può essere nascosto utilizzando la tipologia "Honeypot", che non richiede la visualizzazione dell'input con i caratteri da inserire. Ogni form contatti può avere anche un titolo, una descrizione e un testo per il tasto di conferma; inoltre può avere campi differenti per ogni lingua.
Ognuno di questi form può avere un numero illimitato di campi di diverso tipo: generico, password, nascosto, data, area di testo, elenco, selezione, opzione, paragrafo, file, link e codice; a questi possono essere associate varie regole di validazione.
Implementazione
Una volta creato il form pagina dalla sezione Forms del pannello, questo va associato ad un modulo contatti (si trovano nell'omonima sezione). A questo punto è sufficiente associarlo ad ogni pagina in cui si vuole mostrare.
Estrazione di un form contatti
Per estrarre un form contatti si può utilizzare la funzione find_contact()
che accetta un solo parametro contact_id
, ovvero l'id del form da estrarre. Per scegliere l'id del form contatti associato alla pagina è possibile utilizzare la funzione in questo modo: find_contact(content.contact_id)
.
nome | tipo | descrizione |
---|---|---|
id | int | Id |
form_id | int | Id del form contatti |
lang_code | string | Codice della lingua del form |
title | string | Titolo del form |
submit_label | string | Testo del bottone di submit |
reset_label | string | Testo del bottone per resettare il form |
description | string | Descrizione |
status | string | "enabled" se il form è abilitato, altrimenti "disabled" |
is_custom | string | |
created_at | string - date | Data di creazione |
updated_at | string - date | Ultima data di modifica |
fields | array | Campi del form |
Ogni campo del form è contenuto in fields
, con contact.fields
verrà estratto il codice HTML del campo e delle sue parti. Invece, per ottenere singolarmente le sue informazioni, è sufficiente estrarre l'oggetto info
di un campo, che contiene:
nome | tipo | descrizione |
---|---|---|
id | string - int | Id del campo |
form_id | string - int | Id del form |
config_id | string - int | |
is_fixed | string - int | |
type | string | Tipo di campo (text, textarea…) |
name | string | Nome del campo |
label | string | Etichetta del campo |
options | string - array | "Options" del campo se è di tipo select . Viene generato come array: ["chiave|valore", "chiave2|valore2"] |
value | string | Valore associato al campo |
descr | string | Descrizione del campo |
rules | string | Regole di validazione applicate al campo. Vengono scritte in una stringa divise da carattere | |
autofill | string | Se non è riempito automaticamente da pannello (autofill) ha valore 0 |
autofill_category | string | Categoria dell'autofill |
autofill_form | string | Form dell'autofill |
autofill_field | string | Campo dell'autofill |
sequence | float | Numero che indica l'ordinamento del campo |
created_at | string - date | Data di creazione |
updated_at | string - date | Ultima data di modifica |
Esempio
Mostrare un form contatti con la possibilità di autocompletare i campi
Nell'esempio seguente mostriamo come mostrare un form, l'esempio può essere utilizzato anche per altri tipi di form come quello della Ricerca avanzata. Per comodità andremo a creare una macro a cui passeremo il form e un oggetto contenente dei parametri. Nel nostro caso usiamo un array associativo che chiameremo fill
per preimpostare alcuni valori per certi campi, nell'esempio seguente al campo chiamato prodotto
viene messo come valore il titolo della pagina.
{{ macro.cont_form(find_contact(content.contact_id), { fill: {'prodotto': content.title} }) }} {# Creiamo una macro chiamata 'cont_form' che ha come primo parametro il form contatti, seguito da un oggetto contenente un array associativo ''fill'' #}
Nella pagina delle macro richiamiamo così cont_form
e inseriamo in una variabile i campi di fill
.
{% macro form_bootstrap(form, parameters) %} {% set fill = parameters.fill %}
Inseriamo prima dei campi il messaggio che comparirà nel caso di compilazione corretta del form:
{% if form.success %} <div>{{ form.success }}</div> {% endif %}
Ora apriamo il form preceduto dal titolo, se presente.
{% if form.title %} <h3>{{ form.title }}</h3> {% endif %} {{ form.open() }}
All'interno del form eseguiamo un ciclo per estrarre tutti i campi, dividendoli tra nascosti e non:
{% for field in form.fields %} {# Ciclo tutti i campi #} {% if field.is_hidden %} {# Se i campi sono nascosti estraggo solo i dati necessari #} {% if field.info.name in fill|keys %} {# Se è presente il nome del campo tra le chiavi di "fill" #} {{ field.input({ value: fill[field.info.name] }) }} {# Creo il campo input con il contenuto scelto in fill #} {% else %} {{ field.input }} {# Creo il campo input, in automatico sarà di tipo nascosto #} {% endif %} {% else %} {# Altrimenti per i campi normali... #}
Costruiamo i campi che non sono nascosti, nell'esempio inseriamo anche una classe has-error
per il CSS che può essere usata per mostrare in modo differente il campo quando ha un errore, insieme al relativo messaggio.
{% else %} <div class="{{ field.error ? 'has-error' : '' }}"> {# Nel caso che il campo sia in errore, aggiungiamo la classe 'has-error' #} {{ field.label({ class: label_class }) }} {# Inseriamo l'etichetta del campo #} {% if field.info.name in fill|keys %} {# Se il campo ha il nome nell'array 'fill' creiamo il campo con il valore inserito, altrimenti lo creiamo vuoto #} {{ field.input({ value: fill[field.info.name] }) }} {% else %} {{ field.input }} {% endif %} {% if field.descr %}<p>{{ field.descr }}</p>{% endif %} {# Se esiste la descrizione, la mostro #} {% if field.error %}<span>{{ field.error }}</span>{% endif %} {# Se il campo è in errore, mostro il relativo messaggio #} </div> {% endif %} {% endfor %}
Una volta creati tutti i campi, possiamo mostrare il pulsante di submit e chiudere il form e la macro:
{{ form.submit() }} {{ form.close }} {% endmacro %}