WordPressでDropboxアップロードフォームを作成する方法

WordPressでのファイルアップロードはフラストレーションでした。

かつてテクニカルサポートを提供していた頃、クライアントはメールで問題を説明してくれましたが、エラーログやスクリーンショットを見ずに、私はしばしば手探りで対応していました。

その時、WordPressのDropboxアップロードフォームの力を発見しました。WordPressのデフォルトのメディアアップローダーとは異なり、ファイルサイズの制限がありましたが、Dropboxアップロードフォームではファイルサイズの制限はありませんでした。これにより、ホスティングがクリーンに保たれ、どこからでもアップロードにアクセスできるようになりました。

この記事では、すべてを効率化するDropboxアップロードフォームを正確に作成する方法を説明します。

Dropboxをフォーム添付ファイルのアップロードに使用する理由

デフォルトでは、WordPressはアップロードされたすべてのファイルをメディアライブラリに直接保存します。これは基本的な用途には問題ありませんが、求人掲示板や複数の送信フォームがあるサイトのような高度なWordPressウェブサイトを実行する際には、しばしば問題を引き起こします。

主な問題は、WordPressがフォームごとにアップロードを自動的に整理しないことです。これにより、2つの大きな課題が生じます。

• すべてのファイルタイプが1か所にまとめて保存されるため、管理が困難です。
• 特定のフォームエントリに属するファイルでファイルをカテゴリ分けする方法はありません。

そのため、適切なユーザー提出ファイルを見つけるのは、イライラして時間のかかる作業になる可能性があります。

もう1つの欠点は、サーバーのストレージ使用量です。アップロードされたファイルはすべてホスティングプランのスペースを消費するためです。多数のPDFドキュメントのように数百メガバイトにもなる大きなファイルは、ストレージをすぐに消費し、ホスティングのアップグレードを強制することさえあります。

さらに、WordPressメディアライブラリには、権限管理のような高度なファイル管理機能が欠けています。つまり、簡単な復旧オプションなしで、誤って削除されるリスクが常にあります。

WordPressフォームをDropboxに接続することで、これらの問題はすべて解決します。アップロードされたファイルはクラウドに安全に保存され、きれいに整理され、ウェブサイトの速度を低下させたり、ホスティングストレージを占有したりすることはありません。

この設定は、次のような大きくて重要なファイルを収集するフォームに特に適しています。

• 履歴書、カバーレター、ポートフォリオを管理するための求人掲示板
• プロジェクト提案フォーム：ピッチ、予算、およびサポートドキュメントを処理します
• イベント登録フォーム（IDスキャン、同意書、承諾フォーム用）
• 学校またはコース登録フォーム（課題、成績証明書、プロジェクトの提出用）
• その他多数…

この記事では、WordPressフォームをDropboxに接続するために使用する正確な方法を紹介します。このガイドでカバーするすべてのステップの簡単な概要を以下に示します：

準備はいいですか？始めましょう。

ステップ1：WPFormsのインストールと有効化

WordPressでDropboxフォームを作成する最も簡単な方法は、WPFormsを使用することです。これはWordPress向けの最高のコンタクトフォームプラグインであり、事前構築済みのテンプレート、ドラッグ＆ドロップフォームビルダー、プレミアム連携機能を提供します。

当社では、求人応募を受け付けたり、大きなメディアファイルを扱うテクニカルサポートを提供したりするためのフォーム作成にWPFormsを使用しています。コンタクトフォームであれ、年次のユーザーアンケートであれ、WPFormsはプロセスをシンプルにします。WPFormsの全レビューで、その機能をご確認ください。

まず、WPFormsプラグインをインストールして有効化しましょう。詳細については、WordPressプラグインのインストール方法に関する記事をご覧ください。

有効化したら、WordPressダッシュボードからWPForms » 設定に移動し、ライセンスキーを入力する必要があります。ライセンスキーは、WPFormsアカウントエリアで簡単に見つけることができます。

ステップ2：WPFormsをDropboxアカウントに接続する

Dropboxにファイルを送信できるようになる前に、Dropboxアドオンをインストールしてアカウントを接続する必要があります。

まず、WordPressダッシュボードからWPForms » Addonsに移動できます。次の画面で、リスト内の「Dropbox」アドオンを見つけて「Addonをインストール」ボタンをクリックするまで下にスクロールします。

