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

WordPressフォームでユーザーに複数のファイルをアップロードさせたいですか？ なら、ここが正しい場所です。このガイドでは、コーディング不要で、プロフェッショナルな見た目の複数のファイルアップロードフィールドを持つフォームを作成する方法を説明します。

この方法は、ポートフォリオ、ドキュメント、またはユーザーが一度に複数のファイルを提出する必要があるあらゆる状況の収集に最適です。

WordPressフォームを今すぐ作成

WordPressのお問い合わせフォームに複数のファイルをアップロードできるようにする方法

WordPressフォームでお客様にファイルをアップロードする機能を提供することで、必要な情報を収集しやすくなります。しかし、時にはそれ以上のファイルが必要になることもあります。例えば、求人応募フォームがある場合、履歴書とカバーレターの両方を収集する必要があるかもしれません。

WPFormsは、ドラッグ＆ドロップのフォームビルダーでファイルアップロードフィールドを簡単に作成したい場合に最適なファイルアップロードプラグインの選択肢です。デフォルトでは、WPFormsのファイルアップロードフィールドは、ユーザーが一度に複数のファイルをアップロードできるようにします。フォームにフィールドを追加するだけで済みます。

このチュートリアルでは、以下の内容を説明します。

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

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

このチュートリアルでは、フォームがまだ作成されていないと仮定し、最初から始めます。すでにフォームをお持ちで、ファイルアップロードフィールドを追加する方法だけを知りたい場合は、この最初のステップでエディターにフィールドをドラッグするだけで追加できることがわかります。

まず、WPFormsプラグインをインストールして有効化する必要があります。インストール方法の詳細については、WordPressにプラグインをインストールする方法に関するこのステップバイステップガイドを参照してください。

次に、WordPressダッシュボードに移動し、左側のパネルにある**WPForms » 新規追加**をクリックしてお問い合わせフォームを作成し、名前を付けます。好きな名前を付けることができます。

次に、**テンプレートを選択**セクションまでスクロールし、ファイルアップロードフォームテンプレートを検索します。次に**テンプレートを使用**をクリックして開きます。

WPFormsは、事前作成されたファイルアップロードフォームを生成し、ドラッグ＆ドロップビルダーを表示します。

ここでは、左側のパネルから右側のプレビューエリアにドラッグすることで、お問い合わせフォームに追加のフィールドを追加できます。

ファイルアップロードフォームテンプレートを使用すると、すでに**名前**、**メールアドレス**、**電話番号**、**ファイルアップロード**、および**追加コメント**のフィールドがあります。

フォームフィールドのいずれかをクリックして変更します。フォームフィールドをクリックして上下にドラッグし、フォーム上の順序を並べ替えることもできます。

注意: ファイルアップロードフィールドは、作成するWordPressフォームのいずれにも追加できます。フォームビルダーの左側パネルにある「Fancy Fields」の下にあるファイルアップロードフォームフィールドを、プレビューエリアにドラッグするだけです。

ステップ2：ファイルアップロードフィールドオプションを設定する

ファイルアップロードフィールドをクリックすると、フィールドオプションを開くことができます。

ここで変更できます:

• ラベル — サイト訪問者が何のためのフィールドか分かるように、フォームフィールドに名前を付けます。
• 説明 — ユーザーに詳細を説明する説明を追加します。たとえば、画像のみをアップロードしてほしい場合は、その旨を伝えてください。
• 許可されるファイル拡張子 — WordPressフォームへのアップロードを許可するファイルの種類を制限したい場合は、ここにカンマで区切って入力します。
• 最大ファイルサイズ — アップロードを許可する最大ファイルサイズをメガバイト単位で指定します。空白のままにすると、WPFormsはWebホストが許可する最大ファイルサイズをデフォルトで使用します。これを変更する必要がある場合は、WordPressで最大ファイルアップロードサイズを増やす方法に関するこのチュートリアルを参照してください。
• 最大ファイルアップロード数 — ユーザーがこのフォームに追加できる最大ファイル数を設定します。
• 必須 — フォームを送信する前にユーザーにファイルのアップロードを要求したい場合は、このオプションをオンにします。

一般的なフィールドオプションをカスタマイズしたら、「詳細設定」タブをクリックします。ここで、「スタイル」が「モダン」に設定されていることを確認してください。

これは、クラシックスタイルでは複数のファイルアップロードが許可されないため重要です。

これらのファイルアップロードがどこに保存されるか気になりますか？

