MW WP Form

プラグインサイト：https://plugins.2inc.org/mw-wp-form/

出力タグの上書き方法

input type=”text”の場合

1. /plugins/mw-wp-form/templates/form-fields/text.phpの内容をコピー
2. /themes/使用中テーマ/mw-wp-form/form-fields/text.phpへペースト（フォルダ・ファイルは新しく作成する）
3. 内容を編集

例えばテキストフィールドの内容はこのようになっています。

divでinputを囲んだりして、オリジナルのcssをあてることもできます。

参考：MW WP Form v4 からテーマにファイルをおくだけで入力フィールドを上書きできるようになります | MW WP Form

こんな構造にできます

input type=”file”の実装例

デフォルトではこのようにファイル選択が表示されます。

やりたいこと

• ファイル選択ボタンにデザインをあてる
• ファイル名の即時表示
• ファイルを選択したときの選択ボタンの無効化
• 選択ファイルの削除ボタンを設置

参考：https://techmemo.biz/css/input-file-name-clear/

デザインに合わせてHTML構造を変えてみます。

↓

MW WP Formでこれを実装する際に注意が必要で、/plugins/mw-wp-form/js/form.jsでもクリックや変更の処理をおこなっているので、jsの記述はこちらのファイルに移す必要があります。

radioボタンの実装例

やりたいこと

• クリック範囲を大きくしたスイッチ風のデザイン

デザインに合わせてHTML構造を変えてみます。

↓

<label>の中にあった<input>を外に出すように構造変更しました。

変更時の注意

先ほども触れましたが、jsの記述についてはプラグインのjsとの兼ね合いがあるので、プラグインに合わせるようにして書いていくことをおすすめします。
また、確認画面を用意する場合は「戻る」ボタンでのデータ保持が必要なため、フォームの値をjsで書き換えるような処理だと、戻ったときにリセットされてしまいます。（確認画面をなくすか、デザインの許容範囲を広げてみてください。）

 

さいごに

MW WP Formは実装してみた記事が豊富にあるので思ったことを実現しやすいプラグインだと思いますが、HTML構造も変更できるとカスタマイズの幅がさらに広がるんではないでしょうか。