WordPressで無料ファイルアップロードフォームを作成する方法：初心者ガイド

WordPressのフォームを通じて、ユーザーが履歴書、スクリーンショット、ドキュメント、プロジェクトファイルなどをアップロードする方法を知りたいですか？

シンプルなファイルアップロードフィールドを使用すると、フォーム送信ですべてを送信できます。メールでファイルを個別に収集する必要はありません。WordPressユーザーであれば、さらに簡単です。適切なフォームプラグインが必要になるだけです。.

イライラする状況を見てみましょう。誰かがお問い合わせフォームの基本的な項目をすべて入力したのに、問題のスクリーンショットを添付する方法が見つかりません。フォームにファイルアップロードフィールドがないため、メールで送るしかありません。これはユーザー体験の流れを断ち切り、ユーザーに不快感を与えます。フォームデータと受信トレイを同時に管理することは、ユーザーにとっても管理者にとっても手間となります。.

したがって、画像やあらゆる種類のドキュメントを収集する場合でも、ファイルアップロードオプションを追加することは必須です。今日は、WordPressのファイルアップロードフォームを完全に無料で作成する方法を見ていきましょう。.

WordPressフォームにファイルアップロードフィールドを追加する理由

すべてのフォームにファイルアップロード欄が必要なわけではありません。ほとんどの場合、基本的な情報を収集するにはテキスト入力欄だけで十分です。しかし、ファイルのアップロードを行うことで、処理がより迅速かつ容易になる場合もあります。ファイルアップロードフォームが必要となる実際のシナリオをいくつか見てみましょう：

• サポートチケットを解決する際、エラーのスクリーンショットを添付することで、チームが問題を理解し解決しやすくなります。.
• 〜の 求人応募用紙, 、面接官は候補者を評価するために、その履歴書やポートフォリオを必要とします。. 
• オンライン出願の際、学生には成績証明書、推薦状、身分証明書の提出を求められることがよくあります。.
• クライアントが契約書やその他の法的文書をアップロードする必要がある可能性のある法的書類の場合。.
• 医療フォームでは、患者は処方箋、検査結果、その他の必要な書類を添付することができます。.  
• コンテストの応募用紙、例えば写真コンテストの応募用紙では、参加者は撮影した写真を提出する必要があります。. 

ファイルアップロードの入力欄がなかったら、ユーザーはメールでファイルを送信していたでしょう。そうすると、やがてメールが次々と溜まっていくことになります。結局、フォームデータは一か所で処理し、ファイルは別の場所で処理することになってしまいます。.

つまり、投稿された記事と添付ファイルを照合するためだけに、WordPressのダッシュボードと受信トレイの間を絶えず行き来しなければならなくなるということです。この行き来は作業全体を遅らせ、重要な情報を見落とす可能性を高めてしまいます。.

WordPressでファイルアップロード機能付きのフォームを作成するには？ 

ファイルアップロードオプションがどのような場面で役立つかについては、ここまでご説明しました。次は、最初は戸惑いがちな部分、つまりフォームの操作の流れを妨げずに、ファイルアップロードオプションを作成し、適切に設定する方法について解説します。.

幸いなことに、WordPressにはBit Formのような、ドラッグ＆ドロップで簡単にフォームを作成できるツールがあります。このプラグインを使えば、WordPressでのファイルアップロードフォームの作成は、思っているよりも簡単です。.

そして、何より素晴らしいのは？ Bit Formには、 無料版. また、このプラグインには50以上のフォームフィールドや、以下のような無制限のフォームを作成できるさまざまな無料機能が搭載されています。 複数ステップフォーム, 条件論理形式, 会話形式, 、その他。.

それでは、ファイルアップロードフォームを段階的に作成していきましょう

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

まだBit Formをインストールしていない場合は、WordPressのダッシュボードにアクセスしてください。.

いつもの手順に従ってください。「プラグイン」→ 新規追加→検索 Bit Form そして、それをインストールして有効化します。あるいは、単に Bit Formファイルをダウンロードする ウェブサイトより。.

有効化されると、ダッシュボードに「Bit Form」と表示されます。.

ステップ 2：ファイルアップロード機能付きの新しいフォームを作成する 

それでは、「+」をクリックしてください。「フォームを作成」”. ゼロから作成するか、あらかじめ用意されたテンプレートを使用するか、いくつかの選択肢が表示されます。.

このガイドでは、シンプルな連絡フォームのテンプレートを使用します。.

フォームはその目的に基づいて名前を変更することもできます。これは、複数のフォームを管理している場合に良い習慣です。.

テンプレートには、基本フィールドがすでに含まれています。

• 名前
• Eメール
• メッセージ