デフォルトでは、ユーザーがアップロードしたすべてのファイルは、サイトのアップロードディレクトリ内のWPFormsフォルダに保存されます。さらに簡単に、WordPressメディアライブラリにフィールドを保存するオプションをオンにすることで、これらのファイルをWordPressメディアライブラリに保存することもできます。

アップロードされたファイルへのアクセスを制限したい場合は、WPFormsで簡単に実行できます。ファイルアップロードフィールドの詳細設定タブには、ファイルアクセス制限を有効にするトグルスイッチもあります。

このオプションを選択すると、パスワード保護によってアクセスを制限するか、ユーザーロールに基づいて制限できます。ユーザーロールを選択した場合、ユーザーはアップロードされたファイルにアクセスするためにログインしている必要があります。

エントリー画面およびフォームのメール通知からアップロードされたファイルにアクセスする方法もご紹介します。

WordPressでマルチステップフォームを作成する方法に関する投稿の手順に従うと、フォームをすばらしく見せることができます。ただし、このチュートリアルの目的上、シングルページに留めます。

ステップ3：フォーム設定をカスタマイズする

まず、設定 » 一般に移動します。

ここで次の設定を構成できます：

• フォーム名 — 必要に応じて、ここでフォームの名前を変更します。
• フォームの説明 — フォームの説明を入力します。
• タグ — WordPressフォームを整理するのに役立つように、フォームにタグを追加します。
• 送信ボタンのテキスト — 送信ボタンのコピーをカスタマイズします。
• 送信ボタン処理テキスト — フォーム送信中に表示されるテキストを変更します。

また、詳細設定を展開して、以下のオプションを設定することもできます。

• CSSクラス — フォームまたは送信ボタンにカスタムCSSを追加します。
• URLによる事前入力 — カスタムURLに基づいて一部のフィールドを自動的に事前入力します。
• AJAXフォーム送信の有効化 — ページリロードなしでAJAX設定を有効にします。
• WordPressへのエントリー情報の保存を無効にする — GDPR要件を遵守するために、IPアドレスやユーザーエージェントなどのエントリー情報とユーザー詳細の保存を無効にすることができます。簡単な連絡フォームにGDPR同意フィールドを追加する方法については、ステップバイステップの説明をご覧ください。

一般設定での作業が完了したら、スパム保護とセキュリティ設定をクリックします。

• スパム防止機能を有効にする — hCaptchaまたはGoogle reCAPTCHAを使用して、お問い合わせフォームのスパムを停止します。スパム防止チェックボックスは、すべての新しいフォームで自動的にチェックされます。
• Akismetスパム防止機能を有効にする — スパムを管理するためにAkismetプラグインを使用している場合、このフォームに接続して不正な送信を防ぐことができます。
• 国別フィルターを有効にする — 特定の国からの送信をブロックします。
• キーワードフィルターを有効にする — 特定の単語やフレーズを含む送信を防ぎます。

スパムエントリをブロックするためにCAPTCHAを設定することもできます。詳細については、スパム防止設定の完全ガイドをご覧ください。

完了したら、保存をクリックします。

ステップ4：フォームの通知を設定する

通知は、誰かがフォームを送信したときに知るための優れた方法です。

また、通知機能を無効にしない限り、サイトで誰かがフォームを送信するたびにメール通知が届きます。

誰かがフォームを完了したときにメールメッセージを受信するには、WordPressでフォーム通知を設定し、メールアドレスを提供する必要があります。

また、スマートタグを使用している場合、訪問者がフォームを完了した後にパーソナライズされた通知を送信して、受信したことを知らせることができます。これにより、ユーザーはフォームが正常に送信されたことを確認できます。

アップロードされたファイルをメール通知に含めるには、スマートタグを使用して、ファイルアップロードフィールドの内容をメール本文に含めます。これにより、クリックしてアップロードされたファイルを確認できるリンクが追加されます。

この詳細については、WordPressで複数のフォーム通知を送信する方法に関するステップバイステップガイドをご覧ください。

アップロードされたファイルをメール添付ファイルとして含めたい場合は、通知の下部までスクロールし、詳細設定を展開します。次に、ファイルアップロード添付ファイルを有効にする設定をオンにします。

一部のメールプロバイダーは、大きな添付ファイルを含むメールを配信しない場合があることに注意してください。ステップ2で示したように、フィールドオプションで最大ファイルサイズを変更できます。