アドオンは自動的にダウンロード、インストール、アクティブ化されます。

有効化後、Dropboxアカウントを接続できます。

これを行うには、WordPressダッシュボードからWPForms » 設定に移動します。次に、設定ページの最上部にある「統合」タブをクリックします。

Dropboxセクションをクリックして展開してください。

次に、「新規アカウントを追加」ボタンをクリックして統合を開始できます。

これにより、Dropboxの認証ページに移動する新しいウィンドウまたはタブが開きます。まだDropboxにログインしていない場合は、Dropboxの認証情報を入力する必要があります。

次に、DropboxはWPFormsがアカウントにアクセスすることを許可するかどうかを尋ねます。権限を注意深く確認できます。しかし、一般的に、WPFormsはDropboxアカウントにフォルダを作成し、ファイルをアップロードするためにアクセスする必要があります。

その後、「許可」をクリックしてこれらの権限を付与できます。

認証後、WordPressサイトにリダイレクトされます。

DropboxアカウントがWPFormsに正常に接続されたという確認メッセージが表示されるはずです。

ステップ3：Dropboxファイルアップロードフォームを作成する

これで、Dropboxアップロードフォームの作成を開始できます。

単純に、WordPress管理エリアからWPForms » 新規追加に移動します。

ここでセットアップページに移動します。

まず、フォームの名前を付けます。後で見つけやすいように、特に複数のフォームを作成する場合は、明確で説明的な名前をお勧めします。

例えば、フォームに「Dropboxアップロードフォーム」と名前を付けました。

その後、フォームの作成方法を選択します。空白のフォームから始めるか、AIフォームビルダーを使用するか、既製のテンプレートから選択します。

AI搭載フォームビルダーを使用したい場合は、フォームを説明する簡単なプロンプトを記述するだけで、ツールが自動生成してくれます。わずか数秒で完了します。

このチュートリアルでは、ファイルアップロードフォームの事前作成済みテンプレートを使用して手順を説明します。

WPFormsには2,000以上のテンプレートがあるので、ニーズに合ったものを選び、プロジェクトに完全に合わせるように微調整するのは簡単です。

検索バーに「アップロードフォーム」と入力すると、オプションを絞り込むことができます。これらのテンプレートには、ユーザー情報とともにファイルを収集するための基本的な構造がすでに含まれています。

フォームに最適なものを見つけたら、カーソルを合わせて「テンプレートを使用」をクリックするだけです。

これにより、ドラッグ＆ドロップのフォームビルダーが開きます。

ここでは、テンプレートに名前、メールアドレス、ファイルアップロードフィールドなどの標準フィールドが含まれていることがわかります。

次に、「ファイルアップロード」フィールドをクリックしてカスタマイズしましょう。

「document(1).pdf」や「image.jpeg」のようなファイルが散乱するのを避けるために、ファイルアップロードフィールドの近くに、ファイル名のガイドラインを記載した短いメモを追加することをお勧めします。

さまざまなユースケースの例を以下に示します。

• ✅ 求人応募フォーム用の「John-Doe-Resume.pdf」
• ✅ 提出フォーム用の「Project-XYZ-Proposal.pdf」
• ✅ メディアアップロード用の「Event-Photos-July2024.zip」

「説明」フィールドに、「ファイル名は次の形式で入力してください：姓-名-プロジェクト名.pdf」のようなメモを追加してください。

「説明」の下に、ファイルアップロードフィールドのさらなるカスタマイズオプションがあります。ここで以下のことができます：

• .pdf、.jpg、.svg、.docxなどのファイルの種類を制限します。カンマで区切って、必要な形式を入力するだけです。
• 最大ファイルサイズをメガバイト単位で設定して、大きすぎるアップロードを防ぎます
• アップロードできるファイル数を制限する

例えば、PDF、JPG、DOCXファイルをそれぞれ最大10MBまで、最大5件までアップロードできるようにしました。

ウェブサイトがEU（またはCCPAのようなプライバシー法を持つ他の地域）のユーザーにサービスを提供している場合、個人データやファイルを収集する前に、特にそれらのファイルがDropboxのようなサードパーティサービスに保存されている場合は、明示的な同意を得る必要があります。

ユーザーの同意を得るには、左側のパネルから「チェックボックス」フィールドをドラッグして、フォームプレビューエリアにドロップします。

