Una volta chiedevo alle persone di inviarmi via email le loro foto per il mio sito web. Foto profilo per siti di appartenenza, primi piani per pagine del team, persino semplici immagini per la verifica dell'identità – e ogni singola volta, si trasformava in un pasticcio di avanti e indietro.
Le persone dimenticavano di allegare il file. Oppure inviavano una foto troppo grande. A volte facevano uno screenshot di una foto invece di inviare l'immagine effettiva, e la qualità era terribile.
Poi ho capito che potevo permettere alle persone di scattare foto e registrare video tramite i miei moduli WordPress. Devono solo fare clic su un pulsante, scattare una foto (o registrare un breve video), e questo è tutto.
In questa guida, ti mostrerò come aggiungere questa funzionalità di acquisizione della fotocamera ai tuoi moduli WordPress in modo da poter saltare tutti i grattacapi che ho avuto.
Perché aggiungere l'acquisizione della fotocamera live nei moduli WordPress?
L'acquisizione della fotocamera live nei tuoi moduli WordPress rende molto più veloce e facile per le persone inviare foto o video. Questo può portare a un maggior numero di utenti che completano effettivamente il tuo modulo.
Pensa a cosa succede quando chiedi a qualcuno di caricare una foto sul tuo modulo di contatto. Devono interrompere quello che stanno facendo, aprire la loro app fotocamera, scattare la foto, chiudere la fotocamera, trovare la foto nella loro galleria, e poi tornare indietro per caricarla.
Sono molti passaggi. E ogni passaggio aggiuntivo è un'altra possibilità che qualcuno rinunci e abbandoni il tuo modulo.
Con un campo di acquisizione live della fotocamera, le persone possono scattare foto o registrare video senza mai lasciare il modulo. Fanno clic su un pulsante, la fotocamera si apre direttamente nel loro browser e hanno finito in pochi secondi.
Questo è più importante di quanto si possa pensare. Ho visto i tassi di completamento dei moduli aumentare in modo significativo semplicemente rimuovendo l'attrito dei tradizionali caricamenti di file.
Ecco alcune situazioni reali in cui l'acquisizione tramite fotocamera fa un'enorme differenza:
| Tipi di siti | Casi d'uso |
|---|---|
| Team di assistenza clienti | Lascia che le persone mostrino il loro problema invece di cercare di descriverlo a parole. |
| Siti di proprietà/Immobiliare | Fai in modo che gli inquilini documentino i problemi di manutenzione sul posto invece di scambiarsi foto via SMS. |
| Scuole/Piattaforme eLearning | Raccogli le foto degli studenti durante le ammissioni online senza chiedere ai genitori di inviare file separati via email. |
| Compagnie di assicurazione | Accelera le richieste di risarcimento facendo fotografare ai clienti i danni immediatamente. |
La parte migliore dell'utilizzo di un plugin a questo scopo è che tutto viene organizzato automaticamente.
Quando qualcuno invia il tuo modulo, la sua foto o video viene allegata alla sua voce insieme a tutte le altre sue informazioni. Niente più ricerche nella casella di posta elettronica nel tentativo di abbinare le foto alla persona giusta. ✨
Detto questo, ti mostrerò tutti i passaggi per aggiungere una funzionalità di acquisizione tramite fotocamera ai tuoi moduli WordPress. Ecco tutto ciò che tratterò in questa guida:
- Passaggio 1: Installa e attiva WPForms Pro
- Passaggio 2: Aggiungi il campo fotocamera al tuo modulo
- Passaggio 3: Configura il campo fotocamera del tuo modulo
- Step 4: Set Up Button Style, Storage, and Access Settings
- Fase 5: Imposta notifiche e conferme del modulo
- Fase 6: Testa e incorpora il tuo modulo
- Domande frequenti sulla cattura di foto o video dalla fotocamera live nei moduli WordPress
- Altre guide all'uso dei moduli WordPress
Passaggio 1: Installa e attiva WPForms Pro
In questa guida, utilizzerò WPForms, che è il miglior plugin per moduli di contatto per WordPress. Ho scelto questo plugin perché ha un campo di cattura della fotocamera, che puoi aggiungere facilmente con un semplice drag-and-drop.
Puoi anche usare WPForms per creare molti moduli diversi, inclusi moduli di contatto, moduli d'ordine online con pagamenti, sondaggi e questionari, e iscrizioni alla newsletter.
Su WPBeginner, usiamo WPForms per tutti i nostri moduli: moduli di contatto, richieste di migrazione del sito, il sondaggio annuale dei lettori e altro ancora. Siamo grandi fan di questo strumento e puoi saperne di più nella nostra recensione completa di WPForms.
Innanzitutto, visita il sito web di WPForms per creare un account. Fai clic sul pulsante 'Get WPForms Now', scegli un piano che soddisfi le tue esigenze e completa la registrazione.
💡 Nota: Avrai bisogno di WPForms Pro per accedere alla funzionalità di cattura della fotocamera, oltre a extra come la logica condizionale e i temi dei moduli. Detto questo, puoi comunque iniziare con la versione gratuita di WPForms se vuoi provare prima il plugin.
Dopo la registrazione, dovresti essere in grado di trovare il file zip del plugin e la chiave di licenza nella dashboard del tuo account WPForms. Puoi lasciare questa scheda aperta o conservare il tuo file e la tua chiave in un luogo sicuro, come un gestore di password.
Ora, andiamo alla tua bacheca di WordPress e naviga su Plugin » Aggiungi nuovo plugin.
Nella schermata successiva, puoi usare la barra di ricerca per cercare il plugin WPForms.
Fai clic su 'Installa ora' nei risultati della ricerca e su 'Attiva' quando appare.
Se hai bisogno di aiuto, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, vai su WPForms » Impostazioni dalla tua area amministrativa per attivare la tua licenza WPForms Pro.
Copia semplicemente la tua chiave di licenza e incollala nella casella. Quindi fai clic sul pulsante 'Verifica chiave'.
WPForms confermerà che la tua licenza è attiva. Ora sei pronto per iniziare a creare moduli con acquisizione tramite fotocamera.
Passaggio 2: Aggiungi il campo fotocamera al tuo modulo
In questo passaggio, creerai un modulo con la funzionalità di acquisizione tramite fotocamera.
Per iniziare, puoi navigare su WPForms » Aggiungi nuovo nella tua bacheca di amministrazione di WordPress.
Questo ti porterà alla pagina di configurazione, dove puoi nominare il tuo modulo.
Questo è solo per tuo riferimento, ma consiglio di utilizzare un nome chiaro e descrittivo per una più facile organizzazione man mano che crei altri moduli WordPress.
Successivamente, sceglierai come costruire il tuo modulo.
WPForms ti consente di creare moduli utilizzando una tela bianca, un generatore di moduli basato sull'intelligenza artificiale o un modello predefinito.
Con WPForms AI, tutto ciò che devi fare è scrivere un semplice prompt. Il generatore di moduli AI lo creerà per te in pochi secondi.
Per questo tutorial, tuttavia, utilizzerò il modello Simple Contact Form.
WPForms è dotato di oltre 2.000 modelli di moduli predefiniti, quindi è facile trovarne uno che soddisfi le tue esigenze.
Se desideri istruzioni passo passo, consulta la nostra guida su come creare un modulo di contatto in WordPress.
Una volta che il tuo modulo si apre nel generatore, guarda la barra laterale sinistra dove sono elencati tutti i campi del modulo. Scorri verso il basso finché non trovi la sezione etichettata 'Fancy Fields'.
Proprio lì, accanto al campo Carica file, vedrai il campo ‘Fotocamera’. Puoi trascinarlo e rilasciarlo ovunque tu voglia che appaia nel tuo modulo.
💡 Nota: Il campo Carica file è ideale per raccogliere file che gli utenti hanno già sul loro dispositivo, come foto salvate o PDF. Per questo tutorial, il campo Fotocamera funziona meglio perché consente agli utenti di acquisire una foto o un video al momento, senza uscire dal modulo.
Noterai che un'icona di una piccola fotocamera appare nell'anteprima del tuo modulo. È quello su cui i tuoi utenti faranno clic per acquisire la loro foto o video.
Una cosa che ho trovato interessante con questa funzionalità è che quando qualcuno fa clic sul pulsante della fotocamera su un laptop o desktop, vedrà un simpatico conto alla rovescia di 3 secondi prima dell'acquisizione. Questo dà loro il tempo sufficiente per sorridere o regolare il proprio angolo.
Ecco come potrebbe apparire nell'anteprima:
Ecco fatto: ti avevo detto che questa parte era veloce!
Passaggio 3: Configura il campo Fotocamera del tuo modulo
Da qui, puoi configurare il tuo campo Fotocamera.
Fai clic sul campo ‘Fotocamera’ che hai appena aggiunto per aprire il pannello ‘Opzioni campo’ sul lato sinistro. Qui personalizzerai il funzionamento dell'acquisizione della fotocamera.
La prima cosa che vedrai è l'impostazione ‘Etichetta’.
Per impostazione predefinita, il campo si chiama Fotocamera, ma puoi rinominarlo per farlo corrispondere a ciò che stai raccogliendo. Ad esempio: Foto profilo, Screenshot errore o Foto danno, a seconda del tuo caso d'uso.
In ‘Descrizione’, puoi aggiungere una breve nota con dettagli o istruzioni aggiuntive, come cosa dovrebbe essere visibile nella foto o eventuali requisiti di qualità.
Ad esempio:
- “Usa una buona illuminazione per mantenere l'immagine chiara,” per le foto profilo.
- “Assicurati che tutto il testo sia leggibile,” per gli screenshot degli errori.
- “Includi l’intera proprietà nell’inquadratura”, per i rapporti sui danni.
Questo mantiene l'etichetta breve e facilmente leggibile, e utilizza la descrizione solo per indicazioni utili.
Poi c'è l'impostazione 'Formato', dove vedrai due scelte:
- Foto – funziona bene per le foto del profilo, le carte d'identità o qualsiasi situazione in cui è necessario uno scatto rapido.
- Video – perfetto quando vuoi che le persone registrino brevi introduzioni, testimonianze, o spieghino qualcosa che è più facile da mostrare che da descrivere.
Per impostazione predefinita, WPForms lo imposta su 'Foto', ma puoi passare dall'uno all'altro in qualsiasi momento.
Ora puoi scorrere fino all'impostazione 'Dimensione massima file', dove puoi controllare quanto grande può essere il file inviato dall'utente.
Puoi inserire qualsiasi numero di megabyte (MB) desideri. Se lasci questo campo vuoto, WPForms utilizzerà il limite predefinito del tuo server, che di solito è di circa 64 MB. Puoi anche aumentare la dimensione massima di caricamento file se necessario.
Consiglio di impostare un limite ragionevole in base a ciò di cui hai effettivamente bisogno. Dimensioni di file più piccole aiutano i tuoi moduli a caricarsi più velocemente e risparmiano spazio sul tuo server.
Non dimenticare di attivare il pulsante 'Obbligatorio' in modo che gli utenti non possano saltare questo campo.
Se hai scelto 'Video' come formato, vedrai anche un'opzione 'Limite di tempo'. Il valore predefinito è 1 minuto e 30 secondi, che funziona bene per la maggior parte delle situazioni.
🧑💻 Suggerimento Pro: I file video possono diventare grandi e danneggiare le prestazioni del tuo WordPress. Questo campo va bene per clip brevi (meno di 30 secondi). Ma se hai bisogno che gli utenti inviino video lunghi (5+ minuti), allora è meglio farli caricare su un servizio cloud e condividere il link.
Consulta la nostra guida su perché non dovresti mai caricare un video su WordPress per saperne di più.
Puoi modificare queste impostazioni per adattarle alle tue esigenze.
Passaggio 4: Imposta Stile Pulsante, Archiviazione e Impostazioni di Accesso
Qui, ti guiderò attraverso le impostazioni avanzate per il tuo campo Fotocamera. Qui è dove perfezioni l'aspetto della funzione fotocamera e dove vengono archiviati i tuoi file acquisiti.
Per iniziare, passa alla scheda ‘Avanzate’ in cima al pannello Opzioni campo.
Analizziamo ciascuna di queste opzioni di configurazione.
Personalizza lo stile e il testo del pulsante fotocamera
Per prima cosa, trova il menu a discesa ‘Stile’. Puoi scegliere di mostrare un'icona del pulsante o visualizzarlo come un semplice link.
Di solito mi attengo allo stile del pulsante perché è più evidente e facile da cliccare, ma l'opzione link funziona bene se desideri un aspetto più pulito e minimale.
Subito sotto, vedrai il campo ‘Testo link pulsante’. Questa è la tua occasione per rendere il pulsante della fotocamera più personale o in linea con il tuo brand.
Invece del testo predefinito, potresti scrivere qualcosa come “Scatta la tua foto” o “Registra un video”. Ho persino visto persone usare frasi divertenti come “Dici cheese!” per i moduli delle foto profilo.
Questi piccoli tocchi rendono il tuo modulo di contatto più accogliente e meno robotico.
Stile ulteriore con classi CSS
Successivamente, vedrai il campo Classi CSS. Questo ti permette di aggiungere un nome di classe personalizzato in modo da poter stilizzare questo campo fotocamera in modo diverso con CSS.
Ad esempio, potresti aggiungere una classe come custom-camera-btn qui. Questo non stilizza automaticamente il pulsante, ma ti permette (o a uno sviluppatore) di aggiungere CSS personalizzato nelle impostazioni del tuo tema per indirizzare questo pulsante specifico in seguito.
Se vuoi aggiungere più di una classe CSS, puoi separarle con spazi, così:camera-field large-button.
Lascerò questo campo vuoto per mantenere lo stile coerente con il resto dei miei campi del modulo.
Scegli dove archiviare i file acquisiti
Per impostazione predefinita, WPForms salva tutte le foto e i video acquisiti nella cartella ‘Upload’ del tuo sito, specificamente all'interno della directory WPForms.
Ma se preferisci conservare tutti i tuoi media in un unico posto, attiva l'opzione che dice 'Archivia il file nella Libreria multimediale di WordPress'.
Ricorda solo che i file nella Libreria multimediale sono spesso più facili da accedere per il pubblico, quindi tieni questa impostazione disattivata se stai raccogliendo documenti sensibili.
🧑💻 Suggerimento Pro: Puoi anche collegare WPForms con Dropbox o Google Drive se vuoi archiviare i file esternamente. Questo è utile se sei preoccupato di consumare troppo spazio sul server o se desideri backup automatici nel cloud.
Indipendentemente da dove archivi i file, puoi sempre visualizzarli nella tua dashboard 'Voci', allegati a ogni invio del modulo.
Limita l'accesso ai file caricati
Se il tuo modulo raccoglie informazioni sensibili, come foto di documenti d'identità o documenti personali, vorrai limitare chi può visualizzare questi file. Scorri verso il basso e attiva 'Abilita restrizioni di accesso ai file'.
Una volta abilitata questa opzione, otterrai due opzioni di sicurezza. La prima è che puoi limitare l'accesso in modo che solo gli utenti registrati di WordPress possano visualizzare i file.
L'altra opzione è aggiungere la protezione tramite password al tuo modulo per un ulteriore livello di sicurezza.
Questo è particolarmente importante per i moduli utilizzati in ambito sanitario, legale o in qualsiasi altro contesto in cui si gestiscono informazioni private.
Senza queste restrizioni, chiunque disponga dell'URL del file potrebbe potenzialmente visualizzare i media caricati.
Puoi prenderti il tuo tempo per configurare queste opzioni avanzate prima di procedere.
Fase 5: Imposta notifiche e conferme del modulo
Ora che il tuo campo fotocamera funziona, devi assicurarti di ricevere effettivamente una notifica quando qualcuno invia il tuo modulo.
Per fare ciò, puoi andare su Impostazioni » Notifiche nel modulo.
WPForms imposta automaticamente una notifica email di base che viene inviata al tuo indirizzo email dell'amministratore di WordPress. Ogni volta che qualcuno invia il tuo modulo con una foto o un video acquisito, riceverai un'email con tutti i dettagli.
Puoi personalizzare chi riceve queste notifiche modificando il campo ‘Invia a indirizzo email’. Se desideri che vengano notificate più persone, inserisci tutti gli indirizzi email separandoli con virgole.
Puoi anche utilizzare un tag intelligente per inviare notifiche dinamicamente, ad esempio, all'indirizzo email inviato nel modulo.
Consulta la nostra guida su come creare un modulo di contatto con più destinatari per maggiori dettagli.
L'email di notifica includerà un link diretto per visualizzare la foto o il video acquisito. Questo ti permette di visualizzare in anteprima il file immediatamente dalla tua casella di posta senza dover prima accedere alla bacheca di WordPress.
💡 Nota: WordPress non sempre invia le email in modo affidabile e a volte le notifiche dei moduli finiscono nello spam o non vengono inviate affatto. Per risolvere questo problema, ti consiglio di utilizzare il plugin WP Mail SMTP. Per maggiori dettagli, consulta come risolvere il problema di WordPress che non invia email.
Dopo che qualcuno ha inviato il tuo modulo, deve sapere che è andato a buon fine.
Andiamo al pannello ‘Conferme’ per decidere cosa succede dopo che qualcuno ha inviato il modulo:
- La conferma del Messaggio – mostra un semplice messaggio di testo sulla stessa pagina dopo l'invio, come “Grazie! Abbiamo ricevuto la tua richiesta.”
- La conferma della Pagina di Visualizzazione – reindirizza le persone a una pagina diversa del tuo sito. Questo funziona bene se vuoi inviarle a una pagina di ringraziamento personalizzata con maggiori informazioni.
- La conferma di reindirizzamento – invia le persone a qualsiasi URL desideri, anche su un sito web diverso. L'ho usato per inviare le persone a una pagina di prenotazione o a un'offerta speciale dopo che hanno inviato il modulo.
Puoi scegliere l'opzione che ha più senso per la tua situazione.
Di solito mi attengo alla conferma 'Messaggio' perché è semplice e le persone sanno immediatamente che la loro richiesta è andata a buon fine.
Se vuoi usarla anche tu, ti consiglio di riscrivere il messaggio predefinito in modo che corrisponda al tono del tuo brand:
Fase 6: Testa e incorpora il tuo modulo
Prima di condividere il tuo modulo con il mondo, devi assicurarti che la cattura della fotocamera funzioni effettivamente.
Inizia facendo clic sul pulsante 'Salva' in alto a destra del costruttore di moduli per salvare tutte le modifiche.
Ora visualizziamo in anteprima questo modulo su una pagina in modo che tu possa testarlo.
Fai clic sul pulsante 'Anteprima' per aprire l'anteprima del tuo modulo in una nuova scheda.
Nell'anteprima, puoi compilare i campi del tuo modulo con dati fittizi.
Per assicurarti che la convalida funzioni, prova a inserire un errore di battitura o a lasciare vuoto un campo obbligatorio.
Successivamente, fai clic sul pulsante della fotocamera nel tuo modulo.
Il tuo browser ti chiederà quindi il permesso di accedere alla tua fotocamera. Fai clic su 'Consenti questa volta' o 'Consenti durante la visita del sito' per concedere l'autorizzazione.
Nota: Per motivi di sicurezza, alcuni browser bloccano l'accesso alla fotocamera se il tuo sito non utilizza HTTPS. Assicurati che sia installato un certificato SSL, altrimenti il pulsante della fotocamera non funzionerà.
Dovresti ora vederti sullo schermo con un conto alla rovescia di 3 secondi. Sorridi e lascia che catturi la tua foto o il tuo video.
Una volta compilato tutto, fai clic su ‘Invia’ e verifica se il tuo messaggio di conferma appare correttamente. Puoi quindi fare clic sul link ‘Visualizza voci’ per vedere se l'invio del modulo è andato a buon fine.
Nella schermata successiva, dovresti vedere il tuo test di invio.
Nella colonna Azioni, fai clic su ‘Visualizza’ per vedere la voce.
Ora puoi scorrere verso il basso per vedere la tua foto o video acquisito allegato proprio lì.
Ecco come appare sul mio schermo:
Una volta che tutto è a posto, puoi aggiungere questo modulo al tuo sito web WordPress.
Fai clic sul pulsante ‘Incorpora’ per avviare la procedura guidata.
Si aprirà una finestra popup in cui potrai scegliere una pagina esistente o crearne una nuova per il tuo modulo.
- Seleziona Pagina Esistente: Un menu a tendina mostrerà tutte le pagine del tuo sito WordPress.
- Crea Nuova Pagina: Apparirà un campo ‘Dai un nome alla tua pagina’ per inserire un titolo.
Per questa guida, sceglierò ‘Crea Nuova Pagina’.
Successivamente, inserisci un nome per la tua nuova pagina, ad esempio, io la chiamo “Modulo di Contatto”.
Fai clic su ‘Iniziamo!’
Verrai quindi reindirizzato all'editor a blocchi della pagina con il tuo modulo già caricato.
Da qui, puoi modificare le ‘Impostazioni Modulo’ nel pannello di destra.
Per impostazione predefinita, il titolo del modulo è nascosto, quindi potresti volerlo attivare per dare ai visitatori più contesto. Puoi anche abilitare la descrizione se ne hai aggiunta una.
Per renderlo ancora più bello, personalizza il modulo per abbinarlo al tema del tuo sito.
Vai avanti e scegli un tema dalla sezione Temi.
Quando sarai soddisfatto del risultato, fai clic su ‘Salva’.
Fatto ciò, pubblica o aggiorna la tua pagina e fai clic su ‘Visualizza Pagina’ per vedere la versione live sul tuo sito WordPress:
Per maggiori dettagli, consulta la nostra guida su come incorporare moduli in WordPress.
🧑💻 Suggerimento Pro: Una volta incorporato il tuo modulo, assicurati di aprire la pagina sul tuo dispositivo mobile per verificare che la fotocamera si apra senza problemi e risulti naturale su uno schermo più piccolo.
Domande frequenti sulla cattura di foto o video dalla fotocamera live nei moduli WordPress
Prima di concludere, ecco le risposte ad alcune domande comuni che le persone hanno sull'utilizzo dei caricamenti da fotocamera e dei campi file nei moduli.
Come raccolgo foto in Google Forms?
Google Forms supporta il caricamento di file, ma manca un campo dedicato per la Smart Camera. Mentre gli utenti possono selezionare manualmente un file, WPForms offre un'integrazione fluida che attiva direttamente la fotocamera, rendendo molto più veloce per gli utenti scattare e inviare.
I moduli di WordPress possono avere una fotocamera?
Sì. Alcuni plugin per moduli di WordPress, come WPForms, supportano un campo fotocamera che consente agli utenti di scattare foto o registrare video direttamente dal proprio dispositivo e inviarli con il modulo.
Cos'è un campo di caricamento file?
Un campo di caricamento file consente agli utenti di allegare file come immagini, PDF o video durante l'invio di un modulo. È utile per cose come caricamenti di foto, curriculum o documenti.
Come faccio a scattare una foto nei moduli di WordPress?
Aggiungi un campo fotocamera o di caricamento file al tuo modulo utilizzando un plugin per moduli che lo supporta, come WPForms. Quando gli utenti aprono il modulo su un dispositivo con fotocamera, possono scattare una foto direttamente invece di caricare un file esistente.
I moduli di WordPress possono scattare foto dalla webcam?
Sì. Se il plugin per moduli supporta l'input della fotocamera live, gli utenti possono scattare foto utilizzando la loro webcam su un desktop o la fotocamera del loro telefono e inviarle subito.
Altre guide all'uso dei moduli WordPress
Spero che questo tutorial ti abbia aiutato ad aggiungere un campo fotocamera per consentire agli utenti di scattare foto o video live direttamente nei tuoi moduli di WordPress.
Successivamente, potresti voler imparare:
- Come aggiungere scelte di immagini nei moduli di WordPress
- Come mostrare un modulo di contatto fluttuante in WordPress
- Come usare i moduli di contatto per far crescere la tua lista email in WordPress
- Modi per utilizzare la logica condizionale nei moduli WordPress
- Guida definitiva all'uso dei moduli WordPress (tutto quello che devi sapere)
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.