Smile Blog

スマイルヴィジョンスタッフが運営する広報ブログ

【WordPress】MW WP Formを使用したお問い合わせフォームの作成

NsNb7ndCeV3FkP61515754521_1515756417

ども、こんにちは!開発部のいろはです。

今回は私が重宝しているWordPressのプラグイン
MW WP Form」の使い方を解説したいと思います。

MW WP Fromとは?

MW WP FormはWordPressにお問い合わせフォームの機能を追加するプラグインです。
シンプルなショートコードを記述してフォームを作成することができます。

また企業サイトなどで採用されやすい確認画面のサポートや、
MW WP Formの機能を拡張する追加アドオンなどがあるのが特徴です!

1.MW WP Formのダウンロード/インストール

それでは早速導入してみましょう!

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

img1

ダウンロード

※インストール方法についてはこちらの記事をご覧ください。

2.フォームの作成

プラグインをインストールするとMW WP Formの項目がメニューが追加されますので、
その中の新規追加を選択します。

img2

タイトルに判断しやすい名前をつけた後、フォーム入力画面の編集を行います。
メディアを追加の下にある「選択してください」をクリックして、追加する項目の形式を選択します。
(今回はメールアドレスの入力欄を例に作成してみたいと思います。)

形式を選択後「フォームタグを追加」をクリックし、入力項目の編集画面を開きます。
項目内容を編集して「Insert」ボタンをクリックで追加します。

img3

もう少し下記のような入力項目を増やしてフォームっぽく作ってみましょう・・・

入力項目 フォームタグの種類
お名前  テキスト(入力項目)
メールアドレス  メール(入力項目)
お問い合わせ内容  テキストエリア(入力項目)
確認ボタン/送信ボタン  確認・送信(ボタン項目)

こんな感じになりました!
フォームタグだけでは何の項目かわからないので、名称を付けます。

img4

必須項目の設定を行う場合はバリデーションルールを追加を行い、
各入力項目のname属性を入力して必須項目にチェックをします。

画像はお名前入力欄に必須項目を付与してみました!

img5

フォーム確認画面や完了画面のURLを変更したい時は
「URL設定」が便利です。

入力画面・確認画面・完了画面・エラー画面のURLを変更することができます。

img6

完了画面の内容を変更する場合は
「完了メッセージ」より変更することができます。

img7

3.メールの設定

内容送信後に自動返信メールの設定と管理者あてに届く通知メールの設定を行います。

自動返信メール(お客様が受信するメール)の設定方法

画面右の自動返信メール設定の項目を編集します。

img8

編集項目 詳細
件名 受信されるメールの件名を記入します。
送信者 送信者の名前や企業名などを記入します。
送信元(E-mailアドレス) 送信元のメールアドレスを記入します。
本文 問い合せ内容が無事に送信されたことや連絡先などの著名欄、
今後の対応などを記入します。
自動返信メール メールの項目に利用したname属性の値を記入してください。
この入力がなければ自動返信が届かなくなります。{}記号は不要です。

画像の本文にある{name}や{contents}は
フォームの入力内容を呼び出すことができます。

フォームタグ[name=”◯◯”]の◯◯の部分を
自動返信メールの本文にコピー&ペーストします。

img9

通知メール(管理者へ届くメール)の設定
自動返信メールの下にある「管理者宛のメール設定」で、
問い合せがあった時に管理者へ自動通知するメールの設定を行います。

編集項目 詳細
送信先(E-mailアドレス) 問い合せ内容を通知するE-mailアドレスを記入します。
件名  メールの件名を記入します。
「お問合わせ通知」など記入すると確認しやすいです。
送信者 {name}でフォームに入力された名前が反映されます。
未記入の場合はWordPressのサイト名が指定されます。※1
送信元(E-mailアドレス) {mail} でフォームに入力されたメールアドレスが反映されます。
未記入の場合はWordPressに登録した時のアドレスが指定されます。※1
本文  {contents}でフォームに入力された本文が反映されます。※1