次に、フィールドをクリックして説明をカスタマイズできます。

「アップロードされたファイルはDropboxに安全に保存されることに同意します」のような文章を必須項目として記述できます。これにより、ユーザーはファイルがどこに保存されるかを理解し、保存の許可を与えることができます。

残りの選択肢は不要になるため、「-」アイコンを使用して削除することを忘れないでください。

次に、Dropboxアップロードフォームをクリーンでミニマルに保つために、フィールドラベルを非表示にしたい場合があります。

「詳細設定」タブに切り替えて、「ラベルを非表示」オプションをオンにするだけです。

これがDropboxアップロードフォームを作成するために必要なすべてです。さらに進めたい場合は、新しいフィールドをフォームにドラッグアンドドロップして、詳細を編集してください。

ステップ4：フォーム通知と確認の設定

フォームの外観に満足したら、「設定」タブに移動して通知と確認を設定します。

「通知」セクションの下に、誰かがフォームを送信するたびにWPFormsがサイト管理者に自動的にメール通知を送信するように設定されていることがわかります。

複数の受信者に通知を送信したい場合は、それも可能です。単にメールアドレスを「送信先」フィールドにカンマで区切って追加してください。

「確認」セクションでは、フォーム送信後にユーザーに表示されるものを選択できます。最も良い点は、それらをカスタマイズできることです。

• メッセージ – シンプルな確認メッセージを表示します。各テンプレートにはデフォルトのメッセージが付属していますが、ブランドのトーンに合わせて簡単に編集できます。
• ページを表示 – フォームを送信した後、ユーザーをサイト内のどこに送信するかを決定します。たとえば、サンキューページなどです。
• URLに移動（リダイレクト） – ユーザーをリダイレクトして、外部サイト、カスタムランディングページ、特別オファーなど、選択した任意のリンクに移動させます。

ステップ5：Dropboxストレージ設定の構成

この手順では、アップロードされたファイルを保存するDropboxフォルダを正確に選択します。

一番良いところは？ WPFormsなら簡単です。フォームビルダー内で直接Dropboxの保存先を設定でき、WordPressダッシュボードを離れる必要はありません。

WPFormsでDropboxフォルダを割り当てる

WPFormsビルダーから、設定 » Dropboxパネルに移動します。次に、「新しい接続を追加」をクリックしてください。

表示されるポップアップで、「クライアントファイルアップロード」や「履歴書提出」のような説明的な名前を接続に付けることができます。

ファイルアップロードフォームと同じ名前を使用することもできます。

Dropboxアカウントの場合、WPFormsは利用可能な連携を自動的に検出します。

「フォルダ名」フィールドに、好きな名前を自由に入力できます。WPFormsは、Apps/WPForms/[フォルダ名]内に新しいDropboxフォルダを作成します。

次に、「ストレージの場所」の下で、アップロードされたファイルをどこに保存するかを選択できます。

デフォルト設定は次のとおりです。「すべてのファイルアップロードフィールド」は「ルート」フォルダに保存されます。これは、すべてのファイルアップロードフィールドが作成したフォルダに保存されることを意味します。

ファイルアップロードフィールドを異なるサブフォルダにマッピングする（オプション）

整理整頓をもっとしたいですか？このオプションの手順では、異なるアップロードフィールドからのファイルをDropbox内の個別のサブフォルダに自動的にソートできます。

例えば、履歴書を1つのフォルダに、カバーレターを別のフォルダに保存することで、提出物の管理がはるかに容易になります。

すべてのファイルを1つのフォルダに入れることに問題がなければ、下の「条件付きロジックの設定」セクションにスキップしてください。

ファイルアップロードのマッピングを設定するには、まずDropboxアカウントにサブフォルダを手動で作成する必要があります。

新しいタブを開き、Dropboxのウェブサイトにアクセスして、アカウントにログインしましょう。Dropboxダッシュボードで、すべてのファイル » アプリに移動し、「WPForms」フォルダをクリックできます。

次の画面で、作成したばかりのドロップダウンファイルアップロードフォルダが表示されます。

サブフォルダを作成するために、それをクリックしましょう。

これで、すべてのファイルが保存されるDropboxアップロードフォームが開きます。

「フォルダを作成」をクリックするだけで、最初のサブフォルダを設定できます。

