MW WP Formの使い方【確認画面や自作フォームへの埋め込みが簡単】

今回はWordPressでお問い合わせフォームが作れる「MW WP Form」の使い方を解説します。

WordPressでお問い合わせフォームを作るには、以下2つのプラグインがメジャーです。

WordPressでフォームと言えば

Contact Form 7（手軽にフォーム設置）
MW WP Form（ガッツリコーポレートサイト向け）

Web制作の実案件では「確認画面」「送信完了画面(サンクスページ)」の実装が求められることも多く、そのときは基本的に「MW WP Form」を使用します。

今回の記事ではWeb制作などで、「デザインカンプからオリジナルデザインのフォームをコーディング」し、MW WP Formを適用させる方法に特化した内容をお伝えします。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

MW WP Form新規の採用は非推奨
自作フォーム作成の注意点！！
- ラジオボタンとチェックボックスがあったら要注意
- 今回使用するフォームの雛形HTML
MW WP Formの使い方
補足：エラーが発生しました。後ほどもう一度お試しください。と出た場合
- サーバーに問題があるかCheck & Log Emailで確認
MW WP Formのまとめ

MW WP Form新規の採用は非推奨

この記事を書いた後ですが、MW WP Formは新規の開発がストップしましたので、今からフォームを作成するならContact Form 7がベストです。

確認画面も送信完了画面もプラグイン無しでJSで実装できるので、ほとんどどんなフォームでもいけます（ファイル添付とか長文もOK）

Contact Form 7での確認画面とサンクスページ(送信完了)をプラグイン無しで実装する【JavaScript】

自作フォーム作成の注意点！！

ラジオボタンとチェックボックスがあったら要注意

まずMW WP Formの設置の前に、デザインカンプからフォームのコーディングを行っていきます。

その際に注意する点はこちら。

ラジオボタンとチェックボックスは、MW WP Formが出力する形でコーディングしておく
送信、確認、戻るボタンは最初から用意する
formタグにclassを当てない

自分で書いた静的フォームの入力部分をこの後MW WP Formのショートコードに置き換えていきます。

その際、inputはなんとでもなるんですが、ラジオボタンとチェックボックスはMW WP Formが出力するHTMLが複雑なので、最初からそれ前提で構築しておいたほうが楽です。

MW WP Formの肝はラジオボタンとチェックボックスです。
HTMLを出力するWordPressプラグイン全般に言えますが、WP化前にプラグインが出力するHTMLを見越して静的コーディングをしてスタイリングしておくのがスマートと言えます。https://t.co/NS2C6Ovq86 pic.twitter.com/6Cti7CWlOf
— しょーご@しょーごログ運営 (@samuraibrass) August 31, 2023

ラジオボタンは以下のコードで実装しておきましょう。

<!-- //MW WP form出力部分 -->
      <span class="mwform-radio-field horizontal-item">
        <label >
          <input type="radio" name="radio" value="radio1" />
          <span class="mwform-radio-field-text">radio1</span>
        </label>
      </span>
      <span class="mwform-radio-field horizontal-item">
        <label >
          <input type="radio" name="radio" value="radio2" />
          <span class="mwform-radio-field-text">radio2</span>
        </label>
      </span>
      <span class="mwform-radio-field horizontal-item">
        <label >
          <input type="radio" name="radio" value="radio3" />
          <span class="mwform-radio-field-text">radio3</span>
        </label>
      </span>

チェックボックスは以下のコードで実装。

<!-- //MW WP form出力部分 -->
      <span class="mwform-checkbox-field horizontal-item">
        <label >
          <input type="checkbox" name="checkbox[data][]" value="checkbox1" />
          <span class="mwform-checkbox-field-text">checkbox1</span>
        </label>
      </span>
      <span class="mwform-checkbox-field horizontal-item">
        <label >
          <input type="checkbox" name="checkbox[data][]" value="checkbox2" />
          <span class="mwform-checkbox-field-text">checkbox2</span>
        </label>
      </span>
      <span class="mwform-checkbox-field horizontal-item">
        <label >
          <input type="checkbox" name="checkbox[data][]" value="checkbox3" />
          <span class="mwform-checkbox-field-text">checkbox3</span>
        </label>
      </span>

戻る、確認、送信ボタン(最初から書いておく)

<button type="submit" name="submitBack" value="back" class="button02">入力画面へ戻る</button>
<button type="submit" name="submitConfirm" value="confirm" class="button01">確認画面へ</button>
<button type="submit" name="submit" value="send" class="button01">送信</button>

MW WP Formを設置すると自動で以下のformタグを設置します。

<form method=”post” action=”” enctype=”multipart/form-data” siq_id=”autopick_xxxx”>

