MWWP Fromの設定

MWWP From
wordPressではContactForm7(https://sleep-sheep.info//?p=2454)がとても有名だけれど、このプラグインには確認ページがない。
公式プラグインで確認画面を後付するものもあるけれど、最低限のデザインしかしておらず、好みではありませんでした。
 
そこで多分WPメールプラグイン国内2位のMWWP Fromを紹介します。
 
検索&インストール&有効化をするとMWWP From wordPressではContactForm7(https://sleep-sheep.info//?p=2454)がとても有名だけれど、このプラグインには確認ページがない。 公式プラグインで確認画面を後付するものもあるけれど、最低限のデザインしかしておらず、好みではありませんでした。  そこで多分WPメールプラグイン国内2位のMWWP Fromを紹介します。  検索&インストール&有効化をすると
メニューにMWWP Fromが出現するので、新規追加を選択します。

設置開始

例として
  • 名前
  • メールアドレス
  • メールアドレス確認用
  • 電話番号
の入力欄を設置したいと思います。
 
まずドロップダウンメニューの「選択してください」をクリックするとたくさんメニューが出てくるので、希望のものを選択します。
 
「名前」部分は「テキスト」
「メール」は「Emailフィールド」(今のところ一つだけで、確認用はいりません)
「電話番号」は「電話番号」を選択します。MWWP

するとフォームが出現するので「name」にわかりやすい任意の英数字を入れていきましょう。
  • id,classはcssで利用します。
  • sizeはフォーム欄の長さ
  • maxlengthは最大文字数
  • 初期値は入力前に入れる文字
  • placheholderは入力を促すようにフォームに薄く表示される文字
  • MWWP
電話番号入力の際は、はじめから「半角変数に変換」モードになっているので、そのままでOK。
今のところこんなコードが出力されています。
 
[mwform_text name=”name” size=”60″ placeholder=”お名前”]
[mwform_email name=”mail” class=”mail” size=”60″ placeholder=”メールアドレス”]
[mwform_email name=”mail_conform” size=”60″ placeholder=”メールアドレス(確認)”]
[mwform_tel name=”tell” conv_half_alphanumeric=”false” placeholder=”電話番号”]
[mwform_textarea name=“content”  cols=”30″ rows=”5″ placeholder=”お問い合わせ内容”]

ボタンの設置

MWWP送信ボタンを設置するのですが「送信ボタン」を選択せず「確認・送信ボタン」を選びましょう。


バリデーション

下へスクロールすると「バリデーションルール」欄が出現します。ここで必須項目などの設定を行います。MWWP

「バリデーションを適用する項目」に上で設置したnameを入れます。
ここでは名前を必須項目にする例を紹介します。
MWWP
これだけです。最小文字数も決めようかと思いましたが、一文字の人もいるかもしれないので、そのままです。

メールのバリデーションルール

MWWP

MWWP

一致する項目を互い違いにして設置します。


 

電話番号のバリデーションルール

MWWP

自動返信メール、管理者宛メールもそれぞれ設定しましょう。MWWP

一番下の「自動返信メールに使用する項目のキーを入力してください。{ }は不要です。」とある箇所は、メールのname属性「mail」を入れましょう。以下例文です。

 

 

こいつをBootStrapで巻いて上げれば一丁上がり。スタティックじゃない?知らん知らん!


 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください