Il modulo di contatto funge da strumento cruciale per facilitare la comunicazione tra individui o aziende. Fornisce agli utenti un modo conveniente e organizzato per raggiungere ed esprimere le loro domande. Puoi anche accettare domande, domande di contatto e sondaggi di opinione utilizzandolo.
Puoi facilmente creare una pagina di contatto sul tuo sito web utilizzando la sezione Contatti.
In questo articolo:
- Aggiunta della sezione contatti a una pagina
- Contenuto del modulo di contatto
- Gestisci disposizione
- Gestione dei campi del modulo e del tipo di modulo
- Tipi di campi
- Modulo in linea e modulo popup
- Impostazioni stile pulsante
- Modulo di contatto stile
- Impostazioni modulo di contatto Contact
- Reindirizza il modulo a un'altra pagina
- Esporta dati del modulo
- Dati modulo inviati
- Notifiche e-mail
- Esempio live
Aggiunta della sezione contatti a una pagina
- Sulla tua pagina, Fare clic sul blu + icona per aggiungere una nuova sezione alla tua pagina.
- Ora vedrai il Categorie di sezione sul lato sinistro.
- Scegliere il Moduli (1) categoria e clicca su Contatti scheda (2) da cui è possibile scegliere diversi layout di Contatti (3) sezione.
- Scegli qualsiasi layout di sezione e fai clic su di esso per aggiungerlo alla tua pagina.
Contenuto del modulo di contatto
Questa è una parte importante del modulo poiché carichi o modifichi l'immagine, dai titolo e descrizione qui in modo che gli utenti abbiano un'idea dello scopo del modulo stesso. Creando con cura un titolo conciso e descrittivo e una descrizione informativa e convincente, puoi migliorare la comunicazione e stabilire forti connessioni con i visitatori del tuo sito web.
- Puoi osservare le Caricare or Elimina (1) l'immagine che verrà visualizzata nel modulo.
- Modificare il Titolo (2) del modulo.
- Modificare il Descrizione (3) del modulo.
- Definire il Titolo della sezione (4) che verrà visualizzato nella parte superiore del modulo.
Gestisci disposizione
- Durante l'aggiunta del modulo sulla pagina, è necessario selezionare un layout. Puoi Cambia il layout dopo aver aggiunto anche il modulo.
La modifica del layout applicherà lo stile predefinito del modulo.
Gestione dei campi del modulo e del tipo di modulo
Sotto Gestisci campi modulo, puoi specificare i campi che vuoi che i tuoi visitatori compilino.
- Clicca sul + Aggiungi campo (1) pulsante per aggiungere più campi al modulo.
- Modifica, Duplica o Elimina (2) un campo già aggiunto.
- Trascinare e rilasciare (3) il campo per modificare la sequenza nel modulo.
Il campo E-mail è obbligatorio nel modulo e non può essere cancellato.
Facendo clic sul pulsante + Aggiungi campo, si aprirà un pop-up da cui è possibile scegliere gli elementi che si desidera visualizzare nel modulo.
Tipi di campi
Esistono diversi tipi di campi che puoi utilizzare nel modulo di contatto del tuo sito Web per raccogliere più dati utili dagli utenti in modo categorizzato e professionale. Questi campi possono essere facilmente aggiunti, duplicati o eliminati.
Ecco una breve descrizione dei campi del modulo.
- Nome: Cattura il nome del tuo cliente usando questo.
- testo breve: utilizzare questa casella per acquisire brevi dati di testo dai visitatori del sito web.
- Testo lungo: utilizzare questa casella per acquisire dati di testo lunghi dai visitatori del sito web.
- E-mail: Cattura l'e-mail del tuo cliente.
- Numero: Usalo per acquisire numeri (cifre).
- Discesa: puoi aggiungere opzioni tra cui scegliere in un menu a discesa.
- Selezione singola: Aggiungi questo dove gli utenti possono selezionare solo un'opzione dall'elenco.
- Selezione multipla: Aggiungi questo dove gli utenti possono selezionare più opzioni dall'elenco.
- Data: aggiungi un selettore di date in modo che i tuoi clienti possano scegliere una data per qualsiasi evento.
- Line: aggiungi linee al tuo modulo. Questo può essere utilizzato per differenziare i campi.
- Indirizzo: Usalo per acquisire l'indirizzo degli utenti.
- Sito web: Puoi usarlo per catturare il sito web dell'utente.
- Phone: cattura il numero di telefono utilizzando questo campo.
- Ora: Questo darà agli utenti la possibilità di selezionare un orario.
- Separatore: Questo può essere utilizzato per classificare i campi del modulo con un'opzione per aggiungere titolo e sottotitolo.
- Consenso: Ottieni il consenso degli utenti utilizzando questo nel modulo.
- Scala a stella: Consenti agli utenti di assegnare una valutazione a stelle utilizzando questo. Può visualizzare 3 o 5 stelle.
- Scala numerica: Consenti agli utenti di dare una valutazione numerica usando questo. Puoi scegliere di visualizzare da 0 a 10 e personalizzare la didascalia a sinistra e a destra.
- Scala sorridente: Consenti agli utenti di assegnare una valutazione alle faccine utilizzando questa opzione.
- Durante l'aggiunta di determinati campi, hai la possibilità di scegliere la larghezza tra Full, Half e One Third
- Puoi anche scegliere di visualizzare i campi affiancati scegliendo l'opzione Metà o Un terzo
Modulo in linea e modulo popup
Puoi scegliere di mostrare il modulo sulla pagina o come pop-up collegato a un pulsante di invito all'azione.
Modulo in linea
Selezione Modulo in linea inserirà il modulo di contatto direttamente sulla pagina dove viene aggiunto. Il modulo sarà immediatamente visibile ai visitatori senza richiedere ulteriori azioni. Questa è la soluzione ideale per le situazioni in cui si desidera mantenere il modulo in evidenza e incoraggiare un coinvolgimento diretto, ad esempio su una pagina di contatto o di richiesta informazioni.
Modulo popup
La scelta di Modulo popup visualizzerà solo un pulsante sulla paginaQuando un visitatore clicca sul pulsante, il modulo di contatto si apre in una finestra popup. Questo mantiene il design della pagina più pulito ed è ideale quando si desidera offrire il modulo senza occupare troppo spazio. È comunemente utilizzato per richieste rapide, acquisizione di lead o quando si desidera ridurre al minimo le distrazioni sulla pagina.
Impostazioni stile pulsante
- Etichetta pulsante – Specificare il testo visibile sul tuo pulsante. Questo è ciò che gli utenti vedranno e su cui cliccheranno.
- Dimensione del pulsante – Scegli la dimensione del pulsante (ad esempio, Piccolo, Medio, Grande). In questo modo, la spaziatura interna e la dimensione del carattere si adatteranno al tuo design.
- Stile pulsante – Scegli lo stile del pulsante come predefinito (impostato nel file Pulsanti e collegamenti scheda della sezione Design), Solido, Contorno o un collegamento testuale.
- Predefinito: Segue le impostazioni del tema del tuo sito.
- Solido: Un pulsante in grassetto e pieno.
- Outline: Sfondo trasparente con bordo.
- Collegamento testuale: Stile semplice e pulito, solo testo (nessun riquadro con pulsanti).
- Colore pulsante – Personalizza la combinazione di colori del pulsante:
- Predefinito: Eredita le impostazioni del tema.
- Invertire: Inverte i colori del testo/sfondo dei pulsanti.
- Personalizzato: Consente di scegliere colori specifici per il testo e lo sfondo.
- Testo pulsante – Se si utilizza Colore del pulsante personalizzato, puoi impostare il colore del testo (etichetta) da qui.
- Sfondo del pulsante – Disponibile anche in Personalizzato, imposta il colore di sfondo del pulsante. Abbinalo al colore del testo per la massima leggibilità e stile.
- Allineamento dei pulsanti - Scegli il Allineamento del pulsante nella forma con l'opzione Sinistra, Centro o Destra.
- Larghezza del pulsante – Scegli quanto largo deve apparire il pulsante:
- Predefinito: Larghezza standard basata sul contenuto del pulsante
- Grande / Extra-Grande: Pulsanti più larghi per maggiore enfasi
- Intera larghezza: Il pulsante si estende su tutta la larghezza del contenitore
Modulo di contatto stile
Lo stile di un modulo di contatto è un aspetto importante per creare un'esperienza visivamente accattivante e di facile utilizzo.
Avrai più opzioni di stile per la sezione:
- Campi modulo
- allineamento
- Testo
- Spaziatura
- Titolo
- Immagini
- Bordo dell'immagine
- Pulsante popup
- Pulsante Modulo
- Pulsanti del titolo
- Icone social del titolo
Campi modulo
Pixpa consente Tu a completamente personalizzare , il aspetto of Your modulo campi. Alcuni degli styling Opzioni applica a contro tutti i ingresso campi in Your Contatti Modulo e dare Tu maggiore di controllo ancora come Your modulo sguardi e feels on Your di COSM
- Forma: Scegli la forma dei campi di input, ad esempio rettangolare, arrotondata, a pillola o testo, in base all'estetica del tuo sito web.
- Fill: Abilita questa opzione per applicare un colore di riempimento per lo sfondo ai campi del modulo.
- Colore base: Imposta il colore di sfondo dei campi quando è abilitata l'opzione di riempimento.
- Outline: Attiva o disattiva il bordo (contorno) per ciascun campo.
- Colore contorno: Scegli il colore del bordo del campo quando il contorno è abilitato.
- Colore del testo del campo: Imposta il colore del testo digitato dagli utenti nei campi del modulo.
- Altezza: Regola l'altezza dei tuoi campi scegliendo tra: Piccola, Media, Grande o Extra Large.
- etichette: Scegli se le etichette dei campi modulo devono essere visualizzate all'interno o all'esterno del campo.
- Colore dell'etichetta: Definisce il colore delle etichette quando vengono posizionate all'esterno del campo.
- Etichetta interna Colore: Imposta il colore per le etichette inserite all'interno del campo (utile per le etichette in stile segnaposto).
- Spaziatura tra i campi: Utilizzare il cursore per impostare la spaziatura verticale (in pixel) tra ciascun campo del modulo.
allineamento
- Gestisci l'allineamento del contenuto del modulo orizzontalmente da Allineamento orizzontale (1).
- Gestisci l'allineamento del contenuto del modulo verticalmente da Allineamento verticale (2).
Testo
- Clicca sul Cambia stile di testo (1) pulsante per visitare il Design sezione e gestire le dimensioni e gli stili dei caratteri.
- specificare la Titolo (2) stile del carattere del modulo.
- specificare la Descrizione (3) stile del carattere del modulo.
Spaziatura
- specificare la Larghezza immagine (1) dell'immagine nel modulo in percentuale.
- specificare la Spazio tra immagine e testo (3) in percentuale.
- specificare la Spazio sotto il titolo (4) in percentuale.
Titolo
- Allinea orizzontalmente il testo del titolo della sezione. Puoi impostarlo su Sinistra, Centro e Destra.
- Abilita/Disabilita il Divider tra il titolo della sezione e il contenuto della sezione.
- Impostare il spessore del divisore (in px).
- specificare la Colore del divisore dal selettore colori.
- Scegli un Stile divisorio dal menu a discesa.
- Impostare il Larghezza del titolo per definire la larghezza del titolo della sezione, partendo da un minimo del 50%.
- specificare la Spazio sotto il titolo all'interno della sezione (in px).
Immagini
- Ritaglio immagine: Scegliere il Imago Ritaglia per le voci dell'elenco. È possibile impostare le immagini come Quadrato, Cerchio, Orizzontale, Ritratto e Originale.
- Raggio dell'angolo: Scegliere di avere un raggio d'angolo comune o un raggio d'angolo diverso per ciascun lato degli elementi dell'elenco e impostare un numero (in px) per il Craggio orner delle immagini delle voci dell'elenco. Vedi qui per saperne di più .
- Animazione al passaggio del mouse: Scegli Animare l'immagine della sezione al passaggio del mouse abilitando l'interruttore. Controlla questa funzione su una pagina live.
- Stile di animazione: Scegli un Stile di animazione per l'immagine quando il cursore passa sopra di essa.
- Maschera di forma: Abilita questo interruttore per applicare una maschera di forma alle immagini nella sezione Elenco immagini. Una volta abilitato, la forma selezionata taglierà visivamente l'immagine in quella forma.
- Seleziona forma: Scegli tra varie forme predefinite da applicare alle tue immagini. Ciò ti consente di dare uno stile creativo al tuo contenuto visualizzando le immagini in forme uniche come arrotondate, a diamante, a goccia, ecc.
Usando il raggio dell'angolo campo, è possibile creare diverse forme delle immagini degli elementi dell'elenco. Nel caso in cui specifichi 500 px qui, le immagini verranno visualizzate a forma di cerchio.
- Nel caso in cui tu abbia scelto gli angoli divisi, puoi impostare un raggio dell'angolo diverso per ogni angolo.
Bordo dell'immagine
- Abilita/Disabilita bordo attorno all'immagine spostando l'interruttore.
- Scegli di avere a confine comune su tutti i lati dell'immagine oppure puoi specificare il confini separatamente per ogni lato.
- specificare la larghezza del confine. Se è impostato su 0, il bordo non verrà visualizzato. Hai anche la possibilità di impostare la larghezza del bordo individualmente per ciascun lato dell'immagine.
- Seleziona il Colore bordo dal selettore colori.
- Seleziona un preferito Border Style dal menu a discesa.
- Determina il larghezza del bordo per dispositivi mobili dispositivi, allineandolo alla larghezza scelta per il desktop.
Pulsante popup
Queste opzioni di stile sono per il pulsante popup, tramite il quale si aprirà il modulo di contatto quando si fa clic sul pulsante.
- Dimensione pulsante – Seleziona la dimensione del pulsante tra le opzioni: piccola, media o grande.
- Spazio sopra il pulsante – Regola la spaziatura verticale sopra il pulsante (in percentuale).
- Stile pulsante – Scegli lo stile del pulsante, ad esempio predefinito o personalizzato.
- Colore pulsante – Seleziona lo stile colore per il pulsante. Le opzioni includono Predefinito, Inverti o Personalizzato.
- Testo del pulsante – Personalizza il colore del testo per il pulsante.
- Sfondo del pulsante – Seleziona il colore di sfondo del pulsante.
Pulsante Modulo
Queste impostazioni consentono di personalizzare il pulsante di invio del modulo in modo che corrisponda al design e al layout della pagina.
- Dimensione pulsante – Seleziona la dimensione del pulsante (Piccolo, Medio o Grande).
- Spazio sopra il pulsante – Regola la spaziatura verticale sopra il pulsante (specificata in percentuale).
- Stile pulsante – Scegli lo stile generale del pulsante, ad esempio Predefinito o Personalizzato.
- Colore pulsante – Imposta lo stile del colore del pulsante. Le opzioni includono Predefinito, Inverti o Personalizzato.
- Testo del pulsante – Personalizza il colore del testo visualizzato sul pulsante.
- Sfondo del pulsante – Seleziona un colore di sfondo per il pulsante.
- Allineamento pulsanti – Scegli l'allineamento del pulsante (sinistra, centro o destra).
- Larghezza del pulsante – Regola la larghezza del pulsante. Le opzioni includono Predefinito, Grande, Extra-Grande o Larghezza intera.
Pulsanti del titolo
Queste impostazioni controllano l'aspetto e la spaziatura dei pulsanti posizionati con il titolo della sezione.
- Dimensione pulsante – Seleziona la dimensione complessiva dei pulsanti (Piccolo, Medio o Grande).
- Spazio tra i pulsanti – Regola la spaziatura tra più pulsanti (misurata in vw).
- Spazio sopra i pulsanti – Imposta la spaziatura verticale sopra i pulsanti (misurata in percentuale).
- Larghezza del pulsante – Scegli la larghezza dei pulsanti. Le opzioni includono Predefinito, Grande, Extra-grande e Larghezza intera.
- Dimensione del collegamento di testo – Specificare la dimensione del carattere dei collegamenti di testo associati ai pulsanti (misurata in px).
- Dimensione del pulsante immagine – Regola le dimensioni dei pulsanti basati su immagini (misurate in px).
Icone social del titolo
Visualizza e personalizza le icone di condivisione social nel modulo.
- Dimensione dell'icona – Regola la dimensione delle icone social (misurata in px).
- Tipo di icona – Scegli lo stile delle icone, ad esempio Classico, Solido o Contorno.
- Colore icona – Seleziona il colore per le icone. Le opzioni includono Testo del link, Personalizzato o Colore del marchio (colore originale della piattaforma social).
- Colore di sfondo dell'icona – Imposta un colore di sfondo personalizzato per le icone per migliorarne la visibilità e lo stile.
Impostazioni modulo di contatto Contact
- Specifica un file nome interno del modulo per facilitarne l'identificazione all'interno di Pixpa Studio. Questo nome non è visibile ai visitatori del sito web.
Azione post invio
- Puoi definire Azione post invio (1) visualizzando a Messaggio di successo (2) o Reindirizzamento dell'utente a un URL specificato.
- Puoi anche aggiungere qualsiasi script nel Post Invia HTML di successo (3) scatola.
Reindirizza il modulo a un'altra pagina
Il reindirizzamento degli utenti a una pagina specifica dopo che hanno inviato un modulo può migliorare l'esperienza complessiva dell'utente e serve a vari scopi come evitare invii duplicati, analisi e tracciamento, trattenere gli utenti sul sito Web per un periodo di tempo più lungo, ecc.
Il reindirizzamento può essere facilmente creato utilizzando il file Azione post invio opzione nella scheda Impostazioni.
- Puoi creare un reindirizzamento all'interno del tuo sito web da Sito Web Content (1) opzione. Può essere una pagina, una galleria, un blog, una galleria di e-commerce, una cartella, ecc. Devi inserire il nome dell'elemento nel campo come mostrato nello screenshot qui sotto e otterrai suggerimenti relativi ad esso.
- Usa il Link Esterno (2) opzione per creare il reindirizzamento al di fuori del tuo sito web. Dovrai inserire l'URL nel campo in cui desideri che gli utenti vengano reindirizzati dopo l'invio del modulo.
Per saperne di più su come usare Link builder.
Esporta i dati del modulo
- Esporta i dati del modulo (4) come file CSV. Scopri di più.
- Salva (5) le modifiche.
Dati modulo inviati
I dati del modulo inviato in un modulo di contatto includono le informazioni che un utente inserisce nei campi del modulo quando lo invia.
- Tutti i dati del modulo sono archiviati e accessibili dal file Modulo di invio pagina dello studio. Scopri di più.
- Tutti i dati inviati tramite il modulo di contatto verranno inoltrati anche all'ID e-mail specificato nelle impostazioni del modulo di contatto. Tuo indirizzo email dell'account viene considerato predefinito.
Controlla anche: Modifica l'indirizzo e-mail dell'account.
Puoi osservare le scegli la frequenza con cui desideri ricevere le notifiche tramite e-mail.
Notifiche e-mail
Da qui, puoi personalizzare l'oggetto dell'email per le notifiche che ricevi come proprietario di un sito web in seguito all'invio di un modulo riuscito. Inoltre, puoi personalizzare l'email di successo inviata agli utenti o ai clienti dopo che hanno inviato il modulo. Questa funzionalità può essere sfruttata per il branding, il marketing e l'esecuzione di campagne in modo efficace.
- Email al proprietario del sito web: Abilita o disabilita le notifiche email per l'invio dei moduli. Se abilitate, le notifiche verranno inviate agli indirizzi email specificati.
- Oggetto: Personalizza l'oggetto dell'email. Usa il {SITO WEB} Variabile per includere dinamicamente il nome del sito web nell'oggetto. Questo è utile quando si hanno più siti web.
- E-mail: Specifica fino a 5 indirizzi email a cui ricevere le notifiche quando il modulo viene inviato.
- specificare la Oggetto dell'email di invio del modulo di contatto. Puoi anche includere {SITO WEB} variabile per includere il nome del sito web.
E-mail al cliente
- Puoi abilitare E-mail al cliente (1) per inviare una mail riguardante il successo dell'invio del Modulo.
- specificare la Oggetto (2) della posta.
- Specificare il contenuto all'interno della posta da Messaggio di successo (3).
- L'email al cliente è una funzionalità premium disponibile solo su Professionale e Avanzato piani. Scopri di più.
- Personalizza attentamente il contenuto dell'e-mail per garantire un'esperienza di comunicazione coerente e professionale con i tuoi clienti.
Esempio live
Ecco un modulo di contatto pop-up dal vivo:
Visualizza un sito dimostrativo dal vivo.
Ecco un modulo di contatto in linea dal vivo:
Visualizza un sito dimostrativo dal vivo.
Per ridurre gli spammer nel modulo, la sicurezza captcha di Google è abilitata automaticamente nel modulo.