9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【Labs】MW WP Form ワードプレス メールフォーム プラグイン
こんにちは(・∀・)
当サイトも実は密かにワードプレス化を進めている今日この頃です。
先日、コンタクトページをワードプレスの固定ページに置き換えようと現在使っている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の設定画面から新規追加してフォームを編集画面へ。
タイトル
タイトルには、お問い合せ、コンタクトフォーム等、お好きなタイトルを入力。
本文
本文には次のコードを入力します。
<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>
フォーム内容の変更はご自由に。コードを追加する場合は公式サイトを参考にしてください。
完了画面メッセージ
完了画面メッセージは、お問い合せありがとうございました。や、お問い合わせメールは正常に送信されました。等のメッセージを入力。
URL設定
URL設定では、入力画面URL、確認画面URL、完了画面URL、エラー画面URLの設定をします。
特に必要が無ければ、入力画面URLだけ設定。更にここで設定したURLの固定ページを作って、画面右上にあるフォーム識別子をそれぞれの固定ページの本文に貼り付けます。
バリデーションルール
バリデーションルールでは入力必須項目等細かい設定をします。バリデーションルールを追加をクリック。
ここではお名前とメールアドレスとお問い合せ内容を必須項目に、メールアドレスをメールアドレス形式に指定。
自動返信メール設定
自動返信メール設定はメールの自動返信をしたい場合に入力。要らない場合は空欄でOK。
管理者宛メール設定
そしていよいよそのはまった所です。
フォームの編集ページの右側下の方にある、管理者宛メール設定。
上記の導入紹介サイトさんでも、ちゃんとそこの解説はされておりましたorz
次の画像にもある通り、
未入力の場合は○○○○@○○○○.comの記載があったため、この欄はスルーでいいと思い込んでいましたが、スルーしていいのはメールアドレスだけで(当然入力してもOK)、その他の欄は全て入力しないとメール送信されませんでした。もし同様にはまっている方いらっしゃいましたら、次の画像のように入力して試してみてください。
ちなみに次の画像の本文には{お名前}、{メールアドレス}、{お問い合せ内容}の3つだけですが、ご自分で設定しているフォームと同じ分だけ設定しないと内容を受け取り損ねますのでご注意ください。
{お名前}
{お電話番号}
{郵便番号}
{都道府県}
{ご住所}
{メールアドレス}
{お問い合せ内容}
等々。
自動返信メール設定は送信したい場合は同じ様に入力、送信しなくてもいい場合は空欄でもOKです。