これでファイルアップロード機能を追加する必要があります。. 

追加後、次のステップはフィールド設定の構成です。.

ステップ3：ファイルアップロードフィールドの設定 

ファイルアップロードフィールドの設定パネルに移動してください。.

基本設定から始めましょう

• アップロードするものをユーザーが理解できるように、明確なラベルを追加してください
• ファイルが必須の場合は、フィールドも必須にしてください
• 必要であれば、短いヘルプテキストを追加します

ユーザーがアップロードできるようにすることもできます。

• 複数ファイル
• ユースケースに応じたさまざまなファイルタイプ

これらは、ファイルアップロードの主なオプションです。.

ステップ4： 次に、詳細設定に移動します

ここでは、～できます

• アップロードボタンのテキストをカスタマイズ
• 視覚的な分かりやすさを向上させるためにアイコンを追加
• ファイル選択状況を表示

ファイルプレビューやリスト表示も有効にできます。それ以外にも、役立つ機能がたくさんありました。これらのオプションは、ユーザーがフォームを送信する前にアップロードしたものを理解するのに役立ちます。これにより、間違いが減り、全体的なユーザーエクスペリエンスが向上します。.

セットアップが完了したら、「OK」ボタンを押すのを忘れないでください。“更新”右上の「」ボタン. 

この段階で、ファイルアップロード機能付きのWordPressフォームは完全に機能します。.

ステップ5：フォームをスタイリングする

ファイルアップロードフィールドの準備ができたら、スタイルタブからフォームのデザインを調整できます。ファイルアップロードフォームは、お好みに合わせてスタイル設定できます。 Bit Formの スタイルエディタ 機能. 

私もやったように、「“スタイル” タブ。ここでは、すぐに〜に行くことができます テーマのクイック調整 背景色、フォント、フィールドサイズなどの要素を調整するパネル。または、カスタマイズすることもできます グローバル要素 またはフォーム要素をデザインする 個々に. 変更はリアルタイムで反映されるため、ウェブサイトのデザインとフォームを簡単に一致させることができます。.

クラウドストレージオプションでアップロードされたファイルを管理する方法

さて、アップロードされたファイルはどこへ行くのだろうか、と疑問に思っているかもしれませんね。デフォルトでは、それらはサーバーに保存されます。これは小さなフォームでは問題なく機能しますが、大きなファイルを管理する必要がある場合や、送信数が増加するにつれて問題が発生します。.

サーバーにファイルを保存すると、次のようになります。

• ホスティングスペースをすぐに使い果たします
• 大きなファイルはウェブサイトの動作を遅くする可能性があります
• ファイル管理は時間の経過とともに煩雑になります
• バックアップとリカバリは、より重要になります

より良いファイル管理方法

サーバーだけに頼るのではなく、アップロードされたファイルをクラウドストレージに直接送信できます。.

Bit Formは、DropboxやGoogle Driveなど、一般的なクラウドストレージとの連携に対応しています。この例では、Dropboxを使用します。.

Dropbox 連携は無料版でも利用できるため、費用をかけずにアップロードしたファイルを Dropbox に送信できます。設定するには、以下の手順に従ってください。

ノート: Bit Form 50以上のプラットフォームやサービスと統合, 、そしてそれらすべては 無料.

ステップ1：インテグレーションに移動します

では、「“設定” ダッシュボードのパネルから、「“統合” 左のメニューから。.

でしたら検索してください ドロップボックス. 

ステップ2：Dropboxを接続する

アプリが表示されたら、それをクリックすると、承認ウィンドウが表示されます。Dropboxアカウントを接続するには、まずAPIキー、シークレット、およびアクセスコードを使用してDropboxアプリを承認してください。. 

認証が完了すると、連携が有効になります。.

ステップ3：ファイルアップロードフィールドのマッピング

Dropbox に接続した後、画像のように、あと2つのステップで完了します。.

2番目のステップでは、～をマッピングする必要があります ドロップボックスフォルダ付きファイル入力フィールド ファイルが正しい場所に送信されるように.

アップロードされたファイルをDropboxに保存した後、WordPressサーバーから削除するオプションもあります。サーバーをクリーンに保ちたい場合は、これを有効にしてください。.

クリック 次, 、設定を完了します。.

ステップ4：統合を保存する

クリック “完了して保存” クラウドストレージ連携が完了しました。

ステップ5：ファイルアップロードのトリガーを設定する

Dropboxアカウントを接続した後、ファイルがDropboxに送信されるタイミングをフォームに指示する必要があります。.

〜へ行く 条件分岐 設定。デフォルトの条件である 成功メッセージ. それをクリックし、既存の条件はそのままにしておきます。.

