menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

MW WP Form ワードプレス メールフォーム プラグイン

  • Labs

WordPress

こんにちは(・∀・)

当サイトも実は密かにワードプレス化を進めている今日この頃です。

先日、コンタクトページをワードプレスの固定ページに置き換えようと現在使っているPHPのメールフォームの移植を試みたのですが上手くいかず...

一から作り直す時間も無かったため何か良さそうな物は無いものかと探していたらMW WP Formというプラグインを発見。設置も簡単そうなので早速導入しようとしたのですが、すごくどうでもいい所で軽くはまってしまったのでそのシェアも兼ねてのご紹介です。

MW WP Form ワードプレス メールフォーム プラグイン

MW WP Formは次のリンク先からダウンロードしてください。

MW WP Form

設置に関しては次のリンク先がわかりやすくておススメです。

確認画面付きメールフォームプラグイン「MW WP form」の設定
MW WP Form|確認画面付きメールフォームプラグインの設定テンプレート!

上記サイトで詳しく解説されてますが、MW WP Form導入手順をここでも軽くおさらい。

MW WP Formからプラグインをダウンロードしてインストール、有効化します。

MW WP Formの設定画面から新規追加してフォームを編集画面へ。

タイトル

タイトルには、お問い合せ、コンタクトフォーム等、お好きなタイトルを入力。

mail form

本文

本文には次のコードを入力します。

mail form


<div class="mail_form">
<table>
<tbody>
<tr>
<td>お名前</td>
<td>[mwform_text name="お名前"]</td>
</tr>
<tr>
<td>お電話番号</td>
<td>[mwform_text name="お電話番号"]</td>
</tr>
<tr>
<td>郵便番号</td>
<td>[mwform_text name="郵便番号"]</td>
</tr>
<tr>
<td>都道府県</td>
<td>[mwform_select name="都道府県" children="-----,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県"]</td>
</tr>
<tr>
<td>ご住所</td>
<td>[mwform_text name="ご住所"]</td>
</tr>
<tr>
<td>メールアドレス</td>
<td>[mwform_text name="メールアドレス" size="24" maxlength="60"]</td>
</td>
</tr>
<tr>
<td>お問い合わせ内容</td>
<td>[mwform_textarea name="お問い合わせ内容"]</td>
</tr>
</tbody>
</table>
[mwform_submitButton preview_value="確認画面へ" submit_value="送信する"]
</div>

フォーム内容の変更はご自由に。コードを追加する場合は公式サイトを参考にしてください。

完了画面メッセージ

完了画面メッセージは、お問い合せありがとうございました。や、お問い合わせメールは正常に送信されました。等のメッセージを入力。

mail form

URL設定

URL設定では、入力画面URL、確認画面URL、完了画面URL、エラー画面URLの設定をします。

mail form

特に必要が無ければ、入力画面URLだけ設定。更にここで設定したURLの固定ページを作って、画面右上にあるフォーム識別子をそれぞれの固定ページの本文に貼り付けます。

mail form

mail form

バリデーションルール

バリデーションルールでは入力必須項目等細かい設定をします。バリデーションルールを追加をクリック。

mail form

ここではお名前とメールアドレスとお問い合せ内容を必須項目に、メールアドレスをメールアドレス形式に指定。

mail form

自動返信メール設定

自動返信メール設定はメールの自動返信をしたい場合に入力。要らない場合は空欄でOK。

mail form

管理者宛メール設定

そしていよいよそのはまった所です。

フォームの編集ページの右側下の方にある、管理者宛メール設定。

上記の導入紹介サイトさんでも、ちゃんとそこの解説はされておりましたorz

次の画像にもある通り、
未入力の場合は○○○○@○○○○.comの記載があったため、この欄はスルーでいいと思い込んでいましたが、スルーしていいのはメールアドレスだけで(当然入力してもOK)、その他の欄は全て入力しないとメール送信されませんでした。もし同様にはまっている方いらっしゃいましたら、次の画像のように入力して試してみてください。

mail form

ちなみに次の画像の本文には{お名前}、{メールアドレス}、{お問い合せ内容}の3つだけですが、ご自分で設定しているフォームと同じ分だけ設定しないと内容を受け取り損ねますのでご注意ください。
{お名前}
{お電話番号}
{郵便番号}
{都道府県}
{ご住所}
{メールアドレス}
{お問い合せ内容}
等々。

mail form


自動返信メール設定は送信したい場合は同じ様に入力、送信しなくてもいい場合は空欄でもOKです。

  • カテゴリー:Labs