So fügen Sie Ihren Formularen einen Drucklink hinzu

Möchten Sie, dass Benutzer Ihre Formulare für die Offline-Ausfüllung ausdrucken können? Während Browser eine integrierte Druckfunktion über das Standardmenü Datei bieten, kann das Hinzufügen einer dedizierten Druckschaltfläche oder eines Links die Benutzererfahrung verbessern.

Diese Anleitung zeigt Ihnen, wie Sie mit einfachem HTML-Code eine Druckoption direkt zu Ihren Formularen hinzufügen.

Einrichtung Ihres Formulars

Erstellen Sie zuerst ein Formular und fügen Sie Ihre gewünschten Felder hinzu. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere Anleitung zum Erstellen Ihres ersten Formulars.

Hinzufügen des Drucklinks

Fügen Sie als Nächstes ein HTML-Feld zu Ihrem Formular hinzu. Fügen Sie in dieses Feld den folgenden Code ein:

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

Dieser Code erstellt einen einfachen Textlink, der beim Klicken den Druckdialog des Browsers aufruft. href="#" verhindert die Seitenumleitung, während onClick="window.print()" die Druckfunktion des Browsers aufruft.

Nachdem Sie das Formular gespeichert haben, sehen Sie, dass direkt über der Schaltfläche Senden ein Link zum Drucken des Formulars vorhanden ist.

Gestaltung Ihres Drucklinks (Optional)

Damit Ihr Drucklink eher wie eine Schaltfläche aussieht, können Sie benutzerdefinierte Stile hinzufügen. Ändern Sie zuerst Ihr HTML, um eine CSS-Klasse einzufügen:

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

Fügen Sie dann dieses CSS zu Ihrer Website hinzu. Wenn Sie Hilfe beim Hinzufügen von benutzerdefiniertem CSS benötigen, lesen Sie bitte unsere Anleitung zum Hinzufügen von benutzerdefiniertem Code.

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;
}

Drucken von mehrseitigen Formularen

Wenn Ihr Formular Seitenumbrüche verwendet, benötigen Sie zusätzliches CSS, um sicherzustellen, dass alle Seiten ordnungsgemäß gedruckt werden. Fügen Sie dieses CSS zu Ihrem Theme hinzu:

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

Denken Sie daran, 1000 durch Ihre Formular-ID zu ersetzen. Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, lesen Sie bitte unsere Anleitung zum Auffinden von Formular-IDs.

Um dies auf alle Formulare anzuwenden, verwenden Sie:

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

Sie können diese Druckstile auch verwenden, um Elemente wie die Seitenleiste, die Fußzeile oder den Header beim Drucken auszublenden.

Und das ist alles, was Sie brauchen! Möchten Sie wissen, wie Sie Shortcodes in diesen HTML-Formularfeldern verwenden? Sehen Sie sich unser Tutorial Anzeigen von Shortcodes im HTML-Feld an.