【コピペで簡単実装】WM WP Formの使い方【最強に便利お問い合わせフォーム】

WEB周り
スポンサーリンク

Contact form7より機能が多いWM WP Form

日本で一番有名なお問い合わせフォームといえば恐らくContact form7ですが、個人的にはもっと機能が多く便利だと思う「WM WP Form」をご紹介します。

 

WM WP Formの便利な機能

  • 確認ページ&お問い合わせ完了ページ(サンクスページ)が簡単に作れる
  • “ひらがなのみ、数字だけ、何文字以内”など入力する値に制限をつけられる
  • お問い合わせのログが残せる

 

WM WP Formの使い方

まずはプラグインをインストール・有効化します。

 

有効化するとメニューにWM WP Formの項目が出ますので、そこから「新規追加」。

 

するとコンタクトフォームを作成するページに変わります。
この時にビジュアルエディタになっている場合はテキストエディタにしてください。
まずお好きなタイトルを付け(今回は「コンタクトフォーム」にしました)、上の方にある「選択してください」をクリックします。

 

項目はこんな感じで色々あります。
名前などの短い文章は「テキスト」、本文メッセージなどの長い文章は「テキストエリア」を選択します。
今回はまず例として、メールアドレスを入力する項目を作ります。

 

「メール」を選択するとこのような画面になります。
name,id,class・・・などを入力する欄がありますが、一番の「name」だけが必須であとは必要なければ入力しなくてもOKです。
「name」の名前は他の項目とカブらない、わかりやすい名前にした方がいいでしょう。

 

  • id, class・・・特にCSSなどでカスタマイズしない限りは必要なし
  • maxlength・・・最大文字数の指定
  • 初期値・・・もともと入っている値を設定できます。メールアドレスなどの場合は必要なし
  • placeholder・・・フォームの入力欄にうっすらと入っている文字です。メールアドレスの場合は「sample@co.jp」など入れてもいいかもしれません。

 

入力必須にする・入力する値に制限をつける

続いて追加した項目を必須項目にしたり入力する値に制限をつける方法です。
画面の下の方にある「バリデーションルール」から追加できます。
例えば「メールアドレスを必須項目で、メールアドレス以外を入力させない」場合
「必須項目」、「メールアドレス」にチェックを入れます。

他にも必須項目を作りたければ、同じ要領で追加していきます。

 

ショートコードをコピペしてお問い合わせフォーム完成

お問い合わせフォームが完成すれば、固定ページなど表示させたい部分へショートコードをコピペすればOKです。

固定ページなどへ貼り付け↓

 

コンタクトフォームサンプル(コピペできます)

レスポンシブにも対応しています。

HTML

CSS

「外観」→「カスタマイズ」内のCSSや、「子テーマ」のCSSに貼り付けて下さい。

 

確認ページ&お問い合わせ完了ページ(サンクスページ)の作り方

このプラグインでは確認ページ&お問い合わせ完了ページを簡単に作ることができます。

確認ページはこちらから↓でもできますが、今回はより細かくカスタマイズできる固定ページで作っていこうと思います。

①確認ページorお問い合わせ完了ページ用の固定ページを作成
②そこへコンタクトフォームのショートコードを入力
③お問い合わせフォームに作成した固定ページのURLを入力

これだけでフォーム送信後、自動的にリダイヤルしてくれます。

自動送信メールの設定

自動送信メールは画面右のこちらのフォームから設定できます。
本文にはフォームを作成するときにつけた「name」属性を記載します。

例えば、メールアドレスの「name」を「mail」に設定ならこちらでは{mail}を記載すると、フォーム入力者のメールアドレスが表示される。

自動送信メール(サンクスメール)

 

お問い合わせがあったときにサイト管理者に届くメール

送信先は、お問い合わせがあったときに届くメールアドレスを入力してください。
メールアドレスは複数指定できます。
その場合は「,」で続けて書きます。
例)sample@com,sample2@com

gmailに注意・届かない?

gmailでメールが届かない場合は「WP Mail SMTP by WPForms」などのSMTPを設定することで解決できるかと思います。
また、迷惑メールに振り分けられる場合もあるので注意してください。

 


以上でした。少しでも参考になれば幸いです。

コメント

タイトルとURLをコピーしました