WordPressのフォームプラグイン「MW WP Form」には、フォームタグとして「ファイル」「画像」が用意されています。見積り依頼フォームで現場写真を添付してもらう、といった場面でよく使われますが、デフォルトのままだと見た目があまり良くありません。

結論から言うと、JSとCSSを組み合わせれば、ファイル添付ボタンをサイトのデザインに合わせておしゃれにカスタマイズできます。この記事では、そのHTML・JS・CSSを解説します。

まず、デフォルトの状態がこちらです。

これを、JSとCSSで次のような見た目にしていきます。ファイル名の表示や、選択後のクリア（削除）ボタンも付けます。

HTML

まず、フォームタグの部分を次のようなコードにします。ファイル添付のフォームタグをlabelで囲み、ファイル名を表示する要素（__status）と削除ボタン（__delete）を用意しておきます。

<div class="imgattached">
    <label>[mwform_file name="写真01"]<span class="label-inner">写真01 添付</span></label>
    <div class="imgattached__status">選択されていません</div>
    <div class="imgattached__delete"></div>
</div>

JS

次に、JS（jQuery）で、ファイルが添付されたときと、削除ボタンがクリックされたときのアクションを設定します。

$(function() {
    $(".imgattached input").on("change", function() {
        var $file = $(this).prop("files")[0];
        var $status = $(this).parent().nextAll(".imgattached__status");
        var $delete = $(this).parent().nextAll(".imgattached__delete");
        $status.text($file.name);
        $delete.show(); //クリアボタンを表示
    });
    $(".imgattached__delete").click(function() {
        var $status = $(this).prevAll(".imgattached__status");
        $(this).prevAll("label").children("input").val(""); //inputをリセット
        $status.text("選択されていません"); //ファイル名をリセット
        $(this).hide(); //クリアボタンを非表示
    });
});

ファイルが選択されると、__statusにファイル名を表示し、削除ボタンを表示します。削除ボタンを押すと、inputの値をリセットし、表示も元に戻します。ユーザーが「何を添付したか」「取り消せるか」がひと目で分かるようになります。

複数のファイル添付欄を並べる場合も、.imgattachedのまとまりを繰り返すだけで対応できます。JSは各まとまりの中でparent()やnextAll()を使って相対的に要素を探しているため、欄が増えても取り違えずに正しく動きます。なお、MW WP Formで確認画面を挟む構成の場合は、確認画面側でもファイル名が表示されるよう、別途調整が必要になることがあります。

CSS

最後に、CSSで見た目を整えます。標準のinput[type=file]を非表示にし、labelをボタン風にデザインするのがポイントです。

.imgattached {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 30px 0;
    position: relative;
}

.imgattached input[type=file] {
    display: none !important;
}

.imgattached label {
    border: 1px solid #999999;
    box-shadow: 4px 4px 0px #cccccc;
    border-radius: 8px;
    padding: 8px 66px;
    cursor: pointer;
    text-align: center;
    background-image: url(../images/contact/icon-camera.svg), url(../images/contact/icon-plus.svg);
    background-repeat: no-repeat;
    background-position: left 20px center, right 20px center;
    background-size: 29px auto, 12px auto;
}

.imgattached label .mwform-file-delete {
    display: none;
}

.imgattached__status {
    color: #999999;
}

.imgattached__delete {
    background: url(../images/contact/btn-delete.svg) no-repeat center/cover;
    position: absolute;
    right: 0;
    display: block;
    width: 74px;
    height: 42px;
    display: none;
    cursor: pointer;
}

ポイントは、標準のファイル選択ボタン（input[type=file]）をdisplay: noneで隠し、代わりにlabelをクリックさせている点です。labelとファイル入力が紐づいているため、labelをクリックすればファイル選択ダイアログが開きます。キーボード操作でもボタンにフォーカスでき、アクセシビリティ面でも自然な作りになります。カメラアイコン・プラスマーク・削除ボタンは背景画像で表現しています。

まとめ

MW WP Formのファイル添付ボタンは、HTMLの構造を整え、JSで挙動を、CSSで見た目を調整することで、サイトのデザインに合わせておしゃれに仕上げられます。標準のinputを隠してlabelをデザインする手法は、MW WP Formに限らず、ファイル入力全般のカスタマイズに応用できます。

なお、MW WP Formは現在、開発・サポートが終了しています。既存サイトの保守では引き続き役立ちますが、新規構築ではContact Form 7などほかのフォームプラグインも検討するとよいでしょう。フォーム部分も、サイトデザインに合わせて丁寧に仕上げていきたいですね。