TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Aggiungi e personalizza il modulo di contatto nel sito Weebly

35

Esistono molti modi semplici per aggiungere moduli al tuo sito Weebly. È possibile utilizzare l’elemento "Modulo di contatto" predefinito di Weebly, connettere moduli da App Center e incorporare codici modulo da terze parti. Essendo un elemento nativo, l’elemento "Modulo di contatto" predefinito di Weebly è facile da integrare e gestire facilmente gli invii di moduli ricevuti attraverso la dashboard o app per iPhone/Android. In questo articolo discuteremo le caratteristiche dell’elemento predefinito "Modulo di contatto" e i modi per personalizzarlo. Oltre al modulo di contatto, Weebly offre anche altri due elementi del modulo: il modulo RSVP e l’elemento sondaggio.

Correlati: come aggiungere un modulo di contatto nei siti WordPress?

"Modulo di contatto" è uno degli elementi trascina e rilascia raggruppati nel gruppo "Base" nell’editor del sito Weebly. Dopo aver aggiunto il modulo di contatto nell’area del contenuto e aver fatto clic su di esso, puoi vedere la colonna degli elementi nell’editor Weebly cambiare automaticamente in campi modulo. Tutti i campi del modulo sono classificati nelle seguenti tre categorie:

Campi modulo:

  • Casella di testo breve
  • Casella di testo grande
  • Pulsanti opzioni
  • Casella a discesa
  • Caselle di controllo
  • Caricamento file per utenti Pro
  • Nome, email, indirizzo e numero di telefono

Struttura:

  • Divisore e Distanziatore

Di base:

  • Titolo, testo, immagine e codice di incorporamento

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Trascina e rilascia i campi nel modulo Weebly

Come gli elementi normali, puoi trascinare ogni campo e aggiungerlo al modulo. Facendo clic sull’elemento del modulo verranno visualizzate tre opzioni Visualizza voci, Opzioni modulo e Salva.

Opzioni modulo

Fare clic sul pulsante delle opzioni del modulo per visualizzare il popup delle opzioni avanzate del modulo come mostrato nell’immagine sottostante.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Opzioni del modulo di contatto Weebly

Le opzioni di personalizzazione disponibili sono:

  • Nome modulo: inserisci il nome per il modulo. Quando hai più moduli nel tuo sito, puoi utilizzare i nomi dei moduli per visualizzare facilmente gli invii in base al nome del modulo.
  • Invio e-mail a: questo è un ID e-mail in cui riceverai un avviso istantaneo ogni volta che viene inviato un modulo.
  • Messaggio di conferma dopo l’invio: l’opzione di conferma consente di visualizzare una risposta automatica all’utente dopo aver inviato il modulo. Puoi impostare un messaggio di conferma di testo o collegare qualsiasi pagina web. Il messaggio di testo verrà visualizzato all’interno dell’area del modulo dopo l’invio. Puoi collegare qualsiasi pagina web esterna o il tuo sito o pagina del negozio nell’opzione di collegamento che verrà visualizzata dopo l’invio.
  • Spaziatura: utilizzata per regolare la spaziatura dei margini superiore e inferiore dell’elemento del modulo.
  • Pulsante di invio: utilizzato per allineare il pulsante di invio a sinistra, al centro o a destra rispetto alla larghezza del modulo. Inoltre puoi inserire qualsiasi testo libero come "Contatto" invece di inviare sull’elemento pulsante.

Nota: la pratica generale è creare una pagina di ringraziamento nel tuo sito con le informazioni personalizzate che desideri mostrare agli utenti e collegarla al modulo. La pagina di ringraziamento verrà visualizzata una volta che l’utente invia il modulo e fornirà maggiori opportunità all’utente di esplorare i collegamenti nella pagina di ringraziamento.

Personalizzazione a livello di campo

Facendo clic all’interno di uno qualsiasi dei campi del modulo verrà visualizzata una finestra popup applicabile a quel campo. Puoi modificare il nome del campo, renderlo facoltativo o obbligatorio, aggiungere istruzioni per la compilazione e regolare la spaziatura del campo all’interno del modulo. La creazione di un campo obbligatorio mostrerà un segno a stella sopra il nome del campo che indica l’utente che è un campo obbligatorio. La mancata compilazione dei campi obbligatori non consentirà l’invio del modulo e verrà visualizzato il messaggio "Correggi i campi evidenziati" e il campo verrà evidenziato in colore rosso.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Istruzione e campo obbligatorio

Le istruzioni aiuteranno gli utenti su come compilare quel particolare campo e il messaggio di aiuto verrà visualizzato ogni volta che il campo è focalizzato.

Alcuni dei campi come "Pulsanti Opzioni", "Caselle di controllo" e "Casella a discesa" avranno opzioni aggiuntive come mostrato nell’immagine sottostante. È possibile inserire tante opzioni personalizzate per la selezione dell’utente o sceglierlo dall’elenco delle opzioni predefinite. Le opzioni predefinite hanno un lungo elenco di scelte come Confronto, Sesso, Stati USA, Quanto tempo, Quanto spesso, Mesi dell’anno, Giorni della settimana, ecc.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Utilizzo dei pulsanti di opzione nel modulo di contatto Weebly

