あなたのサイトでユーザーがファイルをアップロードできるようにしたいですか？WPFormsのファイルアップロード機能を使えば、オンラインフォームから簡単にファイルやメディアを集めることができます。
このガイドでは、WPFormsのファイルアップロードフィールドの使い方を紹介します。
始める前に、WordPressサイトにWPFormsがインストールされ、有効化されていることを確認する必要があります。ライセンスを確認したら、新しいフォームを作成するか、既存のフォームを編集してください。
ファイルアップロードフォームの作成
フォームビルダーを開いたら、フォームに File Upload フィールドを追加します。フォームビルダーの左側にあるフィールド名をクリックするか、プレビューエリアの好きな場所にフィールドをドラッグ＆ドロップすることで、フォームにフィールドを追加することができます。
アップロード可能なファイルタイプ
セキュリティはWPFormsの最優先事項です。デフォルトでは、安全なファイルタイプ（WordPressコアで許可されているもの）のアップロードのみを許可しています。これらは以下の通りです：
- .png、.gif、.jpgなどの画像
- .doc、.xls、.ppt、.pdfなどのドキュメント
- .wav、.mp3、.mp4のようなオーディオ
- .mpg、.mov、.wmvのようなビデオ
許可されたファイルタイプの追加
フォームで他のファイル形式をサポートしたい場合は、チュートリアル「ユーザーが他のファイル形式をアップロードできるようにする方法」をご覧ください。
ファイルタイプの制限
特定のフォームで許可するファイル拡張子を制限するには、フォームビルダーのファイルアップロードフィールドをクリックします。次に、フィールドオプションパネルで、許可するファイル拡張子フィールドに許可する拡張子をカンマで区切って指定します。
これにより、他の拡張子のファイルがフォームにアップロードされるのを防ぐことができます。
アップロードの最大ファイルサイズの設定
デフォルトでは、フォームの最大ファイルサイズはサーバーによって設定された上限値に制限されます。フォームの最大ファイルサイズを確認するには、フォームビルダーのファイルアップロードフィールドをクリックしてください。
次に、最大ファイルサイズ設定の隣にあるクエスチョンマーク(?)アイコンにカーソルを合わせると、サーバーが処理できる最大ファイルサイズが表示されます。
フォームの最大ファイルサイズをさらに制限したい場合は、[ 最大ファイルサイズ] フィールドに数値を指定します。
注：サイトの最大アップロードサイズを増やしたい場合は、ホスティングプロバイダーに連絡して可能かどうかを確認する必要があります。詳しくは、WPBeginnerのWordPressの最大ファイルアップロードサイズの増加に関するチュートリアルをご覧ください。
モダン」スタイルと「クラシック」スタイルの選択
ファイルアップロードフィールドには、クラシックとモダンの2つのスタイルオプションがあります。
これらのオプションを表示するには、フォームビルダーを開き、プレビューエリアでファイルアップロードフィールドをクリックして、フィールドオプションを表示する必要があります。次に、詳細設定 タブをクリックして追加設定を表示します。
詳細オプションには、スタイルドロップダウンがあり、モダンと クラシックから選択できます。
モダン・スタイル
ファイルアップロードフィールドのモダンスタイルには、ドラッグ＆ドロップボックスが表示されます。訪問者がフォームを使用する際、このフィールドをクリックしてデバイスからファイルを選択するか、デスクトップからファイルをボックスにドラッグすることができます。
このスタイルでは、1つのファイルアップロードフィールドに複数のファイルをアップロードすることもできます。
モダンスタイルでは、ファイルのアップロード処理にAJAXアップロードを使用します。ファイルのアップロード、特に大きなファイルのアップロードは、サイトのホスティングサーバーに多くのリソースを要求し、最終的にフォーム送信後の遅延につながる可能性があるため、これは便利です。
しかし、AJAXアップロードはアップロードプロセスを高速化し、フォームをより速く送信できるようにします。
クラシック・スタイル
ファイルアップロードフィールドのクラシックスタイルでは、「ファイルを選択」ボタンが表示されます。モダンスタイルと同様に、ユーザーはこのボタンにファイルをドラッグするか、ボタンをクリックしてデバイスからファイルを選択することができます。
ただし、クラシックスタイルでは、1つのファイルアップロードフィールドに複数のファイルをアップロードすることはできません。
注:ファイルアップロードボタンの外観をカスタマイズして、会社のブランディングにもっとマッチさせたいとお考えですか？モダンとクラシック両方のアップロードフィールドのボタンスタイルを変更するためのステップバイステップの手順については、開発者向けドキュメントをご覧ください。
複数ファイルのアップロード
ユーザーが一度に複数のファイルをアップロードできるようにするには、ファイルアップロードフィールドが許可されるように設定されていることを確認する必要があります。そのためには、ファイルアップロードフィールドをクリックして、フィールドオプションを開いてください。
次に、「詳細設定」タブで、「スタイル」ドロップダウンを「モダン 」に設定します。
ユーザーがこのフィールドに複数のファイルをアップロードできるようにするには、このスタイルが必要です。
GeneralField Options」タブに戻り、「Max File Number」設定を探します。デフォルトでは1に設定されていますが、必要に応じて増やすことができます。
注:あなたのサイトのホスティング環境がアップロードしたいファイル数を適切に処理できるかどうかわからない場合は、フォームを立ち上げる前に必ずテストを行ってください。また、サイトのホスティングプロバイダーにアップロードに関するアドバイスを求めることもできます。
通知にファイルアップロードリンクを含める
を使用することができます。 {all_fields} または {field_id} スマートタグ アップロードされたファイルを通知メールに含めることができます。
そうすると、Eメール通知にアップロードされたファイルへのリンクが含まれます。
こうすることで、WordPressのダッシュボードにログインすることなく、すぐにファイルを表示したりダウンロードしたりすることができます。
注：Eメール通知の設定にお困りですか？チュートリアルの通知設定をご覧ください。
フォーム通知メールにファイルを添付する
WPFormsではオンラインフォームからアップロードされたファイルを添付ファイルとして受け取ることができます。これらの添付ファイルは、ファイルのバックアップの追加レイヤーを提供します。つまり、ファイルがWordPressから削除されても、Eメールでアクセスすることができます。
これを有効にするには、フォーム通知設定の 詳細セクションに行き、ファイルアップロード添付を有効にするオプションをオンに切り替える必要があります。
注意：この機能はデフォルトでは無効になっています。通知メールで添付ファイルの受信を開始するには、手動で有効にする必要があります。
この機能の詳細については、添付ファイルのアップロードに関するガイドを参照してください。
アップロードしたファイルの保存
デフォルトでは、ユーザがアップロードしたファイルはサイトのUploadsディレクトリのWPFormsフォルダ内に保存されます。
ただし、ファイルをWordPress Media Libraryにアップロードしたい場合は、Field OptionsパネルのAdvancedタブに移動し、Store file in WordPress Media Library オプションをオンにしてください。
ファイルをどこに保存しても、個々のエントリー内でファイルのリンクをクリックすれば、フォームのエントリー内でいつでもアクセスできます。
注意:フォームエントリーを削除すると、そのエントリー内にアップロードされたファイルも削除されます。重要なファイルは常に別の場所に保存しておくことをお勧めします。
必要であれば、エントリーを編集することで、特定のエントリーからアップロードされたファイルを削除することもできます。ファイルのリンクの横にある赤いゴミ箱アイコンをクリックしてください。
注：アップロードしたファイルをメディアライブラリに保存するようにファイルアップロードフィールドを設定している場合は、メディアライブラリからファイルを削除する必要があります。
エントリーから削除したいファイルを削除したら、必ず「更新」ボタンをクリックして変更を保存してください。
ファイルアクセスの制限
ファイルアップロードフィールドでは、特定のWordPressユーザーにアクセスを制限したり、パスワード保護を追加することで、アップロードしたファイルにアクセスできるユーザーを制御できます。これを行うには、ファイルアップロードフィールドをクリックしてフィールドオプションを開きます。
次に、Advancedタブで、 Enable File Access Restrictionsトグルボタンをオンにする。
有効にすると、ユーザーベースの制限またはパスワード保護のいずれかを選択できます。これらの設定の詳細については、アップロードされたファイルへのアクセスを制限する方法のガイドをご覧ください。
アップロードされたファイルの圧縮
WPFormsはサイトにアップロードされたファイルを圧縮しません。ただし、WordPressのメディアライブラリにファイルを保存する場合は、WordPressが自動的に画像を圧縮します。
注：サイトにアップロードする前に画像を最適化したい場合は、WPBeginnerのチュートリアル「サイトのパフォーマンスを向上させる画像の簡単な最適化方法」をご覧ください。
よくある質問
これらは、ファイルアップロードフィールドに関するよくある質問です。
フォームに大きなファイルをアップロードできるようにしたいのですが、うまくいきません。どのような方法がありますか?
ファイルアップロードにModernスタイルを使用している場合、WPFormsは自動的に "チャンク "単位でファイルをアップロードします。これにより、アップロードの効率が向上し、サーバーによって設定されたいくつかの制限（サーバーのタイムアウトを含む）を回避することができます。
これは、フォーム内の大容量アップロードの問題の大部分を解決するのに役立ちますが、ファイルの最大サイズはまだサーバーによって制限されていることに注意してください。 MAX_FILE_UPLOAD.つまり、サーバーのファイルサイズ制限が10MBの場合、それ以上のサイズのファイルをアップロードすることはできません。
サーバーのファイルアップロードサイズの制限を調整したい場合は、ホスティングプロバイダーにお問い合わせください。詳細については、WPBeginnerのWordPressの最大ファイルアップロードサイズの増加に関するチュートリアルを参照してください。
Cloudflareユーザーは、アップロードの制限はプランの種類によって決定されることに注意してください。現在の制限は以下の通りです：
- 無料およびプロ：100 MB
- ビジネス:200 MB
- エンタープライズ:500 MB (カスタマイズについてはサポートにお問い合わせください)
詳しくは、Cloudflareのアップロードサイズ制限をご覧ください。
大きなファイルをアップロードしているわけではないのに、ファイルのアップロード処理がフリーズして終わらない。なぜでしょうか？
サイトのSSL接続に誤った設定があると、ファイルが正しくアップロードされないことがあります。
たとえば、サイトが安全でない（HTTP）接続で読み込まれ、アップロードされたファイルなどのサイト資産が安全な（HTTPS）接続で読み込まれる場合（またはその逆）、この問題が発生する可能性があります。この場合、ミックスコンテンツエラーが発生し、フォームにファイルをアップロードできなくなります。
サイトのホストはSSL設定を簡単に更新できるので、このエラーに遭遇した場合は必ずホストに連絡してください。WPBeginnerのWordPressのSSL問題のトラブルシューティングガイドもご覧ください。
アップロードしたファイルが、通知メールの添付ファイルではなく、リンクとして表示されるのはなぜですか？
添付ファイルのアップロードが無効になっています。フォームの通知設定の 詳細オプションから有効にする必要があります。詳しくは、添付ファイルのアップロードを有効にするガイドをご覧ください。
通知メールにファイルを添付することは、メールの配信性を損なうことが多いため、デフォルトでは無効になっています。例えば、メールサービスプロバイダが最大ファイルサイズを10MBまでしか許可していないにもかかわらず、ユーザーが10MB以上のファイルをアップロードした場合、メールは配信されません。
Android端末のFacebookやInstagramのモバイルブラウザでファイルのアップロードがうまくいかないのはなぜですか？
一部のアプリ内ブラウザは現在、ファイルのアップロードをサポートしていません。最も顕著な例は、FacebookとInstagramのブラウザです。
この問題を解決するプラグインを作成しました。Escape Facebook/Instagram In-App Browsersプラグインは以下のボタンからダウンロードできます：
Escape Facebook/Instagram In-App Browsers プラグインをダウンロードする
プラグインをダウンロードしたら、あなたのサイトにインストールして有効化するだけです。
以上です！これでWPFormsのファイルアップロードフィールドの使い方がわかりました。
次に、ユーザーがフォームにどのように入力したかによって異なる通知メールを送信する方法を学びたいですか？WPFormsで条件付きフォーム通知を作成する方法をご覧ください。