Elementor V4の「Atomic Form」には、フォームからファイルをアップロードできる「File Upload」Elementが用意されています。
この記事ではFile Uploadエレメントについて解説していきます。
Atomic フォームのFile Uploadとは？
お問い合わせフォームに資料や画像を添付してもらったり、採用フォームで履歴書や職務経歴書を送ってもらったりする場合など、ファイルを受け取るフォームを比較的シンプルに作成できます。
実は旧フォームウィジットにもこの機能があり、設定は以前とほぼ変わりませんが、インターフェイスなど変わった点もありますので、改めて解説していきます。
まずは、Atomic FormのFile Uploadで何ができるのか、設定項目を確認してみます。
Atomic Formは、従来のような1つのフォームウィジェットにすべてのフィールドが含まれているのではなく、Input、Checkbox、Radio Button、Select、File UploadなどのAtomic Elementsを組み合わせてフォームを構築する仕組みです。
File Uploadは、その中の「ファイルを送信するためのエレメント」です。
例えば、
- お問い合わせフォームに画像を添付してもらう
- 採用フォームから履歴書を送ってもらう
- 見積もり依頼で資料を添付してもらう
- 不具合報告フォームでスクリーンショットを送ってもらう
といった用途に利用できます。
File Uploadをフォームに追加する
Atomic Formを配置したら、ElementorのElementパネルから「File Upload」を追加します（下図参照）。
この「File Upload」を配置すると以下のように表示されますのでご確認ください。
このままでは何をアップするのかユーザーが分からないので、ラベルもつける必要があります（下図参照）。
たとえば、採用応募フォームなら「履歴書」、身分証明書でしたら「免許証またはマイナンバーカード」といったところでしょうか。「Send File」でファイルの受け取り方を設定
File Uploadエレメントの編集画面は下図のようになっています。
ひとつひとつ見ていきたいと思います。
「Send File」の項目では添付ファイルの受け取り方法を設定します。
ファイルの送信方法として以下の3つが用意されています（下図参照）。
Email with link
アップロードされたファイルをWebサイトのサーバーに保存し、そのファイルへのリンクをメールで送信します。
例えば、
お問い合わせがありました。
添付ファイル：
https://example.com/xxxxx.pdfこのように、メールからが届き、リンクからファイルへアクセスする形式です。
Email with attachment
アップロードされたファイルをメールに添付して送信します。
メールを受け取った担当者が、そのまま添付ファイルを確認できる方法です。
Email with both
ファイルをサーバーにアップロードしたうえで、メールにも添付します。
つまり、サーバーに保存＋メールにも添付という設定です。
どの方法を使うかは、受け取るファイルの種類や容量、メールサーバーの制限なども考慮して決める必要があります。
最大ファイルサイズを設定できる
File Uploadには「Max file size」という設定があります。
アップロードできるファイルサイズを制限できるため、ユーザーが非常に大きなファイルを送信してしまうことを防ぐことができます。
デフォルトでは「Max file size 5MB」に設定なっています。
ただし、実際にアップロードできるサイズは、WordPressやサーバー側のアップロード上限などにも影響されます。
そのため、Elementor側で設定したサイズだけでなく、サーバー側の設定も確認しておくことが重要です。
「Allowed file types」でファイル形式を制限
「Allowed file types」では、アップロード可能なファイル形式を制限できます。
例えば、採用フォームなら、PDF、DOC、DOCXなど、必要なファイル形式だけを許可することができます。
画像を受け取るフォームなら、JPG、PNG。WEBPなどに限定することもできます。
不要なファイル形式まで許可してしまわないよう、フォームの用途に合わせて設定しておくとよいでしょう。
特に非ログインユーザーにZIPファイルを許可するとウィルスを送りつけられる可能性があるので、注意が必要です。
複数ファイルのアップロードにも対応
「Multiple files」を有効にすると、ユーザーが複数のファイルを一度に送信できるようになります。
デフォルトではOFFになっていますので、必要に応じてON（上図の状態）にして、数字を変更することで複数の資料や画像をまとめてアップロードできるようになります。
1つだけファイルを受け取るフォームなら無効にし、複数ファイルを想定するフォームでは有効にする、と使い分けるとよいでしょう。
必須項目にもできる
File Uploadには「Required（必須）」設定もあります。
これを有効にすると、ファイルが選択されていない状態ではフォームを送信できなくなります。
例えば、「履歴書を必ず添付してください」という採用フォームなら、File UploadをRequiredにしておくことができます（上図はOFFの状態です）。
実際のフォームではこんな使い方ができる
例えば、採用フォームなら次のような構成にできます。
お名前 [ ]
メールアドレス [ ]
電話番号 [ ]
希望職種 [ ]
履歴書 [ ファイルを選択 ]
職務経歴書 [ ファイルを選択 ]
[ 送信する ]
履歴書と職務経歴書を別々のFile Upload Elementにすることで、それぞれ異なるファイル形式や必須条件を設定することもできます。
また、不具合報告フォームなら、
お名前 [ ]
メールアドレス [ ]
不具合の内容 [ ]
スクリーンショット [ ファイルを選択 ]
[ 送信する ]
といった構成も考えられます。
File Uploadを使うときの注意点
ファイルアップロードは便利ですが、通常のテキスト入力とは違って、サーバーの容量やセキュリティにも関係します。
特に、
- アップロード可能なファイル形式
- 最大ファイルサイズ
- サーバーのアップロード上限
- メールサーバーの添付ファイル容量
- アップロードされたファイルの保存場所
- 個人情報を含むファイルの取り扱い
などは、実際のサイトで導入する際に確認しておきたいポイントです。
「何でもアップロードできるようにする」のではなく、フォームの目的に合わせて必要なファイル形式とサイズに絞ることが重要です。
まとめ
Elementor V4のAtomic Formに追加されたFile Uploadを使えば、フォームからファイルを受け取る仕組みをAtomic Elementsの一つとして構築できます。
主な設定は、
- Send File：ファイルの受け取り方法
- Max file size：最大ファイルサイズ
- Allowed file types：許可するファイル形式
- Multiple files：複数ファイルのアップロード
- Required：ファイル添付を必須にするか
です。
お問い合わせフォームだけでなく、採用応募、資料請求、画像送信、不具合報告など、ファイルを受け取るさまざまなフォームで活用できます。
Atomic Formを使っているなら、単純なお問い合わせフォームだけでなく、File Uploadを組み合わせることで、より実用的なフォームを作れるようになります。