表示されるポップアップで、サブフォルダに名前を入力できます。

その後、「作成」ボタンをクリックします。

ここから、必要なだけサブフォルダを追加できます。

そして、Dropboxアップロードフォームフォルダ内のすべてのサブフォルダがこのように一覧表示されます。

完了したら、WPFormsのフォームビルダータブに戻って、ファイルアップロードのマッピングを作成できます。

設定を追加または削除するには、「+」および「-」ボタンを使用するだけです。

「ファイルアップロードフィールド」ドロップダウンには、フォーム上のすべてのファイルアップロードフィールドが表示されます。

ファイルアップロードフィールドを選択して追加してください。

次に、「データを保存するフォルダ」で、どのサブフォルダに保存するかを選択できます。

ドロップダウンをクリックして展開し、サブフォルダを選択してください。

すべてのファイルアップロードフィールドに対して、このプロセスを繰り返すことができます。

ファイルアップロードのための条件ロジックを設定する

次に、ユーザーが明示的な同意を与えた場合にのみ、ファイルがDropboxに保存されるようにしましょう。WPFormsでは、スマート条件ロジック機能を使用してこれを簡単に行えます。

「条件付きロジックを有効にする」をクリックして開始できます。

これにより設定セクションが開かれ、同意チェックボックスが選択された場合にのみアップロードを処理するように条件付きロジックを設定できます。

次に、このように設定できます。

1. 最初のドロップダウンで、「処理」オプションを選択します。これにより、次の条件が満たされた場合にのみファイルをDropboxに送信するようにWPFormsに指示するルールが設定されます。
2. 次のフィールドで、チェックボックスフィールドを選択します。これは、ユーザーがクラウドストレージの許可を与えるフィールドである必要があります。
3. 条件を「is」に設定します。
4. 最後のドロップダウンから、「アップロードをDropboxに保存することに同意します」（または使用した文言）というオプションを選択します。

この設定により、ユーザーが明示的に許可ボックスにチェックを入れた場合にのみ、WPFormsはファイルをDropboxに送信します。

クリーンアップオプションの有効化（オプション）

最後に、Dropboxに安全に保存された後、WordPressサイトからファイルを自動的に削除するクリーンアップオプションがあります。

これをオンにすると、WordPressのメディアライブラリは、すでにDropboxに保存したアップロードで散らかりません。

これを有効にするには、まず「高度なオプション」セクションを展開する必要があります。その後、「アップロード後にローカルファイルを削除」オプションを切り替えることができます。

ここから、「保存」をクリックしてDropboxの設定を保存できます。

ステップ6：フォームのテストと公開

フォームを公開する前に、すべてをテストする必要があります。

まず、WPFormsビルダー内でフォームをプレビューします。次に、フォームエディタの上部にある「プレビュー」ボタンをクリックすると、訪問者にどのように表示されるかが正確にわかります。

プレビュータブでは、すべてのフィールドが正しく表示され、追加のメモが理解しやすいことを確認したいはずです。

実際のテストでは、テスト情報を使用してフォーム全体に入力できます。

これにより、フォームの検証が機能しているかどうかを確認できます。たとえば、必須フィールドがスキップされたか、値が間違った形式で入力されたかなどです。

コンピューターからサンプルファイルをアップロードすることもできます。

その後、「送信」ボタンをクリックして、カスタム確認メッセージが表示されるかどうかを確認できます。

例として、私のものはこちらです：

これで、テスト送信を受信したかどうかを確認できます。

このタブでは、WordPress管理エリアを開き、WPForms » エントリーに移動し、リストからドロップダウンアップロードフォームをクリックできます。

フォーム入力リストでは、右側にリンクが表示されます。

「表示」をクリックして、エントリーの詳細を開きます。

次の画面で、フォームに入力したすべての情報を確認できるはずです。

アップロードしたファイルがDropboxに送信されたかどうかを確認するには、リンクにカーソルを合わせると、左下隅にDropboxのURLが表示されるかどうかを確認してください。

ステップ5でクリーンアップオプションを有効にしなかった場合、アップロードされたファイルの横に「Dropboxで表示」リンクが表示されます。

これは、ファイルがWordPressとDropboxの両方に保存されるためです。

すべてが正常に機能することを確認したら、フォームビルダーに戻り、WordPressサイトにフォームを埋め込むことができます。

