Volete incorporare snippet di codice HTML personalizzati nei vostri moduli di contatto WordPress? L'aggiunta di codice HTML personalizzato al vostro modulo è un ottimo modo per essere creativi e migliorare i vostri moduli.
I migliori plugin per i moduli di WordPress consentono di creare moduli senza codice, ma anche di aggiungere il proprio HTML personalizzato ai moduli per renderli ancora più avanzati.
In questo tutorial vi spiegheremo come aggiungere HTML personalizzato ai vostri moduli di WordPress utilizzando WPForms.
Perché aggiungere HTML personalizzato al modulo di contatto
Potreste chiedervi perché dovreste aggiungere l'HTML ai vostri moduli di WordPress.
In molti casi, un utente avanzato o uno sviluppatore web potrebbe voler espandere le funzionalità di un modulo. Uno dei principali vantaggi dell'aggiunta di HTML personalizzato al modulo è che aiuta a far risaltare il modulo rispetto al resto del contenuto.
Nell'esempio che segue, si può vedere come sia facile aggiungere un link all'Informativa sulla privacy in un testo del modulo di contatto.
Quindi i visitatori vedranno qualcosa di simile:
Inoltre, è possibile aggiungere un'immagine al modulo utilizzando un codice HTML personalizzato per rendere il modulo più attraente dal punto di vista visivo o per mostrare prodotti e opzioni di prodotto personalizzate.
Aggiungendo queste caratteristiche extra ai vostri moduli, potete far risaltare il modulo sulla pagina, il che aiuta a catturare l'attenzione dei vostri visitatori. Questo può contribuire a incoraggiarli a inviare il modulo.
L'aggiunta di HTML personalizzato al vostro modulo crea un'infinità di opportunità per migliorare il vostro modulo WordPress. Alcune di queste idee includono:
- Incorporare un video di YouTube: Potete rendere il vostro modulo più coinvolgente incorporandovi un video di YouTube o Vimeo.
- Incorporare Google Maps: Nella pagina dei contatti, potete mostrare la posizione della vostra azienda incorporando Google Maps nel modulo di contatto.
- Mostrare un'offerta esclusiva con logica condizionale: Se state creando un modulo d'ordine, potete mostrare un blocco HTML con un'offerta esclusiva se un utente seleziona un'opzione specifica nel modulo. Questa logica condizionale intelligente è ideale per gli upsell e per mantenere il modulo breve.
- Mostrare l'informativa sulla privacy: Aggiungete un testo con un link all'Informativa sulla privacy direttamente sul vostro modulo.
Come aggiungere un codice HTML personalizzato al modulo di contatto di WordPress
Se preferite leggere il tutorial, seguite queste istruzioni per creare un posto nei vostri moduli in cui inserire il codice HTML personalizzato.
Passo 1: Installare WPForms
La prima cosa da fare per iniziare è installare e attivare il plugin WPForms. Si tratta di un costruttore di moduli facile da usare che consente di creare qualsiasi cosa, da moduli semplici a moduli avanzati. È uno dei migliori plugin per WordPress in circolazione.
Se siete alle prime armi con il download dei plugin, ecco una guida passo passo su come installare un plugin di WordPress.
Inoltre, è necessario creare un modulo. Procediamo con la creazione di questo modulo.
Passo 2: Creare un modulo
Il passo successivo consiste nel creare il vostro primo modulo. Potete scegliere qualsiasi modulo a cui aggiungere un HTML personalizzato, ma per questo esempio, costruiremo un semplice modulo di contatto usando la sfida di WPForms.
Ottimo. Ora aggiungiamo il campo che accetterà l'HTML personalizzato.
Passo 2: Aggiungere un blocco HTML al modulo
Ora è necessario aggiungere un campo HTML al modulo. Lo si può trovare nella scheda Campi e poi Campi fantasia.
Quindi, è sufficiente trascinare il campo dal pannello di sinistra al modulo di destra.
È davvero facile aggiungere un campo HTML personalizzato al modulo di contatto di WordPress utilizzando WPForms.
Passo 3: Inserire l'HTML personalizzato
Ora che il riquadro HTML personalizzato è presente nel modulo di contatto, è possibile aggiungere lo snippet di codice HTML personalizzato.
Passare al modulo sulla destra e fare clic sul campo HTML/Codice appena aggiunto.
Quindi, nel pannello di sinistra, alla voce Opzioni di campo , si trova la casella Codice HTML.
Qui è possibile aggiungere il proprio snippet di codice HTML personalizzato.
Quindi, procedete a incollare il vostro codice HTML personalizzato in quel campo. È possibile aggiungere qualsiasi tipo di snippet di codice HTML personalizzato al modulo.
Al termine, premere il pulsante Salva nell'angolo in alto a destra.
Ora andiamo avanti e mettiamo il modulo sul vostro sito!
Fase 4: Aggiungere il modulo di contatto HTML personalizzato al sito web WordPress
Ora che avete costruito il vostro modulo di contatto con un campo HTML personalizzato utilizzando il plugin WPForms, dovrete aggiungerlo al vostro sito web.
Per iniziare, fare clic sul pulsante Incorpora nel costruttore di moduli.
Quando appare la notifica di incorporazione in una pagina, fare clic sul pulsante Crea nuova pagina .
Successivamente, WPForms vi chiederà di dare un nome alla vostra pagina. Nel nostro esempio, stiamo aggiungendo questo modulo di contatto HTML personalizzato a una pagina di contatti, quindi la chiameremo Contatti.
Digitare il titolo della pagina desiderata nella casella e fare clic su Let's Go!
Ora si vedrà la nuova pagina con il modulo di contatto HTML personalizzato. Si può andare avanti e premere il pulsante Pubblica nell'angolo in alto a destra della pagina.
Poi date un'occhiata al vostro nuovo modulo. Dovreste essere in grado di vederlo in azione.
Ce l'avete fatta. Avete finito di configurare un modulo di contatto di WordPress con un campo HTML personalizzato.
Riflessioni finali sui moduli HTML personalizzati
Ottimo lavoro. Speriamo che questo tutorial vi abbia aiutato a imparare come impostare un campo HTML personalizzato sui vostri moduli di contatto in WordPress.
Ora che avete aggiunto l'HTML personalizzato al vostro modulo, dovreste dare un'occhiata alla nostra guida sullo stile dei moduli di contatto in WordPress per assicurarvi che il codice personalizzato abbia l'aspetto che desiderate.
Quindi cosa state aspettando? Iniziate oggi stesso a utilizzare il più potente plugin per moduli di WordPress e iniziate a creare facilmente moduli bellissimi e personalizzati per il sito web della vostra piccola impresa.
Se questo articolo vi è piaciuto, seguiteci su Facebook e Twitter per altre esercitazioni gratuite su WordPress.
