Aggiungere un modulo di contatto

Panoramica

Utilizza il widget Modulo di contatto per aggiungere un modulo Web completo al tuo sito. Con il modulo di contatto puoi offrire ai visitatori diverse aree di immissione testo, menu a discesa, pulsanti di opzione, caselle di controllo e spazi per data, ora, e-mail e numero di telefono. Puoi usare il modulo per l'adesione alle newsletter, domande dei clienti oppure per raccogliere feedback dai visitatori del sito.

Guida

1. Aggiungi il widget Modulo di contatto allo strumento di creazione di siti Web. Per maggiori informazioni sull'aggiunta di widget al sito Web, vedi Aggiunta di widget. Una volta posizionato il widget viene visualizzato l'Editor di contenuti.

2. Scegli le informazioni che desideri ottenere dai visitatori e modifica il campo esistente facendo clic sul nome del campo.

3. Aggiungi nuovi campi facendo clic sul pulsante Aggiungi campo.

addacontactform_1_en-US.png

4. Fai clic sulla scheda Invii. Nella sezione Destinatari invio, imposta indirizzo e-mail e oggetto per la ricezione delle risposte del modulo.  addacontactform_2_en-US.png5. Nella sezione Azioni di invio, imposta i messaggi di conferma e di errore da visualizzare quando i visitatori inviano il modulo. Usa l'Editor Rich Text per aggiungere colore, enfasi (grassetto, corsivo e sottolineato), e punti elenco al testo nei riquadri del messaggio.

addacontactform_3_en-US.png6. Nella sezione Tracciamento, aggiungi un codice di tracciamento al modulo. Se disponi di AdWords o di altro codice di conversione, puoi incollarlo qui. addacontactform_4_en-US.png

Integrazioni

Puoi ampliare la portata del modulo dei contatti integrandolo con Fogli Google, Mailchimp, Constant Contact o con un'applicazione di terze parti tramite dei Webhook.

Integrazione con Fogli Google

Aggiungi istantaneamente i dati di invio del modulo di contatto a un foglio di lavoro in Fogli Google. Tutti i campi di contatto del modulo verranno compilati nel foglio di lavoro con la data e l'ora di invio del modulo.

Passaggi

Fai clic sulla scheda Integrazioni nell'area delle impostazioni generali del modulo di contatto.
addacontactform_5_en-US.png

Espandi l'opzione Fogli Google e fai clic su ACCEDI CON GOOGLE.

addacontactform_6_en-US.png

Fai clic su Consenti per concedere le autorizzazioni per la connessione all'account Google. Se il computer è connesso a più account Google, scegli quello che desideri collegare a questo modulo.

addacontactform_7_en-US.png

Scegli se desideri aggiungere i dati a un foglio di lavoro esistente o a uno nuovo.

addacontactform_13_en-US.png

Seleziona il foglio di lavoro a cui desideri inviare i dati del modulo. Puoi selezionare il foglio di lavoro da un elenco oppure utilizzare la barra di ricerca per cercare un foglio specifico.

addacontactform_9_en-US.png

Considerazioni aggiuntive

  • Se sul sito sono presenti più moduli, puoi collegare ciascuno di questi ultimi a un foglio di lavoro diverso, inclusi i fogli di lavoro presenti in diversi account Google.
  • Puoi anche collegare un paio di moduli allo stesso foglio di lavoro. In questo caso, assicurati che i campi e il loro ordine nel modulo siano identici in modo da corrispondere alle informazioni inviate.
  • L'invio dei dati del modulo a un foglio di lavoro di Google non impedisce il download dei dati come file CSV o la ricezione delle email di invio dei moduli.

Integrazione con MailChimp

MailChimp è un fantastico strumento per la distribuzione di campagne email, newsletter e così via. Utilizzando la nuova integrazione dei moduli, i proprietari dei siti possono gestire gli elenchi di contatto dei potenziali clienti (visitatori del sito) raccogliendo gli indirizzi email inviati al modulo e inviando tali contatti automaticamente a MailChimp.

Occorre avere un account MailChimp. Dopo aver creato un account, crea una mailing list nell'account MailChimp in cui verranno raccolti i dettagli di contatto.

Passaggi

Fai clic sulla scheda  Integrazioni  nell'area delle impostazioni generali del modulo.

addacontactform_10_en-US.png

