Web制作実務役立ち

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

MW WP Formの使い方【確認画面や自作フォームへの埋め込みが簡単】
本ページにはプロモーションが含まれています。

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

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

WordPressでフォームと言えば
  1. Contact Form 7(手軽にフォーム設置)
  2. MW WP Form(ガッツリコーポレートサイト向け)

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

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

しょーご

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

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

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

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

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

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

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

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

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

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

<!-- //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の使い方【確認画面や自作フォームへの埋め込みが簡単】

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

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

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

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

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

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

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

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

固定ページ→新規追加

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

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

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

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

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

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

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

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

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

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

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

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

<?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の直前に一行空行を入れて下さい。

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

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

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

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

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

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

MW WP Formの使い方【確認画面や自作フォームへの埋め込みが簡単】
namename属性(*必須)
ididを振っている場合は入力
classclassを振っている場合は入力
sizesize属性
maxlength文字入力数の上限
初期値チェックボックスやラジオボタンでのデフォルトの選択状態
placeholder入力欄の薄文字の入力補助テキスト
エラー表示入力ミスの指摘をするかしないか

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

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

しょーご

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

電話番号の置き換え

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

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

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

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

ラジオボタンの置き換え

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

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

MW WP Form ラジオボタン コード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

しょーご

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

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

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

自動返信メール設定

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

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

  • 件名
  • 送信者
  • 本文
  • 自動返信メール
MW WP Formの使い方【確認画面や自作フォームへの埋め込みが簡単】

入力した本文は以下。

{user_name} 様

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

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

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

【お名前】 
{user_name} 様

【会社名】
{company_name}

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

【電話番号】
{tel_number}

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

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

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

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

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

しょーご

私の場合はemailでした。

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

管理者宛メール設定

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

  • 送信先
  • 件名
  • 送信者
  • 本文
MW WP Formの使い方【確認画面や自作フォームへの埋め込みが簡単】

本文は以下にしました。

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

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


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

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

しょーご

もう少しで終わります、頑張って!!

手順❹入力画面、確認画面、完了画面のURLをそれぞれ設定

お問い合わせの入力画面、確認画面、完了画面のURLをそれぞれ設定します。
今回は、以下のように設定しました。

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

このURLと、この後作成する固定ページのスラッグは合わせる必要があるので、ご注意ください。

手順❺バリデーションを設定(必要であれば)

バリデーションが必要であれば、項目毎に設定します。

例えば「指名(user_name)」を必須項目にするなら、以下のようにします。

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

項目の指定はname属性の値を設定します。

試しに未入力で進もうとするとエラーメッセージが表示されます。

必要であれば、フォームを機能させた後に、随時CSSでカスタマイズします。

手順❻固定ページの入力画面、確認画面、完了画面を用意する

ここではフォームを表示するための固定ページを作成していきます。

先程MW WP Formで指定したスラッグ通りに固定ページを作成します。

この記事の通り作業していれば、既に入力画面URLのcontactは存在しているかと思います。

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

固定ページの親子関係を利用するので、「入力画面URL」 を親「確認画面&完了画面」を子としたページを作成します。

固定ページのパーマリンクは先程MW WP Formで指定したのと同じものを指定します。

この記事の通り作業していれば、既に入力画面URLのcontactは存在しているかと思います。
確認画面ページの設定

確認画面や完了画面の固定ページ作成時に、入力画面ページを親ページに設定します。

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

うまく行けば、固定ページはこのようになっているはずです。

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

その次に、3つのページ全てにMW WP Formのショートコードを貼り付けます。

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

これにて完成しました!最後にリモートサーバー上で動作確認すれば終了です!!

手順❼リモートサーバー環境で動作確認

ローカル環境ではメール送信テストが基本的にできません!!

よって、サーバーにあげてから必ず送信テストを行います。

確認の順序
  1. 入力画面で入力したものが確認画面に反映されている
  2. 送信完了ページに遷移する
  3. 自動返信メールが届く
  4. 管理者宛メールも届く

実案件ではクライアント自身に操作してもらい、送信機能に問題がないことを確認してもらいましょう。フォームはトラブルになりやすい部分です。

補足:エラーが発生しました。後ほどもう一度お試しください。と出た場合

サーバーに問題があるかCheck & Log Emailで確認

Check & Log Emailというプラグインを使ってみて下さい。

まずはログを見れるようにします。

Send test to email」の欄にテストメールとして送信するアドレスを入力し、送信。

メールが届いていて問題なければ、単にプラグイン設定やコードのミスです。

ログでエラーが出ていたら、プラグインではなくそもそものサーバーやメールアドレスの問題になります。

この場合に「WP Mail SMTP by WPForms」を使用すると問題が解决する可能性があります。

しょーご

私も最初メールが届かなかったんですが、SMTPを使用したらメールが無事届きました!

MW WP Formのまとめ

Web制作でよく使用する「MW WP Formの使い方」を徹底解説しました。

今日のまとめです。

MW WP Form設置の手順
  1. ラジオボタンやチェックボックスに気をつけつつ、デザインからコーディング
  2. ショートコードでinputやtextarea,radio,checkboxなどを置き換え
  3. 確認、送信、戻るボタン置き換え
  4. 自動返信と管理者宛メール設定
  5. URL設定と固定ページを準備
  6. リモートサーバーで送信テストを行う

なお今回紹介したプラグイン以外に、静的サイトのフォームで使える「PHP工房」は実はWordPressサイトでも普通に使えます。

切り札として知っておいても良いかと思います。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!