ゆろぐ

ゆるく、ろぐる。独学フロントエンドエンジニアの技術ブログ

ゆろぐ

ゆるく、ろぐる。独学フロントエンドエンジニアの技術ブログ

【WordPress】コピペOK！MW WP FORMの返信メール雛形

作者: LCW_buffaro投稿日: カテゴリー: Wordpressタグ: , , , 【WordPress】コピペOK！MW WP FORMの返信メール雛形 へのコメントはまだありません

気力が続く限り毎日投稿します。（例の如く明日には連続記録が終わるかもしれない。二日目）

さて、今日の話題はメールフォームの雛形について。

WordPressでサイトを作るとき、ほぼ必ずといって良いほど設置するのがお問い合わせフォーム。見た目のフォームは作成しても、自動返信メールの設定を忘れてしまうこともしばしばあるのでは？

ということで今回は「MW WP FORM」を使った場合のメール雛形をご紹介します。

※「MW WP FORM」の開発が終わっているので注意

「MW WP FORM」について、開発者の「キタジマタカシ」さんが開発を終了すると公表していて、現在は既存ユーザーのためのメンテナンスを「株式会社Webの相談所」さんが引き継いでいるとのことです。

今もプラグインの検索で探すことができ、新規で追加することもできますが開発が終了している以上、新規案件で使うことは避け、できるだけ既存サイトのプラグインも別のものに乗り換えるようにしましょう。

コピペで使える雛形をご紹介

最近ではChat GPTなどのAIで簡単に雛形も作れるとは思いますが、必要な箇所だけ書き換える程度のコピペで使える雛形を用意しておくと後々楽ですよね。

ここでは簡単に使えるコピペOKのソースを置いておくので、使いたい人はご自由にお使いください！
（お問い合わせの項目などは環境に合わせて変更してくださいね）

フォーム用のソースコード（HTML/css）

雛形として用意する場合、最低限必要なものだけにして用意しておくか、最大限の要素を入れておいて使用するときに削除するか・・・。

個人的には最小限にしておいた方がカスタマイズするときにCSSなどがごちゃごちゃしないので、今回も最低限の要素で雛形を作成しておきます。

HTML
<dl class="p-contact-list">
  <dt class="p-contact-list__title">
    お名前<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [mwform_text name="your-name" size="60" placeholder="山田　太郎"]
  </dd>
  <dt class="p-contact-list__title">
    ふりがな<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [mwform_text name="your-furigana" size="60" placeholder="やまだ　たろう"]
  </dd>
  <dt class="p-contact-list__title">
    メールアドレス
  </dt>
  <dd class="p-contact-list__data">
    [mwform_email name="your-email" size="60" placeholder="xxx@xxx.com"]
  </dd>
  <dt class="p-contact-list__title">
    お電話番号<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [mwform_tel name="your-tel"]
  </dd>
  <dt class="p-contact-list__title">
    お問い合わせ内容<span class="p-contact-list__required">※</span>
  </dt>
  <dd class="p-contact-list__data">
    [mwform_textarea name="contact-text" cols="50" rows="5" placeholder="お問い合わせ内容を入力してください"]
  </dd>
</dl>

[mwform_submitButton name="confirm-submit" class="c-submit-btn" confirm_value="確認画面へ" submit_value="送信する"]
HTML

↑

このコードをMW WP FORMの「テキストエディタ」にコピペしてください。

「ビジュアルエディタ」でも大丈夫ですが、コピペする際に余計なタグなどが入ってしまうかもしれないので、テキストエディタへのコピペ推奨。

オリジナルデザインなどの制作で、CSSはご自分でカスタマイズできる方はclassを変更したりしながらcssの調整をしてください。

cssまでコピペしたい方は、下記のcode penのcssをコピペしてください。

ペースト先はcssが反映される部分であればどこでも大丈夫です。

もしテーマファイルを修正するのが難しい方の場合、MW WP FORMのショートコードを埋め込んだページに、ブロックエディタの「カスタムHTML」を追加して、<style></style>タグで囲んでcssを記述すれば動きます。

error

テーマのCSSに注意

使用しているテーマによってはcssのクラスの競合や、リセットcssによる初期スタイルの違いなどでデザインが崩れることがあります。
それぞれの環境に合わせてcssは調整して使ってください。

※自動で挿入される<p><br>を削除

WordPressでは入力した文章の改行などを元に、自動で<p>タグや<br>タグが入るような機能がついています。

MW WP FORMで作成したフォームにも自動で入るため、純粋なHTMLで書いたとしても実際に表示される時には余分な<p>タグが入ってしまいデザインが崩れてしまうことがあります。

そんな時はテーマのfunctions.phpに下記のコードを追加して<p>タグなどの余分なコードが入らないようにしましょう。

PHP
add_filter('mwform_content_wpautop_mw-wp-form-xx','__return_false');
functions.php

mwform_content_wpautop_mw-wp-form-xxのxxの部分はMW WP FORMのショートコードの「key=””」の部分の数字を記入します。

