MWWP From
wordPressではContactForm7(https://sleep-sheep.info//?p=2454)がとても有名だけれど、このプラグインには確認ページがない。
公式プラグインで確認画面を後付するものもあるけれど、最低限のデザインしかしておらず、好みではありませんでした。
そこで多分WPメールプラグイン国内2位のMWWP Fromを紹介します。
検索＆インストール＆有効化をすると
メニューにMWWP Fromが出現するので、新規追加を選択します。
設置開始
例として
- 名前
- メールアドレス
- メールアドレス確認用
- 電話番号
の入力欄を設置したいと思います。
まずドロップダウンメニューの「選択してください」をクリックするとたくさんメニューが出てくるので、希望のものを選択します。
「名前」部分は「テキスト」
「メール」は「Emailフィールド」（今のところ一つだけで、確認用はいりません）
「電話番号」は「電話番号」を選択します。
するとフォームが出現するので「name」にわかりやすい任意の英数字を入れていきましょう。
- id,classはcssで利用します。
- sizeはフォーム欄の長さ
- maxlengthは最大文字数
- 初期値は入力前に入れる文字
- placheholderは入力を促すようにフォームに薄く表示される文字
電話番号入力の際は、はじめから「半角変数に変換」モードになっているので、そのままで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=”お問い合わせ内容”]
ボタンの設置
送信ボタンを設置するのですが「送信ボタン」を選択せず「確認・送信ボタン」を選びましょう。
バリデーション
下へスクロールすると「バリデーションルール」欄が出現します。ここで必須項目などの設定を行います。
「バリデーションを適用する項目」に上で設置したnameを入れます。
ここでは名前を必須項目にする例を紹介します。
これだけです。最小文字数も決めようかと思いましたが、一文字の人もいるかもしれないので、そのままです。
メールのバリデーションルール
一致する項目を互い違いにして設置します。
電話番号のバリデーションルール
自動返信メール、管理者宛メールもそれぞれ設定しましょう。
一番下の「自動返信メールに使用する項目のキーを入力してください。{ }は不要です。」とある箇所は、メールのname属性「mail」を入れましょう。以下例文です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{name}様、この度はお問い合わせメールをお送りいただきありがとうございます。 以下の内容でメッセージお受けいたしました。 お名前：{name} メール：{mail} 電話番号：{tell} 内容 {content} 後ほど、担当者よりご連絡をさせていただきます。 今しばらくお待ちくださいますようよろしくお願い申し上げます。 なお、しばらくたっても返信、返答がない場合は、 お客様によりご入力いただいたメールアドレスに誤りがある場合がございます。 その際は、お手数ですが再度送信いただくか、お電話（***-****-****）にてご連絡いただけますと幸いです。 株式会社 俺のニュース 〒000-0000 東京都北区456 電話: 000-000-000 |
こいつをBootStrapで巻いて上げれば一丁上がり。スタティックじゃない？知らん知らん！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="mw_wp_form_mw-wp-form-950" class="mw_wp_form mw_wp_form_input"> <div class="container"> <div class="row"> <div class="col-sm-2">お名前</div> <div class="col-sm-10 form-inline" style="padding: 3px;">[mwform_text name="name" class="form-control input-sm" size="60" placeholder="お名前"]</div> </div> <div class="row"> <div class="col-sm-2">メールアドレス</div> <div class="col-sm-10 form-inline" style="padding: 3px;">[mwform_email name="mail" class="form-control input-sm" size="60" placeholder="メールアドレス"]</div> </div> <div class="row"> <div class="col-sm-2">メールアドレス(確認)</div> <div class="col-sm-10 form-inline" style="padding: 3px;">[mwform_email name="mail_conform" class="form-control input-sm" size="60" placeholder="メールアドレス(確認)"]</div> </div> <div class="row"> <div class="col-sm-2">電話番号</div> <div class="col-sm-10 form-inline" style="padding: 3px;">[mwform_tel name="tell" class="form-control input-sm" conv_half_alphanumeric="false" placeholder="電話番号"]</div> </div> [mwform_textarea name="content" class="form-control input-sm" cols="30" rows="5" placeholder="お問い合わせ内容"] <div class="text-center" style="padding: 30px;">[mwform_submitButton name="send" confirm_value="確認画面へ" class="btn btn-success" submit_value="送信する"]</div> </div> </div> |