Come aggiungere un campo personalizzato al modulo di contatto di Magento 2

Tempo di lettura: 3 minuti
Come aggiungere un campo personalizzato al modulo di contatto di Magento 2

Continuiamo con questo post a decantare la straordinaria versatilità di Magento 2. Questa piattaforma tra le più utilizzate per l’eCommerce, ci consente di personalizzare quasi ogni parte per adattarlo ad ogni necessità.

Vediamo ora come aggiungere un campo personalizzato al modulo di contatto di Magento 2 che, di base, è abbastanza scarno. Il modulo di contatto è uno strumento molto importante in un sito di commercio elettronico e spesso viene utilizzato dai clienti per chiedere chiarimenti ed informazioni su prodotti, modalità di vendita, spedizioni ed altro.

Magento da sempre, con i suoi 4 campi, offre un modulo di contatto troppo limitato e sovente richiede di essere personalizzato con campi aggiuntivi per adeguarlo alle proprie esigenze.

Come aggiungere un campo personalizzato al modulo di contatto di Magento 2

Tempo richiesto: 10 minuti

Come per qualsiasi personalizzazione al template di Magento 2 consiglio di fare un backup di sicurezza del sito. Inoltre, se non è già stato fatto, creare un tema child di Magento 2 in modo da non sovrascrivere le modifiche in caso di aggiornamento del tema. Procediamo quindi con i passaggi per modificare il modulo.

  1. Copiare il modulo di contatto nel tema child

    Creare la directory “Magento_Contact” nel proprio tema child presente nel percorso root_directory/app/design/frontend/Vendor/tema_child/,
    dove Vendor è il nome del fornitore del tema e tema_child è il nome dato al tema child.
    Copiare il contenuto della directory root_directory/vendor/magento/module-contact/view/frontend/ in root_directory/app/design/frontend/Vendor/tema_child/Magento_Contact/

  2. Modificare il file form.phtml

    Modificare il file form.phtml presente nel percorso root_directory/app/design/frontend/Vendor/tema_child/Magento_Contact/templates/ ed aggiungiamo il nuovo campo.
    In questo esempio aggiungiamo un semplice campo testo denominato Oggetto.
    Individuare il div che contiene il campo telefono e subito dopo incolliamo il div per il campo Oggetto:
    <div class="field subject">
    <label class="label" for="subject"><span><?= $block->escapeHtml(__('Subject')) ?></span></label>
    <div class="control">
    <input name="subject"
    id=subject"
    title="<?= $block->escapeHtmlAttr(__('Subject')) ?>
    class="input-text"
    type="text" />
    </div>
    </div>
    Come si può notare, nel codice, la parola Oggetto diventa Subject, in quanto il sistema traduce automaticamente il termine. Se si vuole rendere il campo obbligatorio, la riga:
    <div class="field subject">
    diventa:
    <div class="field subject required">

  3. Applichiamo le modifiche

    Se il il sito è in modalità produzione, eseguiamo questi comandi:
    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy
    php bin/magento cache:clean
    php bin/magento cache:flush

  4. Aggiungiamo un nuovo template per l’email di contatto

    Ora bisogna inserire il nuovo campo nel template dell’email. Dal pannello di controllo, andare nella sezione Marketing > Email Templates
    Clic su “Aggiungi nuovo template” e, nella schermata successiva, selezionare “Modulo di contatto” nel campo “Template” e cliccare su “Carica template”, in “Nome template” inserire un nome a scelta.
    In contenuto template aggiungere la riga per il campo “Oggetto”:
    <tr>
    <td><strong>{{trans "    Subject"}}</strong></td>
    <td>{{trans "S    ubject"}} {{var data.subject}}</td>
    </tr>
    A questo punto clic su “Salva template”Template email modulo di contatto

In questo esempio abbiamo inserito un semplice campo text, ma è possibile aggiungere campi di qualsiasi tipo: select, checkbox, text area, ecc.

Hai bisogno di personalizzazioni sul tuo eCommerce Magento?

Contattaci pure, noi possiamo farlo per te.