Campo personalizzato nel form del guestbook di WebSite X5

Questo articolo nasce da una richiesta postata sul forum Unofficial che riportiamo in sintesi:

Ho modificato al Passo 1 il nome del campo "Sito Internet" del guestbook in "Città". Il problema è che adesso vorrei far vedere la città sotto al nome e le stelle di rating, una volta compilato ed inviato il form.
E' possibile?

L'Oggetto Guestbook di WebSite X5 prevede un form con quattro campi: Nome, E-Mail, Messaggio - campi obbligatori - e il campo non obbligatorio Sito Internet. Da programma non è possibile cambiare né il tipo di campo né l'eventuale obbligatorietà dello stesso. Non è possibile nemmeno cancellare o inserire un nuovo campo.

L'unica cosa possibile è cambiare l'etichetta dei campi, ma con un effetto limitato poiché le funzioni PHP che gestiscono la ricezione/memorizzazione/restituzione dei dati inviati attraverso il form prevedono un controllo sui dati ricevuti, dati che vengono rifiutati se non sono conformi a quelli previsti.

Ad esempio possiamo cambiare l'etichetta "Sito Internet" in "Città" ma il file x5engine.php non restituirà nei commenti il contenuto del campo se è assente il protocollo http:// o https://

Si potrebbe recuperare il contenuto di questo campo con funzioni che dipendono dal tipo di memorizzazione dei dati, salvataggio su file oppure nel database. In questa prova abbiamo cercato di raggirare l'ostacolo con un metodo indipendente dalla tipologia di raccolta dei dati scelta, in un modo forse un po' farraginoso ma funzionante, agendo lato client con l'uso di jQuery e abbiamo ottenuto questo risultato (versione 13.0.0.14):

DEMO

Vediamo ora come procedere.

Da programma modifichiamo il nome del campo "Sito Internet" al Passo 1, Impostazioni Generali → Lingua dei contenuti →  id contenuto: blog_website  inserendo l'etichetta da noi desiderata (per ulteriori informazioni si può consultare la GUIDA del programma).
Si precisa che questo cambiamento varrà anche per il form dei commenti del blog.

In Proprietà Pagina →  Esperto → Codice personalizzato →  Prima della chiusura del tag HEAD iniziamo con l'inserire questo codice CSS, ovviamente completamente personalizzabile, che ci consentirà di definire la formattazione del nuovo testo aggiunto al commento:

<style>
 .campoCustomGb {
      font-weight: normal;
      color: gray;
    }
</style>

Sempre nella stessa sezione, a seguire, inseriamo il codice JavaScript:

<script>
/* ===============================================================
 Author's custom code: http://quellidelcucuzzolo.blogspot.it
 Please do not remove credit
 ============================================================== */
$(document).ready(function() {
  var url = $("form[id^='x5gb'] div:nth-child(4)").clone();
  $("form[id^='x5gb'] div:nth-child(4)").hide();
  url.find("input").attr({
    "id": "MSid",
    "name": "MSname"
  }).prev("label").attr("id", "MSlabel");
  $("form[id^='x5gb'] div:nth-child(4)").after(url);
  $("#MSid").blur(function() {
    var customInput = $(this).val();
    $("form[id^='x5gb'] input[name='url']").val("http://" + customInput);
  })
  $(".topic-comments-user").each(function() {
    var $item = $(this).find("a");
    if ($item.length != 0) {
      var customCampo = $item.attr("href").replace("http://", "");
      var customNome = $item.contents();
      $item.replaceWith(customNome);
      $(this).append("<div class='campoCustomGb'>" + customCampo + "</div>");
    }
  })
});
</script>

Questo codice provvede a clonare il campo a cui abbiamo modificato l'etichetta e a nasconderlo in modo che resti visibile solo il nuovo campo clonato. Nel momento in cui l'utente scrive il testo nel  campo clonato, il codice si occupa di trasferire il suo contenuto nel campo originario nascosto, quello che effettivamente invierà il suo valore al server, anteponendovi il protocollo http://, necessario per superare il controllo lato server.
Ovviamente nella mail di notifica dell'invio del commento che riceverà il gestore del sito, il valore di questo campo conterrà questo prefisso.
L'ultima parte del codice si occupa di far visualizzare sopra la data del commento il nuovo testo.

Nota: nella demo abbiamo utilizzato anche QUESTO script per rendere il campo dell'indirizzo e-mail non obbligatorio.