例えばというショートコードで実行するフォームの場合はadd_filter('mwform_content_wpautop_mw-wp-form-8','__return_false');となります。

もしサイト全体でMW WP FORMのフォーム全てで<p>タグなどを削除したい場合は、ループ処理を入れて下記のような記述にするとまとめて設定することもできます。

PHP
function mvwpform_autop_remove_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_remove_filter();
functions.php

ただ、一つのサイトで複数のフォームを設置することはあまりないのと、多くても2,3個のフォームだと思うので、個別に設定する方が個人的には推奨できるかな〜と。

※<p><br>を削除しても表示が崩れるときは

今回ご紹介している雛形の場合、グリッドを使って表示しているので余分なものが出力されると表示が大きく崩れる可能性があります。

もし<p>や<br>が出力されていないのに表示が崩れる場合、余分なスペースキー（半角・全角）が出力されている可能性があります。

その場合、HTMLのタグ同士の間に余分なスペースが入っていないか確認してください。

特に半角スペースの場合、偶数個の連続であれば問題なくても、奇数個の連続の場合には表示崩れが起きることがあります。一度スペースを全部削除してみるなど試してみてください。

お問い合わせ完了画面のメッセージ

MW WP FORMでは完了画面に表示するメッセージも入力できます。

HTML
お問い合わせいただき、誠にありがとうございます。
送信が完了しました。内容を確認次第、担当者よりご連絡いたします。
今しばらくお待ちくださいますようお願い申し上げます。

※万が一、数日経っても返信がない場合は、恐れ入りますがお電話もしくはメールにてご連絡ください。
HTML

簡単なメッセージであれば上記のものをコピペでOK。

できれば「〇日以内」に返信する、もし返信がなかったら「info@xxx.com」までご連絡など、連絡先も書いておくといいと思います。

バリデーション等の設定

入力画面URLや確認画面URLは、ページを遷移しない場合には特に設定は必要ありません。

もしアクセス解析等の関係からページ遷移が必要な場合は適切設定しましょう。

バリデーション設定では、「必須項目」等の設定ができます。お名前やメールアドレスなど、担当者が返信するために必ず必要になる項目は必須項目にしておきましょう。

また、お客様の入力ミスなどを防ぐために、入力できる文字列の制限などを行うこともできます。

自動返信メール設定（お客様への返信メール）

件名：
【○○会社】お問い合わせありがとうございます

送信者：
（サイト名・会社名など）

Reply-to（メールアドレス）：
（会社のメールアドレス、info@xxxx.comなど）

本文：

HTML
{your-name}様

この度は、弊社へのお問い合わせをいただき、誠にありがとうございます。
以下の内容でお問い合わせを承りました。

【お問い合わせ内容】
お名前： {your-name}（{your-furigana}）
メールアドレス： {your-email}
お電話番号： {your-tel}
お問い合わせ内容： {your-contact}

内容を確認の上、担当者より改めてご連絡させていただきます。
通常、2～3営業日以内にご返信を差し上げておりますが、内容によってはお時間をいただく場合がございます。予めご了承ください。

万が一、数日経っても返信がない場合は、恐れ入りますが再度ご連絡いただけますと幸いです。

今後ともどうぞよろしくお願い申し上げます。
HTML

自動返信メール：
your-email

送信元（E-mailアドレス）：
（任意なので未入力でOK）

管理者宛メール設定

送信先（E-mailアドレス）：
（メールを受け取りたいアドレスを設定、初期設定はWordpressの管理者アドレス）

CC（E-mailアドレス）：
（任意設定）

BCC（E-mailアドレス）：
（任意設定）

件名：
【お問い合わせ通知】{your-name}様よりお問い合わせがありました

送信者：
（サイト名・会社名）

Reply-to（メールアドレス）：
（任意・{your-email}を入れておくとそのままお客様に返信できる）

本文：

HTML
管理者様

以下のお客様よりお問い合わせがありましたのでご確認ください。

【お問い合わせ内容】

お名前： {your-name}（{your-furigana}）
メールアドレス： {your-email}
お電話番号： {your-tel}
お問い合わせ内容：
{your-contact}

内容をご確認の上、速やかに対応をお願いいたします。
HTML

まとめ

今回はMW WP FORMを使う時の簡単な雛形と、設定方法について簡単にご紹介しました。

このプラグインは現在新規で使用を開始することは推奨されていないため、できるだけ別のプラグイン（Contact Form7など）を使うようにしましょう。

コーダーはどうしても作業単価が安くなりがちなので、こういった雛形を自分なりに作成しておき、各種案件で使いまわせるようにしておくことが「時間単価UP」のためにできること。

営業力を身につけて単価UPすることも大切ですが、作業時間を少なくするために下準備をしておくことで、営業をする時間も作れるようになるのでテンプレート作りは常に意識しておくといいですね。

【WordPress】コピペOK！MW WP FORMの返信メール雛形

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

トップへ戻る