<

Form

Il blocco gutenberg Form è un blocco personalizzato del wordpress Gpci framework. E' un blocco molto potente che va usato insieme al campo del form per definire i campi compilabili e probabilmente anche insieme al button gpci per l'invio del form. Serve principalmente a tre obbiettivi:

  • inviare informazioni al server per eseguire operazioni php (come l'invio di email e la creazione o modifica di posts)
  • ottenere informazioni dal server ( come campi personalizzati e conteggi )
  • filtrare queries nel frontend (per questo si usa in combinazione con il blocco Gpci query loop )

Controlli del blocco Form

Questo blocco è un contenitore di altri blocchi con controlli specializzati sul tag form. Per ora non ho limitato in nessun modo i blocchi che possono essere inseriti all'interno, quindi possono essere utilizzate colonne, contenitori e anche immagini o icone per visualizzare il form come meglio si crede. Essendo un wrapper di blocchi, tutte le proprietà come posizionamento e style inline vengono direttamente applicate al form. Anche in questo caso, appena inserito il blocco, è necessario definire subito alcuni controlli; è necessario specificare che in base ai controlli scelti il form sarà usato in modi diversi. Intanto vediamo di seguito i controlli:

Tipo di valore

Eventuale conversione dinamica relativa l'attributo name/id. Utilizzare se il campo è all'interno di un ciclo query.

Nome/Id

Stringa che verrà usata come attributo name e attributo id, aggiornerà automaticamente anche l'attributo ancora del blocco (in avanzate). Compilare se è necessario accedere ai campi non compilabili direttamente o all'ancora del form, come regola generale utilizzare lettere, trattini medi/bassi e numeri e iniziare con una lettera. In nessun caso il form resterà senza questi attributi che sono necessari al codice javascript e altre funzioni interne, se non specificati verranno automaticamente aggiunti da php con il modello: form-stringa_casuale

Action

Url al quale verranno spediti i dati del form (con conseguente redirezione). Tenere presente che questo attributo funzionerà solo se il form è inviato tramite php ma non funzionerà se il form è inviato via javascript. Grazie a questo attributo è possibile creare dei form multipagina nel caso che ci siano molte informazioni da processare. Default lasciare vuoto.

Method

Attributo method del form. Di default è GET ma è possibile scegliere anche POST. Al momento non ho trovato casi utili in wordpress per abilitare anche gli altri tipi di protocollo come DELETE, PUT, ecc..

Come regola generale (ma piuttosto ferrea) utilizzare:

  • GET - per ottenere dati dal server e filtrare una query
  • POST - per creare o aggiornare dati, inviare email o comunque manipolare informazioni sensibili

Js on submit

Se attivato abilita una textarea in cui inserire codice javascript che verrà eseguito subito prima di inviare il form (vedi controllo successivo).

Javascript on submit

In questa textarea è possibile scrivere codice javascript che verrà eseguito subito prima di inviare il form. Questo è il posto ideale in cui inserire delle validazioni avanzate. Non utilizzare nessun tag script in quanto è già aggiunto tutto automaticamente. Esempi basilari:

//Validazione avanzata(sia per form php che javascript) - non invia se il nome inserito non è luigi
let NameInputId = document.getElementById('form-contatti-nome');
let name = NameInputId.value;

if( name != 'luigi' ){
  let FormContattiNomeValidation = document.getElementById('form-contatti-nome-validation');
  let FormValidationErrorMessage = 'Inserisci un altro nome';

  if( FormContattiNomeValidation == null ){
    document.getElementById('form-contatti-nome').insertAdjacentHTML('beforebegin', FormValidationErrorMessage )
  }
  else{
    FormContattiNomeValidation.innerHTML.replace( FormValidationErrorMessage );
  }
}
else{ event.currentTarget.submit(); }
//Sostituisce il pulsante submit con un testo durante l'invio( per form via js )
document.getElementById('form-contatti-submit').replaceWith( 'inviando..');

Esegui istruzioni php

Se attivato abilita una textarea in cui inserire codice php che verrà eseguito all'invio del form (vedi controllo successivo).

Php

In questa textarea è possibile scrivere codice php che verrà eseguito all'invio del form. Il codice viene processato tramite eval con blocco try and catch (se il contesto lo permette e il codice è sbagliato verrà generato un messaggio di errore) quindi attenzione a cosa si scrive qui. Proteggere sempre, se possibile e inerente, il codice con dei controlli sui permessi. Sicuramente inserirò in futuro un campo per il primo controllo senza doverlo specificare nella textarea. Non utilizzare tag php agli estremi in quanto siamo già dentro php. Ci sono vari modi per usare questo codice e delle variabili/funzioni utili da ricordare, vediamo negli esempi:

Form inviato via php: il server invia una mail e ritorna un messaggio di conferma che sarà visualizzato al posto del form:

//Importante è la variabile $content che nel caso di un form php sostituisce il form stesso con dell'altro contenuto (solo in stato di form inviato)
wp_mail( ... );
$content = 'Ciao '.$_POST['form-contatti-nome'].', il tuo messaggio è stato inviato!';

Importante è la variabile $content che nel caso di un form php sostituisce il form stesso con dell'altro contenuto, in stato di form inviato. La variabile è gia inizializzata nella funzione che genera il form quindi il suo nome è sempre costante.

Form inviato via javascript: stesso risultato di prima ma modo di esecuzione diverso:

wp_mail( ... );
echo 'Il tuo nome è: '.$_POST['form-contatti-nome'];

Qui utilizziamo echo per ritornare un messaggio dopo le operazioni. Questo messaggio però per essere mostrato e dove, sarà configurato dopo nel controllo Posizione Js on response.

Attenzione! Se il form viene inviato via javascript ed è contenuto all'interno di un blocco template part deve essere editato dalla template part e non dal template che la contiene. Questo perchè il blocco per farsi trovare da php durante il fetch javascript utilizza degli attributi come coordinate per capire la locazione esatta. In caso contrario il form ritornerà come risposta 'Il form non è stato trovato'.

Invia tramite javascript

Se attivato abilita tutti i controlli sottostanti, dato che sono basati sulla risposta javascript.

Posizione Js on response

Selezionare dove si vuole che la risposta venga visualizzata. Le scelte disponibili sono:

  • Nessuna risposta - non succederà nulla dopo le operazioni
  • Questo form - Il form corrente sarà sostituito dalla risposta
  • Id - farà comparire un input subito dopo: Scrivere l'elemento id che verrà sostituito dalla risposta
  • Alert - la risposta comparirà un un alert
  • Console.log - la risposta comparirà nella console sviluppatori
  • Custom - farà comparire una textarea subito dopo: scrivere il codice personalizzato per gestire la risposta

Esempio:

//Farà comparire la risposta in ogni sezione della pagina
document.querySelectorAll('.wp-block-gpci-section').forEach( function( selector ){ selector .innerHTML=ResponseText } )

Id risposta/Javascript on response custom

Cambia solo la label e il tipo di controllo ma contiene semplicemente le informazioni descritte prima(id o codice personalizzato).

Js after response

Se attivato abilita una textarea in cui inserire codice javascript che verrà eseguito alla risposta dal server. Va specificato che se non ci sarà risposta il codice non verrà eseguito.

Javascript on response

Textarea in cui scrivere codice javascript che sarà eseguito alla risposta dal server, probabilmente saranno comunicazioni addizionali/generiche oltre alla risposta, o magari una redirezione dopo qualche secondo.

Aggiorna queries

Qui possono essere inserite le coordinate di una o più gpci query loop che saranno aggiornate durante la ricerca. E' bene capire subito come funziona l'aggiornamento delle query tramite javascript:

  1. appena inoltrato l'invio del form il server cerca il blocco gpci query alle coordinate specificate (ricordare che ogni id deve essere unico nella pagina)
  2. se la query viene trovata il server la riesegue e rimanda indietro come risposta la stringa html della query aggiornata, altrimenti ritorna un messaggio di errore
  3. il codice html dell'id specificato (ossia l'ancora della query) viene sostituito da javascript con la risposta

I campi relativi ad ogni query aggiunta sono:

  • ancora - inserire l'ancora (id) del blocco gpci query loop (ricordarsi di assegnarlo!)
  • query postid - inserire l'id numerico del post in cui si trova la query se in un post/pagina/post type/pattern sincronizzato, gpci-child//SLUG (esempio:gpci-child//header-primary) se la query è in un template o una template part
  • query location post type - compilare solo se la query è in un template o una template part, altrimenti lasciare vuoto: wp_template o wp_template_part

E' bene precisare che i form inviati via javascript verranno processati tramite wordpress ajax, quindi, in alcuni casi, i filtri delle query se dinamici potrebbero avere valori diversi da quello che ci si aspetta (ad esempio il post id corrente). In questi casi è possibile compensare utilizzando un campo del form di tipo input hidden per memorizzare un certo valore e reperirlo nella query tramite una richiesta GET. Esempio:

Filtro query, funzione get_the_ID.

Ci si potrebbe aspettare un filtro con id relativo al post corrente, invece il risultato sarà false (dato che la pagina corrente risulta admin-ajax.php). In questo caso utilizzare un campo del form di tipo input hidden e assegnargli un valore derivante dalla funzione get_the_ID.