フォームに印刷リンクを追加する方法

ユーザーにオフラインでフォームを完成させるために印刷させたいですか？ブラウザはデフォルトのファイルメニューから組み込みの印刷機能を提供しますが、専用の印刷ボタンやリンクを追加することでユーザーエクスペリエンスを向上させることができます。

このガイドでは、簡単なHTMLコードを使用して、フォームに直接印刷オプションを追加する方法を説明します。

フォームの設定

まず、フォームを作成し、目的のフィールドを追加します。フォームの作成にヘルプが必要な場合は、最初のフォームの作成ガイドを確認してください。

印刷リンクの追加

次に、フォームにHTMLフィールドを追加します。このフィールド内に、次のコードを追加します。

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

このコードは、クリックするとブラウザの印刷ダイアログをトリガーするシンプルなテキストリンクを作成します。href="#"はページの転送を防ぎ、onClick="window.print()"はブラウザの印刷機能を呼び出します。

フォームを保存すると、送信ボタンのすぐ上にフォームを印刷するためのリンクが表示されます。

印刷リンクのスタイリング（オプション）

印刷リンクをボタンのように見せるには、カスタムスタイリングを追加できます。まず、CSSクラスを含めるようにHTMLを変更します。

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

次に、このCSSをサイトに追加します。カスタムCSSの追加にヘルプが必要な場合は、カスタムコードの追加ガイドを確認してください。

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

複数ページのフォームの印刷

フォームで改ページを使用している場合は、すべてのページが正しく印刷されるように追加のCSSが必要です。このCSSをテーマに追加してください。

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

1000をフォームIDに置き換えることを忘れないでください。フォームIDの検索にヘルプが必要な場合は、フォームIDの検索ガイドを確認してください。

これをすべてのフォームに適用するには、次を使用します。

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

これらの印刷スタイルを使用して、印刷時にサイドバー、フッター、ヘッダーなどの要素を非表示にすることもできます。

これで完了です！これらのHTMLフォームフィールド内でショートコードを使用する方法を知りたいですか？HTMLフィールド内にショートコードを表示する方法のチュートリアルを確認してください。