さらに、カスタムヘッダー画像領域にロゴや選択した画像を追加することで、通知メールを簡単にブランド化するオプションがあります。選択した画像は、以下のWPFormsロゴのように、メール通知の上部に表示されます。

ステップ5：フォームの確認画面を設定する

フォームの確認は、ユーザーがフォームに情報を送信した直後に（自動的に）アクションを実行する方法です。このステップでさらにヘルプが必要な場合は、フォームの確認を設定する方法に関するチュートリアルをご覧ください。

WPFormsには3種類の確認があります。

1. メッセージ — フォームの送信後に表示されるデフォルトの確認タイプで、カスタマイズ可能です。サイト訪問者の満足度を高めるために確認メッセージをカスタマイズする方法についてのヒントをご覧ください。
2. 表示ページ — ユーザーをサイト上の任意のページに自動的に送信します。たとえば、お礼ページなどです。
3. リダイレクト — より複雑な開発のために、ユーザーを別のウェブサイトまたは専門のURLに誘導したい場合に便利です。

それでは、WPFormsで簡単なフォーム確認を設定する方法を見ていきましょう。これにより、サイト訪問者がサイトでフォームを送信したときに表示される成功メッセージをカスタマイズできます。

開始するには、[設定]の下にあるフォームビルダーの[確認]タブをクリックします。

次に、作成したい確認タイプの種類を選択します。この例では、[メッセージ]を選択します。

次に、確認メッセージをお好みに合わせてカスタマイズし、完了したら[保存]をクリックします。

これで、フォームをウェブサイトに追加する準備ができました。

ステップ6：フォームをウェブサイトに追加する

フォームを作成したら、WordPressウェブサイトに追加する必要があります。WPFormsを使用すると、ページ、ブログ投稿、サイドバーウィジェットなど、ウェブサイトの複数の場所にフォームを追加できます。

それでは、最も一般的な配置オプションであるページまたは投稿の埋め込みを見ていきましょう。

まず、WordPressで新しいページまたは投稿を作成するか、エディターで既存のものを開きます。その後、新しいブロックを追加して[WPForms]を選択します。すぐに見つからない場合は検索できます。

次に、ブロック内にWPFormsウィジェットが表示されます。WPFormsドロップダウンをクリックして、ページに挿入したい、すでに作成したファイルアップロードフォームを選択します。

次に、右上にある青いボタンをクリックして[公開]または[更新]を選択すると、フォームがウェブサイトに表示されます。

これで完了です！フォームがウェブサイトに表示されました。

ステップ7：ファイルを閲覧する

WPFormsは、各フォーム送信をエントリーとして保存します。アップロードされたファイルを表示するには、WPForms » Entries に移動します。

そこから、ドロップダウンメニューで正しいフォームを選択し、[表示]をクリックします。

ここで、このエントリのファイルアップロードを表示またはダウンロードできます。

さらに良いことに、Zapierアドオンを使用して、次のようなさまざまなWebアプリにすべてのファイルアップロードを自動的に保存できます。

• Google ドライブ
• Dropbox
• およびその他の多くのクラウドストレージサービス

複数のファイルアップロードフォームを今すぐ作成

FAQ — WordPressファイルアップロード

WordPressにアップロードできるファイルの種類は？

WPFormsプラグインを使用すると、サイト訪問者はさまざまな種類のファイルを連絡フォームに簡単にアップロードできます。ファイルアップロードフィールドを埋め込んでアップロードできます：

• ドキュメント（.doc、.xls、.ppt、.pdf）
• 画像（.png、.gif、.jpg）
• 動画（.mpg、.mov、.wmv）
• 音声（.wav、.mp3、.mp4）

この同じプロセスを使用して、WordPressでCSVファイルをアップロードできるようにすることができます。

ただし、WordPressのセキュリティ上の理由により、一部のファイルはアップロードできません。たとえば、画像をWordPressにアップロードすることはできますが、一部のスマートフォン形式がブロックされている場合があります。

その問題が発生した場合は、フォームに追加のファイルアップロードタイプを許可する方法を説明します。また、Adobe Illustratorファイルのアップロードを許可するためのより具体的なガイドもあります。

次に、WordPressフォームで支払いを受け取る

これで完了です！これで、複数のファイルアップロードを含むWordPressフォームを作成する方法がわかりました。支払いフィールドを追加して、ファイルアップロードと一緒に支払いが必要なようにすることもできます。

また、この記事を楽しんでいただけた場合は、クールな連絡先ページのデザイン例もご覧ください。

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。