Come aggiungere un link di stampa ai tuoi moduli

Vuoi consentire agli utenti di stampare i tuoi moduli per il completamento offline? Mentre i browser offrono funzionalità di stampa integrate tramite il menu File predefinito, l'aggiunta di un pulsante o link di stampa dedicato può migliorare l'esperienza utente.

Questa guida ti mostrerà come aggiungere un'opzione di stampa direttamente ai tuoi moduli utilizzando semplice codice HTML.

Configurazione del tuo modulo

Innanzitutto, crea un modulo e aggiungi i campi desiderati. Se hai bisogno di aiuto per creare il tuo modulo, consulta la nostra guida su come creare il tuo primo modulo.

Aggiungere il link di stampa

Successivamente, aggiungi un campo HTML al tuo modulo. All'interno di questo campo, aggiungi il seguente codice:

<a href="#" onClick="window.print()">Print this page</a>

Questo codice crea un semplice link di testo che attiva la finestra di dialogo di stampa del browser quando viene cliccato. href="#" impedisce la reindirizzamento della pagina, mentre onClick="window.print()" chiama la funzione di stampa del browser.

Una volta salvato il modulo, puoi vedere che appena sopra il pulsante Invia c'è un link per stampare il modulo.

Styling del tuo link di stampa (Opzionale)

Per far sì che il tuo link di stampa assomigli di più a un pulsante, puoi aggiungere uno stile personalizzato. Per prima cosa, modifica il tuo HTML per includere una classe CSS:

<a class="print_link" href="#" onClick="window.print()">Print this page</a>

Quindi aggiungi questo CSS al tuo sito. Se hai bisogno di aiuto per aggiungere codice personalizzato, consulta la nostra guida su come aggiungere codice personalizzato.

a.print_link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #B95D6A;
    color: #ffffff;
    border: 1px solid #b95d6a;
    transition: all 0.2s ease-in-out;
}

a.print_link:hover {
    background-color: #ffffff;
    color: #b95d6a;
}

Stampa di moduli multipagina

Se il tuo modulo utilizza interruzioni di pagina, avrai bisogno di CSS aggiuntivo per garantire che tutte le pagine vengano stampate correttamente. Aggiungi questo CSS al tuo tema:

@media print {
    /* print only styles here */
    #wpforms-form-1000 .wpforms-page {
        display: block !important;
    }
}

Ricorda di sostituire 1000 con l'ID del tuo modulo. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida su come trovare gli ID dei moduli.

Per applicare questo a tutti i moduli, usa:

@media print {
    /* print only styles here */
    .wpforms-page {
        display: block !important;
    }
}

Puoi anche usare questi stili di stampa per nascondere elementi come la barra laterale, il piè di pagina o l'intestazione durante la stampa.

E questo è tutto ciò di cui hai bisogno! Vuoi sapere come usare gli shortcode all'interno di questi campi modulo HTML? Dai un'occhiata al nostro tutorial su Come visualizzare gli shortcode nel campo HTML.