WEBサイトを作るときほとんどの場合、お問い合わせフォームを設置すると思います。
私はよくWordPressのお問い合わせプラグイン、「MW WP Form」にお世話になっていますが、この度担当した案件で、どうしてもショートコードから出力されるHTMLの構造を変更しなければならず、公式ドキュメントから”コアファイルに手を入れずにHTML構造を変更できる方法”を見つけたので紹介したいと思います。
(MW WP Formを使用したことがあり、基本的な使い方がわかる方へ向けた内容になります。)

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構造も変更できるとカスタマイズの幅がさらに広がるんではないでしょうか。

 

TAG OF THIS ARTICLE

ABOUT THE WRITER

NAME. sera

フロントエンドエンジニアのseraです!

フロントエンドエンジニアのseraです!

PICK UP ARTICLES

RANKING

KEYWORD