フォーム入力からプロフェッショナルな書式のPDFを生成したいですか?WPForms PDF アドオンでは、フォームの通知メールの PDF コピーを作成したり、請求書、証明書、契約書など完全にカスタマイズされたドキュメントを独自のブランドスタイルで作成することができます。
このチュートリアルでは、フォーム用のPDFを設定し、カスタマイズする方法を紹介します。
必要条件
- PDFアドオンの最低必要バージョンを満たすために、WPFormsバージョン1.9.7.3以上をインストールしていることを確認してください。
- PDFアドオンにアクセスするには、Proライセンスレベル以上が必要です。
コアのWPFormsプラグインが配置され、ライセンスが確認されると、すぐにPDFアドオンをインストールして有効化することができます。
新しいPDFの作成
まず、新規フォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。フォームビルダーに入ったら、フォームに入れたいフィールドを追加します。WPForms AI を使用すると、フォーム作成プロセスを迅速に行うことができます。
フォームにフィールドを追加した後、「設定」の「PDF」に移動し、「新しいPDFを追加」 ボタンをクリックして新しいPDFを作成します。

表示されたオーバーレイで、PDFに名前を付け、OKをクリックして次に進みます。

左側にライブプレビュー、右側にすべての設定とカスタマイズオプションが表示されます。
ここから、PDFの基本的な詳細を設定することができます:
- ファイル名:デフォルトでは、ファイル名にはフォーム名と
.pdf
拡張子です。手動で変更したり、スマートタグのアイコンをクリックしてスマートタグを挿入することができます。 - 通知このPDFを添付するメール通知を選択します。
- 条件付きロジック:特定の条件が満たされたときにのみPDFを生成したい場合は、このオプションを有効にしてください。この詳細については、条件付きロジックに関するガイドを参照してください。

基本的な設定が終わったら、次はテンプレートの選択とカスタマイズです。
テンプレートの選択
次に、PDFのレイアウトとスタイルを選択する必要があります。PDFアドオンには、4つのカテゴリーに分類された様々な既製テンプレートが含まれています:
- Notifications- Eメール通知に利用可能なスタイル(クラシック、コンパクト、モダン、エレガント、テック)にマッチします。
- ドキュメント- 契約書、申請書、表紙、表など、柔軟なレイアウトが可能(ベーシック、リーガル、申請書、表紙、表、サイドバー)。
- Financial- 請求書や同様の文書に特化(クラシック、モダン、サイドバー)。
- 表彰状- デザイン済みの表彰状・賞状のレイアウト(クラシック、モダン、エレガント)。
テンプレート・セクションで、まずドロップダウンからカテゴリーを選択します。次に、「スタイル」のドロップダウンから、そのカテゴリー内のデザインを選びます。

ライブプレビューですべてのオプションを閲覧したい場合は、「すべてのテンプレートを表示」リンクをクリックしてください。モーダルが開き、各テンプレートをスクロールして使用するテンプレートを選択できます。

テンプレートを選択すると、画面左側のライブPDFプレビューに表示されます。ここで選択したカテゴリーとスタイルによって、次のステップでカスタマイズできるフィールドが決まります。

テンプレートフィールドのカスタマイズ
テンプレートとスタイルを選択したら、ニーズに合わせてコンテンツを調整することができます。利用可能なオプションは選択したテンプレートによって異なりますが、編集のプロセスはすべて同じです。
例えば、リーガル・ドキュメント・スタイルには、ビジネス情報、署名、日付のフィールドが含まれ、モダン・インボイス・スタイルには、請求書の詳細、請求情報、支払条件のフィールドが含まれます。
フィールドテキストの編集
任意のフィールド内をクリックすると、プレースホルダーテキストがあなた自身の文言で置き換えられます。変更するとすぐにライブプレビューに表示されるので、PDFでどのように表示されるかを正確に確認できます。
スマートタグの使用
PDFアドオンのすべてのフィールドは、スマートタグをサポートしています。これにより、ユーザーの名前やメールアドレス、その他のフィールド値など、フォーム入力から動的なデータを引き出すことができます。
スマートタグを挿入するには、フィールドの横にあるスマートタグアイコンをクリックし、ドロップダウンメニューから追加したいタグを選択します。

文字色の変更
任意のフィールドのテキストの色を変更することができます。フィールドの横にあるカラーボックスをクリックすると、カラーピッカーが開きます。テーマカラーから選択することも、ブランディングにマッチするカスタムカラーを選択することもできます。

大きなコンテンツエリアのフォーマット
文書や証明書の本文のような大きなテキストセクションには、組み込みのテキストエディタを使用できます:
- 太字や斜体などの見出しやテキストスタイルを適用する
- リンクの挿入、箇条書きまたは番号付きリストの追加
- コンテンツ内の任意の場所にスマートタグを追加する
- HTMLを使ったコンテンツの追加と編集