※1…各項目に利用したname属性の値を記入してください。

内容の入力後は画面右の公開を押して保存します。

4.固定ページを作成し、フォームを公開する

MW WP Formの一覧画面などより
作成したフォーム識別子のショートコードをコピーします。

img11

固定ページを新規作成し、フォーム識別子のショートコードをペーストします。
MW WP Formで入力画面のURLを指定している場合、パーマリンクは統一してください。

img12

公開して下記のように表示されればOKです!

img13

5.便利な追加アドオン

MW WP Formには便利な拡張機能がございますので、合わせてご紹介いたします!

画像認証を追加する「MW WP Form CAPTCHA」

MW WP Form CAPTCHAはフォーム送信時に画像認証を行うアドオンです。

img14

詳細はこちら

GUIでフォームを作成する「MW WP Form Generator」

MW WP Form GeneratorをインストールすればGUIでフォーム作成することが出来ます。
HTMLが苦手な方でも簡単にフォーム作成できます。

img15

詳細はこちら

MW WP Formを使用してお問合わせフォームの作成方法について解説いたしました。
確認画面があるだけではなく、入力データの保存や値の自動編集機能など
機能が非常に魅力的なので是非使っていたいただきたいプラグインです!

それでは、お疲れ様でしたノシ

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

いろは

いろは

■部署
開発部

■スペック(Level、身長、座高、属性、資格)
60℃くらいの水属性

■入社年
2017年

■趣味
8bitとカフェミュージック、白と茶色模様の犬、観葉植物、ナワバリを確保する試合(イカ)、ボウリング

■座右の銘
明けない夜はない

■ひとこと
だんだん早くなる

関連記事

  1. 「いま、ふたたびの奈良へ。」より

    スランプ脱出法 - 「そうだ奈良行こう。」~長谷寺編~

  2. クリアボタン

    【作ってみた】GASでGoogleスプレッドシートのセルのクリアボタン

  3. NHK大河ドラマ真田丸とMEET三成展

    戦なき世を創るため… NHK大河ドラマ「真田丸」×石田三成企画展「MEET三成展」へ!

  4. img1

    セミナー『WebプロデューサーとWebディレクターが見る世界』

  5. img2

    柿の種より人の心を動かすキャッチコピーを考えてみる(その2)

  6. 0I9A6577ISUMI_TP_V

    一人でも楽しめる!GWの過ごし方5選!!

  7. qqq

    【鴨ふじ】天満駅より徒歩2分!鴨つけめんと炊き込みご飯のお店

  8. img1

    中山寺に行ってきました(※仕事です)

人気記事

  1. クリアボタン
  2. mv
  3. 安い!美味い! 【大阪天満・天神橋筋商店街の食レポ】
  4. 新入社員研修「伝える+伝わるセミナー」
  5. タイ料理「天満3パクチー」
  6. 2017年スタートアップトレンド (アメリカ版)
  7. 大阪天満天神橋筋商店街がっつりBEEF_KINGOFSTEAK
  8. S__16556226
  9. tukutte08

最近の記事

  1. NsNb7ndCeV3FkP61515754521_1515756417 【WordPress】MW WP Formを使用したお問い合わせフォームの作成
  2. db43c292d744f2ab9bcec5c9e2012172_m 【WordPress】プラグインの使い方(インストール・有効化・停止・削除)
  3. 66efd8d312710c14e1e7656010bc60bd_m 【WordPress】Contact Form 7を使ったお問い合わせフォームを…
  4. 223395ae7cd150697858d397130d03f0_m 【WordPress】会員ページ作成のオススメプラグイン5選!
  5. 9f803b3532fa44bcb3001cac6734d898_m 埋込み式のGoogleカレンダーの色を自由自在にカスタマイズする方法
2018年1月
« 12月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP