Incorporare Google Forms, Calendly e Typeform nel tuo sito
Incorporare Google Forms, Calendly e Typeform
Incorporare Google Forms, Calendly e Typeform in un sito | We.Inc
Dove trovare il codice di incorporamento di Google Forms, Calendly e Typeform, come adattarlo ai telefoni e un builder che sistema lo snippet per te.
Ogni servizio ti fornisce uno snippet da incollare nella pagina. Google Forms ti dà un iframe dall'opzione Incorpora HTML; Calendly ti dà un div più uno script da Add to website; Typeform ti dà un div con data-tf-widget più il suo script di incorporamento. Imposta un'altezza adeguata, un titolo e una larghezza del 100% perché si adatti ai telefoni.
Dove si trova ogni codice di incorporamento (a ottobre 2026)
Servizio
Dove cliccare
Cosa incolli
Google Forms
Menu Altro (tre puntini) > Incorpora HTML > Copia
Un iframe
Calendly
Pagina di prenotazione > tre puntini > Add to website
Un div e un tag script
Typeform
Le opzioni di incorporamento nelle impostazioni di condivisione del modulo
Un div con data-tf-widget e un tag script
Copiare il codice è la parte facile. I problemi arrivano dopo: un modulo tagliato sui telefoni, una doppia barra di scorrimento, un iframe senza titolo per gli screen reader, o un widget di prenotazione che rallenta la pagina. Questa guida spiega dove si trova ogni codice e come farlo funzionare bene.
Scegli il servizio nel builder qui sotto.
Incolla ciò che ti ha dato il servizio: il codice iframe di Google, il tuo link Calendly o il link del tuo typeform.
Imposta l'altezza e un breve titolo che descriva il modulo, e scegli il caricamento lazy se il modulo si trova sotto la piega.
Copia lo snippet ripulito in un blocco HTML o di incorporamento del tuo sito e provalo su un telefono.
Dai a ogni iframe un titolo come Modulo di contatto o Prenota una chiamata. Chi usa uno screen reader lo sente prima di decidere se entrare.
Aggiungi loading="lazy" agli iframe più in basso nella pagina, così il modulo non si carica finché il visitatore non scorre verso di esso.
Imposta la larghezza al 100% e limitala con max-width invece di una larghezza fissa in pixel, altrimenti il modulo sborderà sugli schermi piccoli.
Dopo l'incorporamento, prova un invio reale. Un modulo che sembra a posto può comunque inviare a un account sbagliato o a una versione bozza.
Domande frequenti
Perché il mio Google Form incorporato ha due barre di scorrimento?
L'iframe è più corto del modulo, quindi il modulo scorre al suo interno mentre scorre anche la pagina. Aumenta l'attributo height finché l'intero modulo non ci sta, e ricontrolla dopo aver aggiunto domande, perché il riquadro non cresce da solo.
Posso applicare il mio CSS a un Google Form incorporato?
No. Il modulo è una pagina servita da Google dentro un frame, e il tuo foglio di stile non può raggiungerla. Puoi cambiarne il tema dentro Google Forms, oppure creare un tuo modulo che invia i dati altrove.
Come evito che il widget inline di Calendly venga tagliato?
Il codice di Calendly imposta una larghezza minima di 320px e un'altezza fissa. Aumenta l'altezza se il tuo evento fa domande aggiuntive, oppure usa le opzioni popup text o popup widget così il calendario si apre sopra la pagina.
Quale incorporamento di Typeform dovrei usare?
Typeform offre incorporamenti inline, a pagina intera, popup, slider, popover e side tab. Usa inline quando il modulo è lo scopo della pagina, e un popup o uno slider quando è un'azione secondaria accanto ad altri contenuti.
Questi incorporamenti funzionano su un sito creato con We.Inc?
Sì. Aggiungi lo snippet in un blocco HTML o di incorporamento, oppure chiedi all'editor di inserire il modulo in una sezione. Lo snippet è normale HTML, quindi si comporta come su qualsiasi altro sito.
Google Forms
Apri il modulo, scegli il menu Altro in alto a destra, seleziona Incorpora HTML e premi Copia. La pagina di assistenza di Google elenca questi passaggi. Quello che ottieni è un unico iframe che punta al tuo modulo.
L'iframe copiato ha dimensioni fisse in pixel. Sostituisci la larghezza con 100% e un max-width così si restringe sui telefoni, mantieni l'altezza sufficiente per la versione più lunga del modulo e aggiungi un titolo.
Calendly
Nella tua pagina di prenotazione, apri il menu a tre puntini accanto all'evento e scegli Add to website. Calendly offre quindi tre stili: inline embed, popup widget (un pulsante fluttuante) e popup text (un link). Prima di copiare puoi anche nascondere la tua foto o i dettagli dell'evento.
Il codice inline è un div con la classe calendly-inline-widget, il tuo link in data-url e uno script da assets.calendly.com. Carica quello script una sola volta per pagina anche se mostri più widget.
Typeform
La libreria di incorporamento di Typeform legge qualsiasi elemento con data-tf-widget e lo trasforma nel modulo, quindi lo snippet è un div più uno script. L'id del modulo è l'ultima parte dell'indirizzo del tuo typeform dopo /to/.
Per un pulsante che apre il modulo in un popup, la libreria espone window.tf.createPopup, che restituisce le funzioni open, close e toggle da collegare al tuo pulsante.
Velocità e privacy
Ogni incorporamento carica codice di un altro sito e può impostare i cookie di quel sito, quindi cita questi servizi nella tua informativa sulla privacy. Se un modulo è molto in basso nella pagina, il caricamento lazy o un pulsante che lo apre mantengono veloce la prima visualizzazione.
I tre a confronto
Stili di incorporamento offerti da ogni servizio (dalle loro guide, ottobre 2026)
Servizio
Stili di incorporamento
Si ridimensiona da solo?
Google Forms
Iframe inline
No, l'altezza la imposti tu
Calendly
Inline, popup widget, popup text
L'altezza inline è fissa, a meno di usare l'incorporamento JavaScript avanzato con resize
Typeform
Inline, pagina intera, popup, slider, popover, side tab
Inline riempie il riquadro che gli dai
Snippet puliti da cui partire
Sostituisci gli indirizzi segnaposto con i tuoi. Ognuno è dimensionato per adattarsi ai telefoni.
Google Form a tutta larghezza con titolo
Mantieni l'src che ti dà Google; cambiano solo dimensioni, titolo e caricamento lazy.
Calendario inline di Calendly
La struttura dell'incorporamento inline di Calendly: un div con il tuo link e uno script.
Typeform inline
Sostituisci abc123 con l'id del tuo modulo. Lo script applica da solo lo stile al widget.
Scegli Google Forms, Calendly o Typeform, incolla il codice o il link fornito dal servizio e ottieni uno snippet con un titolo, una larghezza adatta ai telefoni e l'altezza che imposti. Il builder riscrive solo il testo; non carica il modulo.
Incolla il codice iframe da Incorpora HTML
Incolla il tuo link di prenotazione
Incolla il link del tuo typeform o l'id del modulo
Incolla il codice iframe di Google Forms (punta a docs.google.com/forms).
Incolla il tuo link di prenotazione Calendly, per esempio https://calendly.com/your-name/30min.
Incolla il link del tuo typeform, per esempio https://form.typeform.com/to/abc123, oppure solo l'id del modulo.