ここから、「埋め込み」ボタンをクリックしましょう。

表示されるポップアップで、WPFormsはフォームをどこに追加するか（既存のページか新しいページか）を尋ねます。

このチュートリアルでは、「既存のページを選択」を選びますが、どちらの場合もプロセスは非常に似ています。

次に、ドロップダウンメニューを使用してページを選択できます。もしそちらを選択した場合は、新しいページに名前を付けるように促されます。

「開始しましょう！」をクリックしてください。

これにより、WordPressブロックエディターに移動します。

ここから、「+」ボタンをクリックしてWPFormsブロックを追加できます。

これで、コンテンツエディタにWPFormsドロップダウンが表示されるはずです。

ドロップダウンメニューを展開して、作成したばかりのDropboxアップロードフォームを選択するだけです。

WordPress は、コンテンツエディター にフォームを読み込みます。

より明確にするために、右側のパネルで「タイトルを表示」オプションを有効にすることができます。これにより、ユーザーにフォームのタイトルが表示されます。

すでにすべてが良好に見える場合は、「保存」または「公開」をクリックして進むことができます。

これで、ページにアクセスすると、Dropboxアップロードフォームが機能しているのがわかります。

ボーナスのヒント：WordPressフォームの送信を追跡する

Dropboxのアップロードフォームが公開されたら、ユーザーがどのように操作しているかを追跡することをお勧めします。これにより、何人が入力を開始し、何人がアップロードを完了したか、そしてどこで送信が失われている可能性があるかを確認できます。

この方法でフォームを追跡するには、まずGoogle Analyticsアカウントが必要です。

サイトをGoogle Analyticsに接続する最も簡単な方法は、MonsterInsightsを使用することです。これはNo.1のGoogle Analyticsプラグインです。Formsアドオンのおかげで、ファイルアップロードフォームを含むフォーム送信を自動的に追跡できます。

WPBeginnerでは、多くのトラッキングタスクに実際にMonsterInsightsを使用しています。プラグインの詳細については、MonsterInsightsの完全レビューをご覧ください。

アドオンをインストールしてデータが入り始めると、すべてのWordPressフォームのインプレッション、コンバージョン、コンバージョン率を表示できます。

これにより、ユーザーがアップロードを完了しているか、途中でフォームを破棄しているかを特定するのに役立ち、より良い結果のために最適化できます。

詳細については、WordPressでフォーム放棄を追跡および削減する方法に関するガイドをご覧ください。

よくある質問：WordPressでのDropboxアップロードフォーム

ファイルアップロードの設定に関する最も一般的な質問への回答はこちらです

アップロードできるファイルの種類とサイズを制限できますか？

はい、もちろんです。WPFormsを使用すると、ファイルアップロードフィールドを完全に制御できます。これは、自分のサイトで提出物を管理する上で非常に役立つ機能です。

フォームビルダーで「ファイルアップロード」フィールドをクリックすると、許可されるファイル拡張子（.pdf、.jpg、.docxなど）を指定し、最大ファイルサイズをメガバイト単位で設定できます。これにより、ユーザーがサポートされていないファイルや大きすぎるファイルをアップロードするのを防ぐことができます。

このプロセスは安全ですか？

はい、プロセス全体は安全です。WPFormsはWordPressサイトでフォームの送信を安全に処理し、Dropboxへの転送も暗号化されています。

Dropboxアカウントがいっぱいになった場合はどうなりますか？

Dropboxアカウントのストレージ容量が不足すると、フォームからのファイルアップロードは失敗します。WPFormsは引き続きユーザーが送信した情報をWordPressダッシュボードに保存しますが、ファイル自体はDropboxに送信されません。

WordPressでフォームを使用するためのその他の役立つガイド

この記事でWordPressでDropboxアップロードフォームを作成する方法を学べたことを願っています。次に、次のガイドも参照してください。

• WordPressフォームのカスタマイズとスタイリング方法
• WordPressでフローティングお問い合わせフォームを表示する方法
• WordPressで多言語フォームを作成する方法
• WordPressフォームへの18,000件のスパムリード攻撃をブロックした方法
• WordPressフォームのエントリを自動エクスポートする方法
• WordPressでカスタムAirtableフォームを作成する方法
• SalesforceをWordPressフォームに接続する方法
• WordPressフォームが機能しない：トラブルシューティングのヒント

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。