なので、formタグにCSSを当てるより、他のタグにCSSは当てたほうがいいかと思います。

今回使用するフォームの雛形HTML

今回使用するフォームはこんな感じ。

<div class="Form">
    <!-- 会社名input -->
    <div class="Form-Item">
      <p class="Form-Item-Label">
        <span class="Form-Item-Label-Required">必須</span>会社名
      </p>
    <!-- //MW WP form出力部分 -->
      <input type="text" placeholder="例）株式会社令和">
    </div>
    <!-- 名前input -->
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>氏名</p>
      <!-- //MW WP form出力部分 -->
      <input type="text" placeholder="例）山田太郎">
    </div>
    <!-- 電話番号input -->
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
      <!-- //MW WP form出力部分 -->
      <input type="tel" placeholder="例）000-0000-0000">
    </div>
    <!-- メールアドレスinput -->
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
      <!-- //MW WP form出力部分 -->
      <input type="email" placeholder="例）example@gmail.com">
    </div>
    <!-- ラジオボタン -->
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>ラジオボタン</p>
      
    <!-- //MW WP form出力部分 -->
      <span class="mwform-radio-field horizontal-item">
        <label >
          <input type="radio" name="radio" value="radio1" />
          <span class="mwform-radio-field-text">radio1</span>
        </label>
      </span>
      <span class="mwform-radio-field horizontal-item">
        <label >
          <input type="radio" name="radio" value="radio2" />
          <span class="mwform-radio-field-text">radio2</span>
        </label>
      </span>
      <span class="mwform-radio-field horizontal-item">
        <label >
          <input type="radio" name="radio" value="radio3" />
          <span class="mwform-radio-field-text">radio3</span>
        </label>
      </span> 
    </div>
    <!-- チェックボックス -->
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>チェックボックス</p>
    <!-- //MW WP form出力部分 -->
      <span class="mwform-checkbox-field horizontal-item">
        <label >
          <input type="checkbox" name="checkbox[data][]" value="checkbox1" />
          <span class="mwform-checkbox-field-text">checkbox1</span>
        </label>
      </span>
      <span class="mwform-checkbox-field horizontal-item">
        <label >
          <input type="checkbox" name="checkbox[data][]" value="checkbox2" />
          <span class="mwform-checkbox-field-text">checkbox2</span>
        </label>
      </span>
      <span class="mwform-checkbox-field horizontal-item">
        <label >
          <input type="checkbox" name="checkbox[data][]" value="checkbox3" />
          <span class="mwform-checkbox-field-text">checkbox3</span>
        </label>
      </span>
    </div>
    <div class="Form-Item">
      <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
      <textarea class="Form-Item-Textarea"></textarea>
    </div>
    <div class="button-wrap">
      <button type="submit" name="submitBack" value="back" class="button02">入力画面へ戻る</button>
      <button type="submit" name="submitConfirm" value="confirm" class="button01">確認画面へ</button>
      <button type="submit" name="submit" value="send" class="button01">送信</button>
    </div>
  </div>

HTML,CSSのベースの雛形はこちらから借りました。

【コピペ】超絶シンプルな！お問い合わせフォームのHTML、CSSサンプルコード
https://yuyauver98.me/contactform-coding-capok/

しょーご

ここまででHTML,CSSでのフォーム構築は終わりました！

MW WP Formの使い方

手順❶MW WP FormをWordPressサイトで表示させる

まずはプラグインをダウンロードします。「MW WP Form」で検索してダウンロードしましょう。

その後、「MW WP Form→新規追加」

タイトルを入力し、テキストモードにした上で、先程作成したHTMLコードを貼り付けて公開してください。

CSSはCSSファイルで書いているものとします。

その後、MW WP Formのショートコードをコピーしてください。

できたら固定ページでお問い合わせページを作成していきます。

「固定ページ→新規追加」

その後、ショートコードを実行させるため「ブロックを追加→ショートコード」を選択。

先程コピーしたショートコードをペーストします。

一旦下書きした上で、パーマリンクをcontactにしておきます。この命名はMW WP Formでの決まり事です。

できたら公開して、https://xxxxxxxx.com/contact/とお問い合わせページにアクセスしてみましょう。

デザインが再現できていたらOKです。

補足：テンプレートファイルにショートコードを書く場合

管理画面の固定ページではなく、テンプレートファイルに書く場合はショートコードは以下のように実行できます。

<?php echo do_shortcode( '[mwform_formkey key="12"]' ); ?>

補足：もしp,brタグがフォーム内に自動で入る場合

以下のコードをfunctions.phpに貼り付けてください。

