ここでは、WordPressのプラグイン「Contact Form 7」で作成した問い合わせフォームのファイル添付ボタンのデザインをカスタマイズする方法、さらにユーザーが画像ファイルをアップしたときにサムネイル画像が表示される仕組みまでを見ていきます。
結論から見ていただくと、こんな感じになります。下記の「画像を選択」という部分をクリックして何か画像を選択するとサムネイルが表示されます。サムネイルが表示されたときに、画像の右上にはバツ印のアイコンが表示されてクリックで画像を削除することができる仕組みです。
ボタンで表示を切り替えてご覧ください。
See the Pen
input-type-file-custom02 by kenichi (@ken81)
on CodePen.
ちなみに、画像を表示させたときの右上のアイコンは、Awesomeを使用しています。
コンテンツ
input type=”file”のデザインをカスタマイズしてアップロードされた画像をサムネイル表示する方法
初期設定の「ファイル」フォームタグ
まず、「Contact Form 7」で「ファイル」というフォームタグはHTMLとしてどのようなコードになっていて、ページ内ではどのように見えるかを確認してみましょう。
フォームタグ
[file sample]
HTML
<span class="wpcf7-form-control-wrap sample"> <input type="file" name="img-file" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false"> </span>
ページ内
「ファイル」フォームタグのカスタマイズ
今回のファイル送信は画像を想定しているので、添付できるファイル形式を画像のみに限定させるため、フォームタグを変更します。
フォームタグ
[file sample limit:5mb filetypes:jpg|jpeg|png|gif]
filetypes:の後に指定したい拡張子を「|」で区切って入れることでファイル形式を指定できます。これは、HTMLとしては下記のようになります。また、写真の添付をスマホから送ってもらうことを想定している場合、初期設定の状態だとファイルサイズがオーバーしてしまうので、limit:5mbで上限を5MBまで上げておきましょう。
HTML
<span class="wpcf7-form-control-wrap sample"> <input type="file" name="sample" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false"> </span>
スタイルシートを適用させるためのカスタマイズ
inputタグはそのままだと、スタイルシートが適用できません。そのため、下記のようにlabelタグでラップしてinput要素は非表示にして、label要素にデザインを入れることで対応します。
フォームタグ
<label>画像を選択[file sample limit:5mb filetypes:jpg|jpeg|png|gif]</label>
スタイルシートを扱える方なら後の説明は不要かと思いますが、一応サンプルを載せておきます。
ボタンで表示を切り替えてご覧ください。
See the Pen
input-type-file-custom01 by kenichi (@ken81)
on CodePen.
HTML
<label class="sample">
画像を選択
<span class="wpcf7-form-control-wrap sample"><input type="file" name="sample" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif" aria-invalid="false">
</span>
</label>
CSS
label.sample{
display: block;
cursor: pointer;
background: #333;
color: #fff;
font-size: 2em;
line-height: 5;
width: 300px;
text-align: center;
}
label.sample::before{
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f030";
}
label.sample input {
display: none;
}
アップロードされた画像をサムネイル表示する方法
アップロードされた画像をサムネイル表示させる方法は下記のような仕組みです。
コンタクトフォーム
<div class="img_form"><a class="del" style="display:none;"></a><label class="up_link">画像を選択[file sample limit:5mb filetypes:jpg|jpeg|png|gif]</label></div>
CSS
label.up_link {
display: block;
cursor: pointer;
background: #333;
color: #fff;
font-size: 2em;
line-height: 5;
text-align: center;
}
.up_link::before{
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f030";
margin-right: .3em;
}
label.up_link + img{
width: 100%;
}
label.up_link input{
display: none;
}
.img_form {
position: relative;
width: 300px;
margin: 0 auto;
}
a.del{
text-decoration: none;
}
a.del::after{
position: absolute;
top: 5px;
right: 5px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f057";
font-size: 2.0em;
color: #000;
}
a.del::before{
content: "";
position: absolute;
top: 7px;
right: 7px;
width: 1.8em;
height: 1.8em;
background: #fff;
border-radius: 50%;
}
Javascript
jQuery(function () {
// 添付画像の表示する
jQuery('form').on('change', 'input[type="file"]', function (e) {
var file = e.target.files[0];
var reader = new FileReader();
var img_form = jQuery(e.target).closest('.img_form');
var label = img_form.find('.up_link');
var del = img_form.find('.del');
var pic = img_form.find('.up_file');
pic = jQuery('<img src="" alt="" class="up_file">');
label.after(pic);
reader.onload = function (e) {
pic.attr('src', e.target.result);
pic.css('display', 'block');
label.css('display', 'none');
del.css('display', 'block');
};
reader.readAsDataURL(file);
});
// 写真削除
jQuery(document).on('click', '.del', function (e) {
var wpcf7 = jQuery(e.target).closest('.wpcf7');
var img_form = jQuery(e.target).closest('.img_form');
img_form.find('.up_file').remove();
img_form.find('.up_link').css('display', 'block');
img_form.find('input').val('');
img_form.find('.del').css('display', 'none');
img_form.replaceWith(img_form.clone(true));
});
jQuery('.up_file').css('display', 'none');
jQuery('.del').css('display', 'none');
});
ボタンで表示を切り替えてご覧ください。
See the Pen
input-type-file-custom02 by kenichi (@ken81)
on CodePen.
いろいろ調べながらここまでたどり着きましたが、正直なところjQueryはあまり詳しくないので、質問されても答えられません。ご了承ください。
以上が、「Contact Form 7」を使ってinput type=”file”のボタンデザインをカスタマイズし、アップロードされた画像をサムネイル表示する方法でした。
