Form Contatti

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.

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

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 %}