下にスクロールしてください 追加設定. ここから、作成したばかりのDropbox連携を選択します。これにより、フォームの送信がクラウドストレージと連携されます。.

設定は完了したら保存してください。これでフォームのテストを行います。フォームからファイルを送信し、選択したDropboxフォルダを確認してください。正常に動作するはずです。.

ユーザーエクスペリエンスを損なわずにファイルアップロードフォームを安全に保つ方法

ファイルアップロード付きのフォームを追加する際には、常に一つの懸念が伴います。 有害なものをアップロードしたらどうなりますか？ しかし、賢明な判断を下せば、問題はより早く解決できます。.

ほとんどの問題は、フォームが開きすぎている場合に発生します。例えば、許可する ファイルの種類やサイズに制限はありません 柔軟に見えるかもしれませんが、サイトが攻撃に対して脆弱になり、遅くなります。.

ファイルタイプの制御から始めます。. 実際に必要なフォーマットのみを許可してください。例えば、ドキュメントにはPDFまたはDOCX形式を、画像にはJPGまたはPNG形式を使用してください。.

ファイルサイズが次に対処すべきことです。e. 制限がない場合、ユーザーは大容量ファイルをアップロードでき、サイトのパフォーマンスに影響を与える可能性があります。そのため、不要なシステム負荷を防ぐために制限を設定してください。.

ストレージ セキュリティにおいても役割を果たします。ファイルがサーバーにのみ保存されている場合、すべてがホスティング環境に依存します。前述のように、クラウドストレージを使用することで、その依存関係が減り、ファイルに対する制御が向上します。.

スパムも覚悟しておくべきです. WordPressのフォームは自動送信されがちです。簡単な キャプチャ または、フォームの使い勝手を悪くすることなく、ほとんどのものをブロックするのに十分な検証レイヤーです。.

機密書類を収集する場合、例えば 契約書または医療記録, Bit Formの設定を使って 公開エントリーの閲覧を無効にする ログインユーザーのみアクセスを制限します。これにより、アカウントを持たないユーザーはアップロードされたファイルにアクセスできなくなります。.

最後に、時々アップロードを確認し、不要なものを削除することで、システムを管理しやすく保ちましょう。.

ボーナス：高度なファイルアップロードフィールド（Pro）

アップグレードすると Bit Form Pro（年間$29から）, 、あなたはより多くのものにアクセスできるようになります 高度なファイルアップロードフィールド これにより、アップロード体験をより細かく制御できます。.

高度なファイルアップロードフィールドは、以下をサポートしています：

• ドラッグアンドドロップ ユーザーは、ファイルブラウザをクリックする代わりに、デスクトップからアップロードエリアにファイルを直接ドラッグ＆ドロップできます。.
• コピー＆ペースト クリップボードから直接フィールドにファイルを貼り付けることができます。.
• ファイルの並び替え ユーザーは送信前に選択したファイルの順序を並べ替えることができます。.
• カメラキャプチャ モバイルデバイスでは、ユーザーはページを離れることなく、フロントカメラまたはリアカメラのいずれかを使用して、フォームから直接写真を撮ることができます。.
• コンパクトなレイアウトと拡張されたレイアウトのオプション アップロードパネルの表示方法を選択してください。一行表示か、拡張表示か。.
• ファイルスタイルのカスタマイズ アップロードボタンの視覚的な外観を、アイコンのみ、クラシック、フラットスタイルで制御します。.

しかし、必ずしも必要というわけではありません プレミアムプラン 標準のWordPressファイルアップロードフォームを作成するには.

ワークフローでドラッグ＆ドロップアップロード、モバイルカメラキャプチャ、またはよりカスタマイズされたアップロードレイアウトが特に必要な場合は、Pro版の検討に値します。現時点でそれらのいずれも重要だと感じていない場合は、無料版でも標準的なWordPressフォームにファイルアップロードフィールドを作成するには十分です。.

結び

これまでの説明で、フォームでファイルを収集することが複雑ではないことがお分かりいただけたと思います。基本的なファイルアップロードフォームを作成するために、複雑なセットアップや有料プラグインは必要ありません。.

フォームビルダーが適切なフィールドと明確な手順を提供していれば、ファイルアップロードオプション付きのフォームを作成するのは簡単です。このプラグインでは、ファイルの種類とサイズを制御し、フォームをカスタマイズして、アップロードされたファイルをDropboxなどのクラウドストレージに送信しました。.

したがって、次回誰かが履歴書、スクリーンショット、またはドキュメントを送る必要がある場合、メールを送るために受信トレイを掘り下げる必要がなくなります。ウェブサイトから直接送信できます。.

よくある質問