Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

少し前までは、WordPressにファイルアップロードフォームを追加するには、カスタマイザーコードや面倒な回避策が必須でした。初心者に優しいとは言えず、サイトオーナーと訪問者の双方を混乱させることもしばしばでした。

そのため、私たちは長年にわたってさまざまなツールをテストし、企業がこのプロセスを合理化できるよう支援してきました。

例えば、求人の応募を集めたり、カスタマイザーからのフィードバックを受け取ったり、プロジェクトのために重要なドキュメンテーションを集めたりする必要があるとします。この場合、ファイルアップロードフォームはあなたのサイトをはるかに効率的でプロフェッショナルなものにします!

このステップバイステップのガイドでは、初心者向けのプラグインを使ってWordPressで簡単にファイルアップロードフォームを作成する方法をご紹介します。これは、私たちのパートナーブランドの多くが、ドキュメント収集を簡素化し、ユーザーとのインタラクションを向上させるために利用している方法と同じです。

Creating a File Upload form in WordPress

なぜWordPressにファイルアップロードフォームを作るのか?

ファイルアップロードフォームは、WordPressサイトでユーザーからあらゆる種類のファイルを収集するための素晴らしいアイデアです。

ユーザーに画像、PDFファイル、Wordドキュメント、その他の種類のファイルをアップロードさせることができます。

ファイルアップロードフォームを使用することで、ユーザーとあなたの生活が簡単になります。メールでやり取りする代わりに、必要なフィールドをすべて含むフォームを作成し、一度にすべての情報を収集することができます。

また、フォームのデータはWordPressのデータベースに自動的に保存されるようにしましょう。そうすれば、メールを見逃したり削除したりしても、簡単に送信内容を見つけることができます。

そこで今回は、WordPressでファイルアップロードフォームを作成する方法をご紹介します。この投稿で説明することを簡単に説明します:

さっそく始めよう!

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

このチュートリアルでは、市場で最高のオンラインフォームビルダーであるWPFormsを使用します。WPFormsは初心者に優しく、ファイルアップロード、条件付きロジック、マルチステップフォームのような高度な機能を扱えるほどパワフルです。

WPFormsは、お問い合わせフォームやサイト移行のリクエスト、毎年恒例のユーザーアンケートなど、必要不可欠なタスクを処理するために、いくつかのサイトで使用しています。WPFormsのおかげで、メールやスプレッドシートを使いこなすことなく、簡単にレスポンスを収集・管理できるようになりました。

詳しくはWPFormsのレビューをご覧ください。

WPForms homepage

まず、WPFormsプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

注:WPFormsは無料版も提供しています。ただし、ファイルアップロードフォームテンプレートのロックを解除するにはプラグインのプロバージョンが必要です。

有効化した後、WordPress管理サイドバーからWPForms ” 新規追加ページにアクセスします。

検索テンプレート」ページが表示されますので、新しいフォームの名前を決めてください。

次に、フォームの作成方法を選択します:白紙のキャンバス、AIフォームビルダー、または既製のテンプレートを使用します。

例えば、AIフォームビルダーのWPFormsを選択した場合、必要なフォームのタイプを簡単なプロンプトで説明するだけです。WPFormsは自動的にフォームを生成します。

WPForms AI forms in action

このチュートリアルでは、あらかじめ用意されているテンプレートを使用します。検索バーを使って、ファイルアップロードフォームのテンプレートをすぐに見つけることができます。

テンプレートを見つけたら、「ファイルアップロードフォーム」設定の下にある「テンプレートを使用」ボタンをクリックしてください。

Choose the File Upload form template

WPForms ビルダーに移動し、ファイルアップロードフォームが自動的に読み込まれます。

ファイルアップロードフォームテンプレートをそのまま使用することもできますし、「フィールドの追加」サイドバーからフォームフィールドをドラッグ&ドロップすることもできます。

File Upload form will now be automatically created for you

次に、フォームの「ファイルアップロード」フィールドをクリックして、左カラムの設定を開きます。

初期設定では、以下のようなさまざまなタイプのファイルをアップロードできます:

  • 画像ファイル形式.png, .gif, .jpg
  • ドキュメンテーション:.doc、.xls、.ppt、.pdf
  • 音声ファイル.wav、.mp3、.mp4
  • 動画.mpg、.mov、.wmv

許可されたファイル拡張子」ボックスにファイル形式を入力することで、どのようなファイル形式でも受け入れることができます。

このチュートリアルでは、.png、.gif、.jpgの画像フォーマットを許可します。各ファイル形式をコンマで区切ってください。

Type file extension type

