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でお問い合わせフォームを作る
WordPress管理画面>MW WP Form>新規追加をクリック。タイトル欄にタイトルを入力します。表には出ないので自分でわかるタイトルで構いません。例)お問い合わせフォーム
上の画像の場合は以下のコードをテキストエディタまたはビジュアルエディタにコピーすれば完成です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
お名前(必須) [mwform_text name="お名前" size="40" maxlength="40"] メールアドレス(必須) [mwform_text name="メールアドレス" size="40" maxlength="60"] 件名 [mwform_text name="件名" size="40" maxlength="40"] お問い合わせ内容 [mwform_textarea name="お問い合わせ"] [mwform_submitButton name="確認・送信" confirm_value="確認画面に進む" submit_value="送信"] [mwform_backButton value="戻る"] |
次に、このフォームのショートコードを固定ページに貼り付けます。フォーム編集画面の右にある「フォーム識別子」のショートコードをコピー(Ctrl+A)します。
WordPress管理画面>固定ページ>新規追加をクリック。タイトル欄に「お問い合せ」などを入力します(※ここで入力したタイトルがユーザー向けに表示されます)。ビジュアルエディタにショートコードをペースト(Ctrl+V)します。
ショートコードの上の文章は直接入力します。必要であればショートコードの下にも文章を追加できます。この固定ページのプレビューボタンをクリックすると「お問い合せフォーム」のイメージを確認できます。「公開」をクリックすれば問合せページの完成です。
入力項目をひとつずつ作成する場合
フォームを編集する際、入力項目をひとつずつ作成する場合は、ショートコードを簡単に貼り付けることができる「フォームタグを追加」ボタンを使用します。
「選択してください」をクリックすると、プルダウンメニューが表示されますので、入力項目にあったものを選択し、「フォームタグを追加」ボタンをクリック。表示されたウィンドウに必要な項目を入力してInsertボタンをクリックするだけです。
ちなみに上記の例では、「お名前」から「件名」まではすべて「テキストフィールド」、「お問い合せ内容」は「テキストエリア」を使用しています。
「お名前」の項目を例に解説します。フォーム編集画面のビジュアルエディタに「お名前」と直接入力します。次に「フォームタグを追加」ボタンの左の「選択してください」をクリック。プルダウンメニューからテキストフィールドを選択し、「フォームタグを追加」ボタンをクリックします。
下図のウィンドウが表示されますので、必要箇所を入力して「Insert」ボタンをクリックします。この一連の流れを繰り返して項目を作成していきます。
各項目の内容は以下の通りです。
- 「name」…項目の名称
- 「id」…CSSでカスタマイズする際に紐付けするためのid。入力しなくてもOK
- 「size」…入力枠のサイズ
- 「maxlength」…最大入力文字数
- 「初期値」…最初から入力しておく文字(ユーザーの入力の手間を省く)
- 「placeholder」…入力枠内に表示しておく文字 例)半角で入力ください
- 「エラー表示」…チェックすると、必須項目なのに未入力だった場合でもエラー表示しない
- 「半角英数字に変換」…チェックスをすると全角の文字を半角に変換
最近のコメント