Opzioni modulo per utenti Pro

Gli utenti Pro avranno le seguenti funzionalità aggiuntive del modulo:

  • Caricamento file: questo è un campo professionale che aiuta l’utente a inviare un modulo con un file caricato. Questa sarà una funzionalità molto utile in modo che l’utente possa caricare ulteriori documenti o screenshot che a loro volta ti aiuteranno a fornire un supporto migliore. 20 MB è la dimensione massima del file che può essere caricato in un modulo.
  • Aggiunta di un modulo nel piè di pagina: oltre ad aggiungere un modulo nell’area dei contenuti del sito, gli utenti Pro possono aggiungere anche un modulo nell’area del piè di pagina. Il modulo di contatto può essere aggiunto nel piè di pagina che verrà visualizzato in tutte le pagine di un sito.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Caricamento file nel modulo Weebly

Visualizzazione delle voci del modulo

Le voci del modulo possono essere visualizzate in diversi modi e la risposta richiesta può essere inviata di conseguenza al mittente.

  • Fare clic sul modulo per visualizzare il pulsante "Visualizza voci", facendo clic sul quale si aprirà una nuova finestra con tutti gli invii del modulo.
  • Riceverai anche un avviso e-mail ogni volta che viene inviato un modulo.
  • Visualizza gli invii del modulo direttamente dalla dashboard.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Visualizza le voci del modulo di contatto nella dashboard di Weebly

Trucchi di personalizzazione per il modulo di contatto Weebly

Regolazione delle dimensioni del modulo di contatto

La dimensione del modulo Weebly non può essere modificata per impostazione predefinita. Per modificare le dimensioni, posizionare gli elementi "Spaziatore" accanto all’elemento del modulo e regolare la larghezza del modulo.

Ridurre gli invii di moduli spam

Uno dei maggiori problemi con il modulo di contatto Weebly è l’invio di spam: spammer e bot invieranno voci di spam e inonderanno la tua casella di posta. Poiché Weebly non offre CAPTCHA per il modulo di contatto, la gestione degli invii di spam sarà un compito fastidioso per i proprietari di siti. Ci sono due modi per ridurre gli spam senza modificare il codice:

  1. Aggiungi "Caselle di controllo" nel modulo di contatto e rendilo un campo obbligatorio. Puoi impostare il "Titolo del campo" come "Non sono un robot" e aggiungere un "Opzioni" come "Sono un umano". Ciò costringerà gli utenti a selezionare la casella e il modulo non può essere inviato senza selezionarlo.
  2. Allo stesso modo, usa "Pulsanti di opzione" e cambia il "Titolo del campo" in qualcosa come "Controllo CAPTCHA" o "Controllo umano" e rendilo un campo obbligatorio. Aggiungi una singola opzione come "Sono un umano, non un robot" o qualsiasi testo tu voglia. Ora l’utente deve utilizzare l’opzione per inviare il modulo di contatto.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Aggiungi Captcha manuale nel modulo di contatto Weebly

In entrambe le opzioni di cui sopra, i bot automatici non riusciranno a selezionare la casella di controllo o il pulsante di opzione, interrompendo così le voci di spam.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Previeni l’invio di spam nel modulo di contatto di Weebly

Modifica del colore di sfondo del modulo di contatto Weebly

Molti utenti ci hanno inviato un’e-mail e ci hanno chiesto come cambiare il colore di sfondo del modulo di contatto Weebly ed ecco come farlo. Ogni modulo di contatto avrà un modulo #id dopo la pubblicazione del sito. Fare clic con il tasto destro del mouse sul modulo di contatto su un sito pubblicato e fare clic sull’opzione "Ispeziona" o "Ispeziona elemento" e scoprire il numero #id del modulo per il modulo di contatto come mostrato nell’immagine sottostante. Il modulo #id sarà qualcosa come "form-1234567890123" e sarà univoco per ogni modulo.

Aggiungi e personalizza il modulo di contatto nel sito Weebly

Trovare il modulo di contatto #ID in Weebly

Ora vai all’editor Weebly e aggiungi il codice CSS sottostante nella sezione "Codice intestazione" della pagina in cui hai un modulo di contatto. Non dimenticare di sostituire il modulo #id con il tuo #id.

<style> #form-632853235871630597 { background-color: beige; padding: 15px 15px 0 15px; border-radius: 10px; border: 1px solid rgba(158, 158, 158, 0.22); } </style>

Se disponi di più moduli, puoi personalizzarli con colori di sfondo diversi o aggiungere tutti gli #ID dei moduli come #ID1, ID2 e avere gli stessi stili per tutti i moduli. Se disponi di più moduli, aggiungi il CSS nella sezione "Impostazioni > SEO > Codice intestazione " o nel file "main.less".

Fonte di registrazione: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More