📝📝注意:WordPressは、WordPressのセキュリティ上の理由から、サイトにアップロードできるファイルの種類を制限しています。通常許可されていないファイルタイプのアップロードをユーザーに許可したい場合は、WordPressにファイルタイプを追加できます。

また、ファイルサイズの上限やファイル数の上限を設定することもできます。チュートリアルでは、1枚50MBまでの写真を3枚まで送信できるようにします。

ファイルを添付せずにWordPressフォームを送信できないようにするには、「必須」スイッチをオンにします。これは、少なくとも1つのファイルがアップロードされていない限り、フォームを送信できないことを意味します。

Choose file size and the number of files to be uploaded

次に、上から「詳細」タブに切り替える。

初期設定では、ファイルアップロードフィールドは、ユーザーがファイルをドラッグ&ドロップできるモダンなフォーマットを使用しています。

しかし、フォームのスペースが限られている場合や、クラシックなアップロードフィールドをご希望の場合は、変更することができます。スタイル’ドロップダウンメニューから’クラシック’オプションを選択してください。

クラシックアップロードフィールドは1つのファイルしかアップロードできないことに注意してください。ユーザーが複数のファイルを送信できるようにしたい場合は、フォームに複数のファイルアップロードフィールドを追加する必要があります。

Choose the Classic option as the form style from the dropdown menu

また、「Store file in WordPress Media Library」スイッチをオンにすることで、送信されたファイルをWordPressメディアライブラリに保存することもできます。これにより、アップロードしたファイルを投稿やページに簡単に追加することができます。

例えば、写真コンテストを開催する場合、優勝者を発表するときに最も優れた写真を掲載したいと思うかもしれません。

📝注意:このボックスにチェックを入れなくても、アップロードされたファイルはWordPressデータベースに保存されます。WordPressホスティングサービスアカウントの区切りフォルダーに保存されます。

Toggle the switch to allow the form to store files in the media library

フォームの他のフィールドを編集したい場合は、そのフィールドをクリックして、左カラムにあるフィールドの設定を開くことができます。

左のカラムから、ファイルアップロードフォームに他のフィールドを追加することもできます。

例えば、フォームにウェブサイト/URLフィールドを追加して、ユーザーが自分のサイトへのリンクを提供できるようにすることもできます。

Save the form after adding additional fields

フォームに問題がなければ、画面右上の「保存」ボタンをクリックして設定を保存します。

ファイルアップロードフォームの通知設定

フォームの通知設定を変更するには、左側の「設定」タブを開く必要があります。そこで’通知’タブをクリックします。

初期設定では、フォーム送信時に {admin_email} にメールが送信されます。

WordPressサイトを自分で作成した場合は、これがあなたのメールアドレスになります。そうでない場合は、{admin_email}を削除して、代わりにここに自分のメールアドレスを入力してください。

Change the email address the receives the notifications

しかし、{admin_email}があなたのメールアドレスかどうかわからない場合は、WordPressの管理ダッシュボードから設定 ” 一般ページにアクセスするだけです。

そこで「管理者メールアドレス」セクションを探します。ここから管理者メールアドレスを変更することができます。

Check the admin email

設定が完了したら、忘れずに「変更を保存」ボタンをクリックして設定を保存してください。

送信されたファイルを複数の人に送信したい場合は、複数の通知先を持つお問い合わせフォームの作成方法のチュートリアルをご覧ください。

フォーム送信後にユーザーに表示される確認メッセージも変更できます。

これを行うには、左の列から「設定 ” カラム」ページにアクセスします。次に、「確認メッセージ」ボックスにメッセージを入力します。太字や斜体などの書式を追加することもできます。

Change the confirmation message

最後に、変更したらフォームを保存することを忘れないでください。

フォームビルダーを終了するには、右上の「X」をクリックします。

サイトにファイルアップロードフォームを追加する

フォームの作成が完了したら、それをサイトに追加する必要があります。

これを行うには、管理サイドバーから既存または新規のWordPressページ/投稿を開く必要があります。このチュートリアルでは、新しいページにファイルアップロードフォームを追加します。

画面左上の「新規ブロックの追加(+)」ボタンをクリックし、WPFormsブロックを探します。

Locate and add the WPForms block

ブロックを追加すると、ページにWPFormsドロップダウンメニューが表示されます。

先ほど作成したファイルアップロードフォームを選択してください。

Choose the File Upload form from the dropdown menu

最後に、’公開する’ または ‘更新’ ボタンをクリックして変更を保存します。詳しくはWordPress フォームの埋め込み方法をご覧ください。

これで、あなたのサイトにアクセスして、ファイルアップロードフォームの動作を確認することができます。

File upload form preview

また、管理サイドバーからWPForms ” すべてのフォームページにアクセスすることで、いつでもフォームを変更することができます。