詳しくは、コンテンツ・フィールドの使い方についてのチュートリアルをご覧ください。
オプション要素の切り替え
一部のテンプレートには、バッジ、署名ブロック、日付フィールドなどのオプション要素が含まれています。ニーズに応じて、これらを簡単にオンまたはオフにすることができます。

外観のスタイリング
アピアランスセクションでは、PDFの全体的なスタイルとブランディングをカスタマイズできます。色やフォントからロゴや枠線まで、このセクションで文書の外観を完全にコントロールできます。
テーマの選択
テーマのドロップダウンを開いて、40以上の既製テーマから選択します。各テーマにはメインカラーのプレビューが表示されるので、あなたのデザインに合ったものをすぐに見つけることができます。

変更したい場合は、[テーマの色を編集]をクリックしてテーマのパレットを調整します。テーマを編集すると、見出し、枠線、テキストなど、PDF内でその色が使用されている場所に変更が即座に適用されます。

外観セクションでテーマやその他の設定を変更するとすぐに、WPFormsは元のテーマを上書きする代わりにテーマのコピーを自動的に作成します。これにより、カスタムバージョンで作業している間、デフォルトのテーマをそのまま維持することができます。
カスタムテーマを作成すると、テーマフィールドの下に名前の変更と 削除のオプションが表示されるので、保存したテーマを簡単に整理したり削除したりできます。

ロゴの追加と配置
画像のアップロードボタンをクリックして、メディアライブラリから画像を選択します。
サイズ] ドロップダウンで [小]、[中]、[大] 、[フル] を選択し、[位置] ドロップダウンで PDF の左、中央、または右に ロゴを配置します。

ページの背景
以下のフィールドを使用して、PDFページ全体の背景をカスタマイズできます:
- 色: カラーボックスをクリックして、無地の背景色を選択します。
- 画像:ドロップダウンを使って、リボン、三角形、波、翼、四隅、二隅、クラシック、ビンテージ、ハーフトーン、レイヤー、紙、紙ふぶき、さまざまなグラデーションスタイルなどの内蔵の装飾的な背景から選択します。
- ほとんどの背景はあなたのテーマカラーに合わせますが、いくつかの背景(VintageやConfettiなど)は固定色を使用します。
テーマカラーを編集した場合、その変更はテーマカラーの適応をサポートする背景パターンにも適用されるため、PDF全体で一貫したデザインを維持できます。

コンテナの背景とボーダー
コンテナの背景は、コンテンツの真後ろにある領域です。これは、パターンや暗いページの背景を使用しているときに、テキストを読みやすく保つのに役立ちます。
- カラー:カラーボックスをクリックして、コンテナの背景色を選択します。
- 角丸:ドロップダウンを使って角の半径を調整し、ソフトまたはシャープな外観にします。
コンテナの周囲にボーダーを追加して、コンテンツを囲むこともできます。実線、破線、点線などのボーダースタイルを選択し、サイズドロップダウンからボーダーの幅を選択します。最後に、カラー ボックスを使用してボーダーの色を選択します。すべての変更はライブプレビューに即座に表示されるので、見た目を微調整することができます。

高度な設定の調整
詳細設定では、PDFの用紙サイズ、ページの向き、アクセス制限をコントロールできます。
用紙サイズと向き
必要なレイアウトに応じて、縦向きと横向きを選択することもできます。

アクセス制限を有効にする
PDFを閲覧できるユーザーをコントロールしたい場合は、AdvancedセクションからEnable Access Restrictionsをオンにしてください。ログインユーザー、特定のユーザーロール、または個々のユーザーにアクセスを制限することができ、セキュリティを強化するためにパスワードを設定することもできます。

これらの設定の詳細については、アップロードされたファイルへのアクセスを制限するガイドをご覧ください。
生成されたPDFの閲覧
PDFが設定され、フォームが送信されると、フォーム入力から直接、生成されたドキュメントを表示、ダウンロードすることができます。
特定の投稿に対して生成されたPDFを表示するには、WordPressダッシュボードからWPForms " Entriesページを開き、PDFアドオンで設定したフォームを選択します。
次に、見たいエントリーの横にある「表示」をクリックする。

個々のエントリーページでは、PDFセクションの下に、そのエントリー用に作成されたPDFをダウンロードするためのリンクがあります。

フォームビルダーのPDFプレビューでは、文書の最初のページのみが表示されます。完全なPDFを表示するには、テストエントリーを送信し、エントリーページからファイルを開いてください。
以上です!これでWPFormsにPDFアドオンをインストールして使用する方法を学びました。
次に、カスタム CSS を書かずにフォームのルックアンドフィールを向上させたいとお考えですか?詳しくはフォームテーマ をご覧ください。