function mvwpform_autop_filter() {
  if (class_exists('MW_WP_Form_Admin')) {
    $mw_wp_form_admin = new MW_WP_Form_Admin();
    $forms = $mw_wp_form_admin->get_forms();
    foreach ($forms as $form) {
      add_filter('mwform_content_wpautop_mw-wp-form-' . $form->ID, '__return_false');
    }
  }
}
mvwpform_autop_filter();

手順❷MW WP Formのショートコードでフォームを置き換える

input[type=”text”]から置き換え

inputやラジオボタンやチェックボックスの部分をショートコードに置き換えていきます。

まずは以下のinput[type=”text”]を試しに置き換えていきます。

まず、MW WP Formの設定ページに戻って置き換えたいinputの直前に一行空行を入れて下さい。

そしたら「選択してください→テキスト→フォームタグを追加」の順にクリック。

その次に以下のフォームを埋めていき、「Insert」クリックでショートコードが挿入されます。

ご自身のフォームタグによって入力位置と内容は変わります。

元のinputタグにはnameが無かったですが、フォーム送信でnameは必須なので、このタイミングで命名しました。

name	name属性（＊必須）
id	idを振っている場合は入力
class	classを振っている場合は入力
size	size属性
maxlength	文字入力数の上限
初期値	チェックボックスやラジオボタンでのデフォルトの選択状態
placeholder	入力欄の薄文字の入力補助テキスト
エラー表示	入力ミスの指摘をするかしないか

「Insert」したら、ショートコードが埋め込まれていることを確認します。

そしたらinputはもういらないので、消してください。

しょーご

これを入力欄一つ一つに適用していく感じです！！

電話番号の置き換え

電話番号は「テキスト」で入力するのをおすすめします。

電話番号で入力すると、入力が三箇所に別れたりplaceholderが入れられなかったり普通に不便なためです。

ラジオボタンの置き換え

次にラジオボタンの置き換えを見ていきましょう。

MW WP Formのラジオボタンは以下のコードが出力されるので、事前にそのコードで実装している場合は楽です。

置き換えるHTMLタグの上に一行空行を開けた上で、「ラジオボタン→フォームタグを追加」をクリック。

その後、該当箇所を埋めていきます。今回はname属性をradioにしていたので、同じくradioにします。

「Insert」できたら、ラジオボタンショートコード以外の該当HTMLタグは用済みなので、削除します。

チェックボックスの置き換え

チェックボックス部分は以下のコードです。MW WP Formが出力するコードを前提にコーディングしているので、そのままショートコードで置き換えられます。

まずは「チェックボックス→フォームタグを追加」

その後、nameと選択肢を入力し、「Insert」をクリック。

ショートコードが挿入されたら、チェックボックスのHTMLコードは用済みなので、削除します。

確認・戻る・送信ボタンを置き換え

最後に、確認・戻る・送信ボタンをショートコードで置き換えます。

注意点は、ボタン項目が「button」と「input」の２つあることです。
しかし、使うのは赤枠の「button」の方でOKです。

これにて置き換えが完了しました！

しょーご

表示が問題ないことを確認してください。ボタンも確認ボタンしか出ていない状態ですね！

手順❸自動返信メールおよび管理者宛メールの設定する

自動返信メール設定

お客さんがフォーム送信した後に、自動返信が無いと自分の送信が正常に行われたか分からず不安になります。

そこで自動返信機能を実装するわけです。以下の項目を入力すれば大丈夫です。

件名
送信者
本文
自動返信メール

入力した本文は以下。

{user_name} 様

この度はしょーごログへお問い合わせいただきまして誠にありがとうございます。

後日担当者より折り返しご連絡させていただきます。

ご入力内容
---------------------------------------------

【お名前】 
{user_name} 様

【会社名】
{company_name}

【メールアドレス】
{email}

【電話番号】
{tel_number}

【お問い合わせ内容】
{textarea}

============================
しょーごログ

HP: https://shogo-log.com
============================

文章中の{user_name}などの意味ですが、name属性の値と同じものを設定することで、お客さんが入力した内容をそのまま反映させることができます。

自動返信メールのメールアドレスも、nameと同じ値を入力してください。

しょーご

私の場合はemailでした。

以上で自動返信メール設定が完了しました。

管理者宛メール設定

管理者宛メール設定は以下4つが必須項目です。

送信先
件名
送信者
本文

本文は以下にしました。

お問い合わせがありました。
 
お問い合わせ内容
---------------------------------------------

 
【お名前】 
{user_name} 様
 
【会社名】
{company_name}
 
【メールアドレス】
{email}
 
【電話番号】
{tel_number}


【お問い合わせ内容】
{textarea}
 
============================

以上で管理者宛メールの設定は完了です！