ここから、フォーム名をクリックするか、フォームにマウスオーバーして「編集」リンクをクリックするだけで、フォームビルダーが開きます。

Edit form

フォームを編集すると、WordPressサイト上で自動的に更新されますので、改めてページに追加する必要はありません。

🧑‍💻プロからの アドバイス:フォームが期待通りに動作しているかテストすることをお勧めします。フォーム入力後にメール通知が届かない場合は、WordPress がメールを送信しない問題を解決するためのステップバイステップガイドをご覧ください。

アップロードされたファイルの表示またはダウンロード

誰かがファイルアップロードフォームを使ってファイルを送信すると、受信トレイやWordPressダッシュボードでそのファイルを見ることができます。

フォームに入力するごとに、このようなメールが届きます:

Preview of the email you'll receive when someone fills the form

リンクをクリックするだけで、ファイルそのものを表示またはダウンロードできます。

WordPress ダッシュボードで簡単にファイルを見つけることもできます。WPForms ” Entriesページに行き、フォーム名をクリックするだけです。

Choose the file upload form on the entries page

アップロードされたファイルはWordPressフォームエントリーのテーブルで見ることができます。

また、「表示」リンクをクリックすると、各フォームエントリーの詳細が表示されます。

View form entries

ボーナスヒント🌟:WordPressフォームのスタイリング方法

ファイルアップロードフォームを作成したら、ブランドカラーに合わせてカスタマイズすることをお勧めします。そうすることで、フォームを視覚的にアピールすることができ、より多くのユーザーにサイト上で送信してもらい、最終的にリードを生み出すことができるかもしれません。

WPFormsを使えば簡単にできます。ファイルアップロードフォームをページや投稿に追加したら、WordPressダッシュボードからWPForms ” 設定ページにアクセスするだけです。

ここで、「Use Modern Markup」オプションをチェックし、「Save Changes」ボタンをクリックする。

Enable modern markup in WPForms

フォームを追加したページを開き、右側のブロックパネルを見てください。ここで、ファイルアップロードフォームのスタイル設定に使える新しい設定がいくつかあることに気づくでしょう。

フィールドの色、テキストの色、ボタンの色を変更して、フォームを視覚的にアピールすることができます。

Style your file upload form

設定が完了したら、上部にある「公開する」または「更新する」ボタンをクリックして設定を保存します。これでファイルアップロードフォームのスタイル設定は完了です。

詳しくは、WordPressフォームのカスタマイズとスタイルについてのチュートリアルをご覧ください。

動画チュートリアル

動画での説明がお好きですか?WordPress でファイルアップロードフォームを作成する方法については、YouTube のチュートリアルをご覧ください:

Subscribe to WPBeginner

このチュートリアルで WordPress でファイルアップロードフォームを作成する方法を学んでいただけたでしょうか。また、WordPress フォームの究極ガイドWordPress ファイルアップロードプラグインのエキスパートセレクションもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

13件のコメントLeave a Reply

  1. Mrteesurez

    I can that WPForms seems to be the best contact form plugin for WordPress for any business bro has.
    But what if I want to store the uploaded files in another location, maybe third party location, like AWS, azure or Google drove, do that I can be able to collect more files and never overload my shared WordPress hosting database.

    • WPBeginner Support

      WPForms does allow you to send the uploaded files to storage like AWS or drive to not have the files on your hosting itself.

      Admin

  2. Ralph

    This is really nice idea for a contest. Way better than leaving an email that can be spammed with a lot of files. This is clear, offer security in form of deciding what files are accepted and how many of them. Great guide!

    • WPBeginner Support

      Glad you found it helpful :)

      Admin

  3. Jiří Vaněk

    Before I had my own server where I configured PHP according to my needs, it’s important to note that the upload file size limit might still be on the provider’s side. Many providers have a much smaller PHP limit per file. Be mindful of this. Sometimes, you can adjust it in the .htaccess file, sometimes with a .user.ini file, and sometimes not at all. You might need to contact the server administrator to increase the file upload limit using PHP.

  4. Patricia Dueck

    When a person uploads a file to a WordPress form, do they have to have a WordPress account or a certain type of email address or can anyone upload a file regardless of their email address?

    • WPBeginner Support

      It would depend on how you set up the form but you can accept uploads from anyone you wanted :)

      Admin

  5. Leandro

    Hello, first thanks for sharing knowledge.

    One question: is there any way to change the path for sending the file, for example to an S3 bucket?

  6. Tisanke J N Simasiku

    Thank you. This is exactly what I needed right now.

    • WPBeginner Support

      You’re welcome :)

      Admin

  7. Ezekiel

    I can’t access uploading have access uploading files on my if I didn’t subscribe to any plan right??

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.