Espandi l'opzione MailChimp e scegli CONNETTI A MAILCHIMP.

addacontactform_11_en-US.png

Accedi con le credenziali di MailChimp.

addacontactform_12_en-US.png

Seleziona l'elenco dei contatti MailChimp dal menu a discesa.

addacontactform_18_en-US.png

Configura i campi del modulo. Oltre all'indirizzo email, il contatto può inviare automaticamente a MailChimp i campi di nome e cognome. Occorre configurare i campi di email/nome/cognome nel modulo.

addacontactform_14_en-US.png

Integrazione con Constant Contact

Si tratta di un'integrazione simile a MailChimp, ma che consente ai proprietari dei siti di creare delle mailing list nell'account Constant Contact.

Occorre avere un account Constant Contact. Dopo aver creato un account, crea una mailing list nell'account Constant Contact in cui verranno raccolti i dettagli di contatto.

Passaggi

Fai clic sulla scheda  Integrazioni  nell'area delle impostazioni generali del modulo.

addacontactform_15_en-US.png

Espandi l'opzione Constant Contact e scegli CONNETTI A CONSTANT CONTACT.

addacontactform_16_en-US.png

Accedi con le credenziali di Constant Contact.

addacontactform_17_en-US.png

Seleziona l'elenco dei contatti Constant Contact dal menu a discesa.

addacontactform_18_en-US.png

Configura i campi del modulo. Oltre all'indirizzo email, il modulo di contatto può inviare automaticamente a MailChimp le informazioni di nome, cognome e numero di telefono a Constant Contact. L'utente deve configurare i campi di email/nome/cognome nel modulo di contatto. Il campo dell'indirizzo email e del messaggio di testo vengono aggiunti per impostazione predefinita.

addacontactform_19_en-US.png

Integrazioni tramite Webhook

Molti servizi cloud e online offrono delle integrazioni tramite un percorso denominato WebhookI Webhook inviano delle notifiche a un indirizzo Web specifico denominato URL di endpoint. Puoi collegare il modulo di contatto per inviare un evento insieme al modulo di contatto.

Per collegare il modulo di contatto a un altro servizio tramite i Webhook, basta creare un URL di endpoint personalizzato con il servizio desiderato e incollarlo nel campo di integrazione dei Webhook nel modulo di contatto. Dopo aver aggiunto un URL del Webhook, il modulo di contatto invierà una richiesta POST all'endpoint con i dati nel corpo del testo in formato JSON quando il modulo di contatto viene inviato sul sito Web. Ecco un esempio dei dati JSON che verranno inviati:

{"Data di invio":"06/02/2016 10:23:54","Titolo modulo":"Contattaci","Nome":"Giovanni Rossi","Email":"test@esempio.com","Telefono":"(555).555.1212","Messaggio":"Webhook Invio modulo!"}

Tieni presente che le informazioni per “Data di invio” e “Titolo modulo” verranno sempre fornite. Gli altri campi (field_name : value) si basano sui campi configurati nel modulo.

Creare un URL di endpoint

Gli endpoint vengono configurati sui servizi di terze parti (ad es. Zapier o Slack) o su un altro server che puoi controllare. Tali endpoint vengono configurati specificamente per la ricezione di notifiche dal Webhook.

addacontactform_20_en-US.png

Idee di integrazione

Zapier: collega i dati del modulo di contatto a Zapier per disporre di infinite possibilità. Collegati praticamente con tutti i servizi cloud moderni, tra cui CRM come Salesforce, Sugar CRM, Zoho e altri.

Slack: applicazione di messaggistica affidabile, ti consente di connetterti per ricevere notifiche non appena i dati sul modulo vengono inviati.

Integrazione personalizzata: crea i tuoi percorsi Webhook personalizzati da integrare con il modulo di contatto. Ad esempio, salva gli invii in un database o effettua la connessione a delle applicazioni personalizzate o a dei servizi di terze parti.

Esempi di configurazione di Webhook /URL di endpoint su Slack

Nell'app Slack, apri il menu a tendina principale dell'account, quindi fai clic su App e Integrazioni.

addacontactform_21_en-US.png

Si aprirà il sito Web di Slack. Nell'angolo in alto a destra, fai clic sul pulsante Crea.

addacontactform_22_en-US.png

Fai clic su Crea un'integrazione personalizzata.

