WordPressにお問い合わせフォームを設置するときに、おなじみのプラグインContact form 7。
日本生まれのプラグインなのでドキュメンテーションも日本語でわかりやすく、利用者が多いのでカスタマイズ情報も多いので使いやすいですよね。
Contact form 7では、テキストやラジオボタン、プルダウンなど色々なフォームを設置できますが、今回、fileタグの使用方法がわかりづらいとお客様からご連絡いただきました。
fileタグを設置すると、ブラウザに依存しますが、「ファイルを選択する」といったボタンが表示されて、ローカルに保存されている画像などをアップできます。
このボタンなんですが、選択したファイルを変更する場合はもう一度選びなおす、削除したい場合は、ファイル名をクリックしてキャンセルすれば空の状態にはなるんですが、その削除がたしかにわかりづらいです。。
そこで検索してみたところ、公式のフォーラムで、プラグインの作成者の方が、リセットボタンの設置について書かれていました。
Contact Form 7 でファイルを添付指定した後、削除・変更ができない
fileタグを設置する
fileタグは、【ファイル】ボタンをクリックすると挿入できます。
クリックするとポップアップが開くので、ここでIDを入力します。
【タグを挿入】をクリックすると、fileタグが挿入されるので、その下にbuttonタグで、リセットボタンを追加します。
buttonタグでリセットボタンを設置する
フォーラムの通りですが、
<button type="button" onclick="document.getElementById( 'your-file' ).value = '';">リセット</button>
onclickでクリックした時のアクションを追加、
getElementByIdでID属性からfileタグを指定し、
valueを’ ‘で空にしています。
すごくシンプルでわかりやすい方法ですね!
ファイルタグはブラウザ依存なので、使い慣れている人には問題なさそうですが、あまり使わない方にはこういったボタンがあったほうが親切かもです。
ぜひ試してみてください!