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
- Gestisci il modulo di contatto
- Contenuto del modulo di contatto
- Gestione dei campi dei moduli
- Tipi di campi
- Modulo in linea e modulo popup
- Gestisci disposizione
- Modulo di contatto stile
- Impostazioni modulo di contatto Contact
- Reindirizza il modulo a un'altra pagina
- Esporta dati del modulo
- Notifiche e-mail
- Dati modulo inviati
- 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.
Gestisci il modulo di contatto
- Fare clic su Modifica contenuto Pulsante (1).
- Avrai la possibilità di gestire Contenuti (2), disposizione (3), Style (4), Impostazioni profilo (5), e Notifiche e-mail (6).
- Colpire Salva (7) per applicare le modifiche al modulo.
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.
Gestisci campi modulo
In Gestisci campi modulo, puoi specificare i campi che vuoi che i visitatori compilino in questo modulo.
- Fare clic su Aggiungi nuovo campo (1) pulsante per aggiungere più campi al modulo.
- Modifica o Elimina (2) un campo già aggiunto.
- Drag and Drop (3) i campi per cambiare la loro sequenza nel modulo.
- Impostare il Etichetta del pulsante di invito all'azione (4) per il modulo.
Il campo E-mail è obbligatorio nel modulo e non può essere cancellato.
Cliccando sul + Aggiungi campo si aprirà un pop-up da cui è possibile scegliere i campi del modulo.
- Cattura il Nome del tuo cliente.
- Cattura qualsiasi piccola informazione attraverso il testo breve campo.
- Cattura qualsiasi informazione/messaggio elaborato attraverso il file Testo lungo campo.
- Cattura il email del tuo cliente.
- Cattura qualsiasi informazioni numeriche dal tuo cliente
- Aggiungi servizi tra cui scegliere in a discesa modo.
- Selezione singola: Aggiungi una selezione radio per i tuoi servizi.
- Selezione multipla: Aggiungi un campo casella di controllo per selezioni multiple.
- Aggiungere un date picker in modo che i tuoi clienti possano scegliere una data per qualsiasi evento.
- Aggiungere un linea tra i campi del modulo.
- Cattura il indirizzo del tuo cliente.
- Cattura il sito web ufficiale del tuo cliente.
- Cattura il telefono numero del tuo cliente.
- Aggiungere un tempo campo in modo che i tuoi clienti possano specificare l'ora dell'evento da soli.
- Aggiungere un separatore tra i campi del modulo.
- Migliori campo del consenso l'opzione può essere utilizzata per prendere le autorizzazioni per le newsletter, accettando la privacy e i termini di utilizzo.
- Prendi le recensioni dei clienti utilizzando il stella scala, scala numericae scala di smiley.
- 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
Stile modulo
- Mostra il modulo come popup – Abilita questa opzione per aprire il modulo in una finestra popup facendo clic sul pulsante di invito all'azione.
- Etichetta del pulsante di invito all'azione – Imposta il Etichetta del pulsante di invito all'azione per il modulo.
- Popup del titolo – Specificare il modulo Titolo, se del caso.
- Carica o elimina (1) l'immagine del modulo per il modulo.
- Aggiungere un Titolo (2)e Descrizione (3) per il modulo. Prima di aggiungere la descrizione, controlla questo articolo.
Titolo
- Titolo – Specificare il Titolo della sezione (1) per la sezione Modulo di pagamento.
- Pulsanti e icone – Scopri di più su Pulsanti e icone (2).
Gestire l'Impaginazione
- Fare clic su Modifica contenuto Pulsante (1).
- Scegliere il disposizione (2) scheda.
- Seleziona il disposizione per la tua sezione (3) e Salva (4) le modifiche.
La modifica del layout applicherà lo stile predefinito del modulo.
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
- Clicca sul Modifica contenuto Pulsante (1).
- Personalizza le impostazioni del modulo da Impostazioni profilo (2) scheda e Salva (3) le tue modifiche.
Nome del modulo
- Inserisci un nome per identificare il modulo di contatto in Pixpa Studio. Questo nome non è visibile ai visitatori del sito web.
Azione post invio
Come azione successiva all'invio, puoi scegliere di farlo Mostra il messaggio di successo (1) o Reindirizzamento all'URL (2).
In caso di Mostra il messaggio di successo (1)
- specificare la Messaggio di successo (2) che viene visualizzato dopo che l'utente ha inviato il modulo.
- Puoi anche aggiungere qualsiasi script nel file successo post-pagamento HTML (3) scatola.
- In caso di Rindirizzare all'URLÈ possibile specificare qualsiasi pagina interna/esterna facendo clic sull'icona delle impostazioni (⚙️). Vedi qui per saperne di più .
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.
Sincronizza ed esporta i dati dei moduli
- Invia i dati del modulo a Make.com. Scopri di più.
- Invia i dati del modulo a Zapier.com. Scopri di più.
- Esporta i dati del modulo come file CSV. Scopri di più.
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 3 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.
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.
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.