### [フォームに印刷リンクを追加する方法](https://wpforms.com/developers/how-to-add-a-print-link-to-your-forms/)
**公開日:** 2021年12月14日
**著者:** Umair Majeed
**抜粋:** このチュートリアルでは、HTMLフォームフィールドと簡単なHTMLを使用して、WPFormsに印刷リンクを追加する方法を説明します。
**コンテンツ:**
ユーザーにオフラインで記入するためにフォームを印刷させたいですか？ブラウザにはデフォルトの**ファイル**メニューから印刷機能が組み込まれていますが、専用の印刷ボタンやリンクを追加すると、ユーザーエクスペリエンスが向上します。
このガイドでは、簡単なHTMLコードを使用して、フォームに直接印刷オプションを追加する方法を説明します。
## フォームの設定
まず、フォームを作成し、目的のフィールドを追加します。フォームの作成方法がわからない場合は、[最初のフォームの作成](https://wpforms.com/docs/creating-first-form/)ガイドを確認してください。
## 印刷リンクの追加
次に、フォームに**HTML**フィールドを追加します。このフィールド内に、次のコードを追加します。
```
このページを印刷
```
このコードは、クリックするとブラウザの印刷ダイアログをトリガーする簡単なテキストリンクを作成します。`href="#"`はページの再リダイレクトを防ぎ、`onClick="window.print()"`はブラウザの印刷関数を呼び出します。
フォームを保存すると、**送信**ボタンのすぐ上にフォームを印刷するためのリンクが表示されます。
## 印刷リンクのスタイリング（オプション）
印刷リンクをボタンのように見せるには、カスタムスタイルを追加できます。まず、HTMLを変更してCSSクラスを含めます。
```
このページを印刷
```
次に、このCSSをサイトに追加します。カスタムCSSの追加方法がわからない場合は、[カスタムコードの追加](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)ガイドを確認してください。
```
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 {
/* ここに印刷専用スタイルを追加 */
#wpforms-form-1000 .wpforms-page {
display: block !important;
}
}
```
`1000`をフォームIDに置き換えてください。フォームIDの見つけ方がわからない場合は、[フォームIDの検索](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id)ガイドを確認してください。
これをすべてのフォームに適用するには、次を使用します。
```
@media print {
/* ここに印刷専用スタイルを追加 */
.wpforms-page {
display: block !important;
}
}
```
これらの印刷スタイルを使用して、印刷時にサイドバー、フッター、ヘッダーなどの要素を非表示にすることもできます。
これで完了です！HTMLフォームフィールド内でショートコードを使用する方法を知りたいですか？[HTMLフィールド内にショートコードを表示する方法](https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/ "HTMLフィールド内にショートコードを表示する方法")のチュートリアルを確認してください。
**カテゴリ:** 拡張
**タグ:** CSS, HTML
---