WordPressお問い合わせフォーム(確認画面付)MW WP Formの使い方詳細

WordPressのお問い合せフォームプラグイン「MW WP Form」は確認画面が付いている上に、自動返信機能やデータベース作成機能がついている優れたプラグインです。「MW WP Form」の基本的な使い方を簡単詳細に解説します。

MW WP Form お問い合わせフォーム

まずは、「MW WP Form」で作ったお問い合わせフォームです。「contact form 7」と見栄えはほとんど変わりませんが、自分でデザインすることも可能です。

MW WP Form お問い合わせフォーム

 

MW WP Formのインストールと有効化

まずはMW WP Formをインストール、有効化してください。

プラグインのインストール・有効化はこちらを参考にしてください。

 

MW WP Formでお問い合わせフォームを作る

MW WP Form

 

WordPress管理画面>MW WP Form>新規追加をクリック。タイトル欄にタイトルを入力します。表には出ないので自分でわかるタイトルで構いません。例)お問い合わせフォーム

上の画像の場合は以下のコードをテキストエディタまたはビジュアルエディタにコピーすれば完成です。

MW WP Form

 

次に、このフォームのショートコードを固定ページに貼り付けます。フォーム編集画面の右にある「フォーム識別子」のショートコードをコピー(Ctrl+A)します。

MW WP Form

 

WordPress管理画面>固定ページ>新規追加をクリック。タイトル欄に「お問い合せ」などを入力します(※ここで入力したタイトルがユーザー向けに表示されます)。ビジュアルエディタにショートコードをペースト(Ctrl+V)します。

MWWPForm05

 

ショートコードの上の文章は直接入力します。必要であればショートコードの下にも文章を追加できます。この固定ページのプレビューボタンをクリックすると「お問い合せフォーム」のイメージを確認できます。「公開」をクリックすれば問合せページの完成です。

 

入力項目をひとつずつ作成する場合

フォームを編集する際、入力項目をひとつずつ作成する場合は、ショートコードを簡単に貼り付けることができる「フォームタグを追加」ボタンを使用します。

MWWPForm06

 

「選択してください」をクリックすると、プルダウンメニューが表示されますので、入力項目にあったものを選択し、「フォームタグを追加」ボタンをクリック。表示されたウィンドウに必要な項目を入力してInsertボタンをクリックするだけです。

MW WP Form

 

ちなみに上記の例では、「お名前」から「件名」まではすべて「テキストフィールド」、「お問い合せ内容」は「テキストエリア」を使用しています。

「お名前」の項目を例に解説します。フォーム編集画面のビジュアルエディタに「お名前」と直接入力します。次に「フォームタグを追加」ボタンの左の「選択してください」をクリック。プルダウンメニューからテキストフィールドを選択し、「フォームタグを追加」ボタンをクリックします。

MW WP Form

 

下図のウィンドウが表示されますので、必要箇所を入力して「Insert」ボタンをクリックします。この一連の流れを繰り返して項目を作成していきます。

MW WP Form

 

各項目の内容は以下の通りです。

  • 「name」…項目の名称
  • 「id」…CSSでカスタマイズする際に紐付けするためのid。入力しなくてもOK
  • 「size」…入力枠のサイズ
  • 「maxlength」…最大入力文字数
  • 「初期値」…最初から入力しておく文字(ユーザーの入力の手間を省く)
  • 「placeholder」…入力枠内に表示しておく文字 例)半角で入力ください 
  • 「エラー表示」…チェックすると、必須項目なのに未入力だった場合でもエラー表示しない
  • 「半角英数字に変換」…チェックスをすると全角の文字を半角に変換

 

こちらの記事も参考になります

コメントを残す

サブコンテンツ

このページの先頭へ