ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

フォームカスタマイズに便利!MW WP Formの使い方まとめ【WordPress】

フォームカスタマイズに便利!MW WP Formの使い方まとめ【WordPress】

「WordPressにメールフォームをつくりたい」

「Contact form7だとうまくカスタマイズできない」

「クライアント案件なのでメールフォームに確認画面をつくらないといけない」

悩み

こんな悩みにお答えします。

じつは、MW WP Formを使うことでこれらの悩みを解決することができます。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作しており、その間、ほとんどのWebサイトにMW WP Formを使ったメールフォームを設置しています。

この記事では、以下のことをまとめています。

  • MW WP Formの使い方
  • MW WP Formのカスタマイズ方法
  • MW WP Form以外のメールフォームプラグイン

記事を読み終えると、WordPressに思ったようなメールフォームを設置することができます。

目次
  1. MW WP Formの使い方
    1. 公式サイト
    2. 使い方を紹介しているブログ
    3. よく使うノウハウ
      1. チェックボックス、ラジオボタンのデザインを変える
      2. 郵便番号で住所を自動入力する
      3. セレクトボックスで「選択してください」を空欄とみなす
      4. 遷移元のタイトルやメタデータをフォームに渡す
      5. 確認画面無しで完了画面に遷移する
  2. MW WP Formのカスタマイズ
    1. 初期値を使いまわす
    2. バリデーションルール使いまわす
    3. フォーム内容を使いまわす
  3. MW WP Form以外のメールフォームプラグイン
    1. Contact Form 7
    2. Snow Monkey Forms
  4. まとめ

MW WP Formの使い方

公式サイト

公式サイトのマニュアルです。

公式サイト
MW WP Form マニュアル

うまくいかない場合は、FAQも見てみてください。

HTMLが苦手な人には、MW WP Form Generatorというアドオンもありますが、MW WP Formではなくブロックエディタで使える「Snow Monkey Forms」のほうをおすすめされています。

使い方を紹介しているブログ

MW WP Formの基本的な使い方を紹介しているブログをいくつかまとめます。
どれも詳しくわかりやすく紹介されていますが、それぞれにあうものを参考にしてみてください。

MW WP Formを使った問合せフォームの作り方 | New Standard

事業用WordPressテーマ「New Standard Ver3」テクニカルサポートチームです。現在「テーマの無料体験」実施中! 未体験の方はぜひお試しください。 ホームページにとって問合せフォームは欠かせない要素の一つですね。今回は数あるフォーム系プラグインの中から「MW W…

【WordPress】MW WP Formを使用したお問い合わせフォームの作成|ホームページ制作 大阪 SmileVision

ども、こんにちは!開発部のいろはです。 今回は私が重宝しているWordPressのプラグイン 「MW WP Form」の使い方を解説します 目次 1.MW WP Fromとは? 2.MW WP Fromのダウンロード 3

【画像解説】MW WP Formの使い方を初心者向けに解説|無料で簡単にお問い合わせフォームを作成 | formLab

Wordpressでフォームを作成できるプラグイン「MW WP Form」について解説。問い合わせフォームの作成方法や確認画面のカスタマイズ方法、より便利に使うためのプラグインなど、WordPressにフォームを設置したい方にぴったりの情報をお届けします。

よく使うノウハウ

基本機能ではありませんが、ひと手間加えるだけでユーザビリティがよいフォームにすることができます。

チェックボックス、ラジオボタンのデザインを変える

FontAwesomeと疑似要素を使った方法を紹介していますが、HTML、CSSの知識があればアレンジしてもっとオリジナルのデザインにすることも可能です。

MW WP Formのcheckboxとradioを好みのデザインにカスタマイズ!

checkboxとradioのカスタマイズについて知りたいですか?この記事では、checkboxとradioのカスタマイズをFontAwesome使った方法で解説しています。MW WP Formで出力されるHTMLタグを前提にしています。ぜひご覧ください。

郵便番号で住所を自動入力する

少しJavaScriptとHTMLの知識が必要になりますが、郵便番号を入力するだけで住所を自動で入力するフォームにすることができます。

郵便番号で住所自動入力したい!YubinBango.jsの使い方【JavaScript】

JavaScriptで郵便番号自動入力できるライブラリをさがしていますか?この記事では「AjaxZip3」よりも簡単に使える「YubinBango」の設定方法を解説します。WordPressプラグイン「 MW WP Form 」「Contact Form 7」のデモも作成しました。ぜひご覧ください。

セレクトボックスで「選択してください」を空欄とみなす

セレクトボックスを設置する場合はよくやる設定です。
1番目から選択項目が入っていると選択忘れでも1番目の項目が選択されたことにされてしまうので、1番目に「選択してください」とし、空欄とみなすことで「未選択です」という状況をつくることができます。

MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法(JavaScript 非使用) | フロントエンドエンジニアのblog

WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は

遷移元のタイトルやメタデータをフォームに渡す

商品やサービスを紹介するサイトでどの商品、サービスについて問い合わせたいのかということを、遷移元のページの情報からフォームに反映させることができます。
参考ブログのとおりにすればできますが、PHPの知識もあったほうが応用や失敗したときの対処ができます。

MW WP Formで遷移元のタイトルやメタデータをフォームに渡す方法

WordPressで、商品や物件情報などのページに「この商品へのお問い合わせはこちら」というリンクを設けて、お問い合わせフォームが表示されたら特定のフィールドの初期値として商品名と...

確認画面無しで完了画面に遷移する

MW WP Formは確認画面をデフォルトで設置できるのが魅力ではありますが、入力画面から確認画面を挟まずに完了画面に遷移することも設定だけで可能です。

MW WP Formのカスタマイズ

MW WP Formではさまざまなカスタマイズに対応できるように、フィルターフックアクションフックが用意されています。

同じようなWebサイトを制作する場合、WordPressの管理画面で毎回同じ設定をするのが面倒になってきます。
そんなときにフックを使ってfunctions.phpに設定しておくだけで、管理画面での設定が必要なくなります。

初期値を使いまわす

MW WP Formの初期値を使いまわす【WordPress】

WordPressでメールフォーム作成に便利なプラグイン「MW WP Form」。サイトをいくつも作成し、同じようなメールフォームを作成するときに便利な初期値設定方法をサンプルコードで解説します。ぜひご覧ください。

バリデーションルール使いまわす

MW WP Formのバリデーションルール使いまわす【WordPress】

WordPressのプラグイン「MW WP Form」のカスタマイズ方法を探していますか?同じようなメールフォームを使いまわしするときに便利なバリデーションルール設定方法をサンプルコードで解説します。ぜひご覧ください。

フォーム内容を使いまわす

MW WP Formの初期値を使いまわす【WordPress】

WordPressでメールフォーム作成に便利なプラグイン「MW WP Form」。サイトをいくつも作成し、同じようなメールフォームを作成するときに便利な初期値設定方法をサンプルコードで解説します。ぜひご覧ください。

MW WP Form以外のメールフォームプラグイン

MW WP Formは高機能でカスタマイズしやすいですが、いろいろやりやすい反面、「そこまでできなくていいから簡単に設置できるようにしたい」ということもあります。
そんなときに使えるメールフォームプラグインも紹介します。

Contact Form 7

WordPressでは定番のメールフォームプラグインです。
最低限の機能、設定で設置できるのでカスタマイズが不要な場合はContact Form 7が便利です。

WordPressプラグインページ
Contact Form 7

Snow Monkey Forms

MW WP Formと同じ開発者のWordPressメールフォームプラグインです。
ブロックエディタに対応しており、簡単にメールフォームがつくれるようです。

ただ、いろいろなカスタマイズができるわけではなく「メールフォームを簡単に設置したい」という要望にこたえるもので、「MW WP Form」の代替ではなく、「Contact Form 7」の代替になるものになります。

Snow Monkeyというテーマもあります。

公式サイト
Snow Monkey Forms

まとめ

MW WP Formの使い方、カスタマイズについてまとめました。

個人ブログなどでは必要ないかもしれませんが、コーポレートサイト案件では要望でメールフォームをカスタマイズしないといけないことがよくあります。
そんなときに参考になればと思います。