addacontactform_23_en-US.png

Seleziona Webhook in arrivo.

addacontactform_24_en-US.png

Seleziona un canale esistente oppure crea un nuovo canale su cui verranno pubblicati i messaggi.

addacontactform_25_en-US.png

Copia l'URL dei Webhook.

addacontactform_26_en-US.png

Modifica le impostazioni e le opzioni in base alle necessità e fai clic su Salva impostazioni.

addacontactform_27_en-US.png

Quindi, torna al modulo di contatto e incolla l'URL dei Webhook nel campo Webhook. Fai clic su Fine per completare la configurazione.

addacontactform_28_en-US.png

Visualizza in anteprima il sito e invia il modulo di contatto per testare l'integrazione.

addacontactform_29_en-US.png

Se visualizzi il messaggio nel canale selezionato, la configurazione è stata completata correttamente. Riceverai un messaggio su Slack ogni volta che il modulo di contatto viene inviato.

addacontactform_30_en-US.png

File allegati

Agli invii del modulo di contatto possono essere allegati dei file. Per farlo, crea un campo per i file allegati nel modulo di contatto. I collegamenti ai file caricati sono disponibili nel file di download degli invii del modulo, oltre che in tutte le altre integrazioni del modulo come i Webhook e Fogli Google.

Passaggi

Aggiungi un nuovo campo a un modulo di contatto.

addacontactform_31_en-US.png

Seleziona il file da allegare dal menu a discesa. Puoi modificare il testo del segnaposto per modificare il nome di questo campo.

addacontactform_32_en-US.png

Al modulo verrà aggiunto un collegamento per caricare i file.

addacontactform_33_en-US.png

Design

Apri l'editor di design facendo clic sulla scheda Design nell'angolo in alto a sinistra oppure facendo clic con il tasto destro del mouse sul widget e selezionando "Modifica design" per modificare il layout dei pulsanti, gli elementi, la cornice e gli spazi. 

addacontactform_34_en-US.png

Layout

Fai clic sulla scheda Layout e quindi fai clic sull'icona Layout per scegliere un design diverso per il modulo di contatto. Modifica l'allineamento del modulo facendo clic su sinistra o destra, in base a come desideri allineare gli spazi tra i campi.

addacontactform_35_en-US.png

Elemento

Fai clic sulla scheda Elemento per apportare modifiche allo stile e al testo del campo, nonché allo stile e al testo del pulsante. Puoi modificare il design dei campi e del pulsante, come il colore dello sfondo e gli stili del bodo, nonché il testo del campo e del pulsante, come dimensioni, carattere, allineamento e altro ancora. Il pulsante "Torna al design globale" consente di ripristinare lo stile globale.

addacontactform_36_en-US.png

Cornice

Fai clic sulla scheda Cornice per effettuare modifiche allo stile. Puoi modificare lo sfondo aggiungendo un colore o un'immagine, modificare lo stile del testo della notifica dell'invio, aggiungere un bordo e personalizzare il carattere nel titolo del modulo.

addacontactform_37_en-US.png

Spaziatura 

Fai clic sulla scheda Spaziatura per apportare modifiche agli spazi interni ed esterni del modulo di contatto. Maggiori informazioni sugli spazi sono disponibili qui.

addacontactform_38_en-US.png

File allegati

Al modulo di contatto possono essere allegati file. Per farlo, crea un campo per i file allegati nel modulo di contatto. Ai visitatori viene fornito un collegamento per caricare i file attraverso il modulo di contatto.

Per aggiungere questa opzione al modulo:

  1. Aggiungi un nuovo campo a un modulo di contatto.
  2. Seleziona il file da allegare dal menu a discesa. Puoi modificare il testo del segnaposto per modificare il nome dell'area.
  3. Al modulo verrà aggiunto un collegamento per caricare i file.

Considerazioni

I moduli di contatto sono uno strumento eccezionale per ottenere informazionni preziose da clienti e visitatori. Accertati di inserire il tuo indirizzo e-mail nel destinatario delle impostazioni di consegna al fine di ricevere una copia delle informazioni immesse.

Risorse

  • Per maggiori informazioni sulla modifica di widget, vedi Modifica di widget.
  • Per maggiori informazioni sulla modifica del design e dello stile dei widget, consultare la sezione sul design del widget.