WordPressブログに記入式アンケートを設置する方法【プラグイン:Contact Form 7の使い方】

WordPress

どうも、れぼるです。

今回は、WordPressブログ上に記入式アンケートを設置できるプラグイン、
「Contact Form 7」の使い方について解説していきます。

Revol
Revol

今回は、例えばこんなアンケートフォームを作りたい時に便利なプラグインを紹介していくぞ

    夏と言えば(複数選択可)

    アフィリ
    アフィリ

    ブログを見てくれている方の声を聞いたり、統計のアンケートを取りたい時にとても便利そうね。

    Revol
    Revol

    結構幅広い使い方が出来るので、そういったフォームを設置したいという場合は参考にしてほしい。
    それでは解説していきます。よろしくお願いします。

    アフィリ
    アフィリ

    よろしくお願いします。

    Contact Form 7のインストール

    まずは、Cotact Form 7のインストールからです。

    ダッシュボード左のメニューから「プラグイン」>「新規追加」の順でクリック

    ① 検索欄に「Contact Form 7」と入力し検索
    ② Contact Form 7が表示されたら「今すぐインストール」をクリック

    「有効化」をクリック

    アンケート・問い合わせフォームの作り方と設置の仕方

    Revol
    Revol

    それじゃあ早速使ってみよう。

    ということでここからは、実際のアンケートフォームの作り方と、設置の仕方を解説していくぞ

     

    アンケートフォームの編集画面

    実際にアンケート・問い合わせフォームを作っていきます。

    まずは、フォームの編集画面を開きます。

    ダッシュボード左メニューから「お問い合わせ」>「新規追加」の順でクリック

    次のような画面が表示されます。
    ここでフォームを作ります。

    この画面の構成は次のようになっています。

    ①タイトル入力欄:
    フォームのタイトルを入力します。
    このタイトルは管理用なので、自分で分かりやすいものでOKです。
    ただし、運用中のフォームタイトルを変えると、後で解説する記事への設置に使うショートコードが変わるので注意しましょう。

    ②アンケートフォームの編集欄:
    ここでアンケートフォームを編集していきます。
    初めは画像にあるアンケート項目が入っています。

    ③フォームタグ作成ボタン:
    追加したいフォームのボタンをクリックし、アンケート項目を追加していきます。

     

    アンケートフォームの編集

    フォームの作り方の例

    ここでは例として、初めから入っているアンケート項目に、
    「テキスト」欄を1つ増やしてみます。

    まず、編集画面上で「テキスト」を増やしたい場所を改行してスペースを作ります。

     

    次の画像の流れで編集していきます。

    ① 回答者に何を入力してほしいか、項目名を書き込みます。
        ここでは例として「最後に何か一言」としておきます。
    ② カーソルを見出しの次の行に合わせます。
    ③ 編集画面上部の「テキスト」ボタンをクリック

     

    すると、次のようなフォームタグ生成の小窓が出ます。
    今回は例ですので、設定はそのままで「タグを挿入」をクリックします。
    (細かい設定のやり方は後ほど解説していきます。)

    すると、フォームの編集欄にタグが挿入されます。

    これで、フォームの編集が終わりました。
    フォームの編集が終わったら、忘れずに
    画面右、又は一番下にある「保存」をクリック

    Revol
    Revol

    「あれ?<label> ~ </label>ってのはいいの?」

    って思ったかもしれません。

    鋭い。これが何かについては後ほど解説します。

    とりあえず無くてもフォーム作成はOKです。

     

     

    「保存」すると画面内に次の様なショートコードが表示されます。
    これを記事・固定ページの編集時に貼り付けるとアンケートフォームが設置されます。

    ということで、続いては今作成したフォームを、実際に記事上に設置します。

    フォームを記事・固定ページに設置するやり方

    アンケートを設置したい記事・固定ページの編集画面を開きます。

    アンケートを設置したい部分に先ほどのショートコードを貼り付け、
    ページを「公開」または「更新」します。(プレビューも出来ます)

    すると次のように、アンケートフォームがページ内に設置されます。

      最後に何か一言


      (注:このフォームはデモなので送信は出来ません)

      Revol
      Revol

      注意:ショートコードにはアンケートフォームのタイトルが含まれるので、タイトルを編集した際はショートコードを貼りなおそう。

      フォームタグ生成の設定のやり方

      ここからは各アンケート項目のフォームタグ生成の設定の仕方について1つずつ解説していきます。

      多くの設定項目は最初の「テキスト」と同じですので、最初の「テキスト」の項を参考にしてみて下さい。

      テキスト

      まずは、「テキスト」
      こちらは単一行のテキストを入力するフォームです。
      複数行のテキストを入力できるフォームを作る場合は、後述の「テキストエリア」を使用します。

      以降の各フォーム項目の設定でも共通する項目が出てきますが、設定仕方は同じです。

      ① 項目タイプ:

      「必須項目」にチェックを入れると、この項目が入力必須となります。
      ただ、フォームの外観上は区別がないので、見出しに「(必須)」と添えるなどしておくと親切です。

      ② 名前:

      フォームタグの名前となります。基本的に自動で付けられるので、自分で決めたい理由が無ければそのままでOKです

      ③ デフォルト値:

      この入力欄にあらかじめ表示したいテキストを入力します(空欄でもOK)
      デフォルト値の欄にテキストを入力し、その下の「このテキストを項目のプレースホルダーとして使用する」にチェックを入れる事で適用されます。

      ④ Akismet:

      Akismetのプラグインを利用している場合、ここにチェックを入れておくとスパムの防止に役立ちます。
      Akismetについてはこちら

      ⑤ ID属性:CSSを使ってカスタマイズする際に使用します。※

      ⑥ クラス属性:CSSを使ってカスタマイズする際に使用します。※

      ※CSSについては専門の知識が必要となるのでここでは解説しません。
      CSSを使用しない場合は空欄でOKです。

       

      メールアドレス

      「メールアドレス」を入力するフォーム
      入力項目は「テキスト」と同様です。

       

      URL

      URL入力用のフォーム
      入力項目は「テキスト」と同様です。

       

      電話番号

      電話番号入力用のフォーム
      Akismetが無い以外、入力項目は「テキスト」と同様です。

       

      数値

      数値入力です。
      ここでは、項目の表示をスピンボックスにするか、スライダーにするかの選択肢と、
      入力の数字の範囲の下限~上限を設定できるようになります。

      注:「スライダー」はスライダーのバーだけが出て明確な数字が表示されないので、あまり使い勝手がよくない印象を受けました。

       

      日付

      日付の入力フォームです。
      こちらも日付の下限~上限が設定できます。

      ちなみに、実際の入力の際は、フォーム欄をクリックすると
      次のような選択式メニューが展開します。

       

      テキストエリア

      「テキストエリア」のフォームです。
      「テキスト」が単一行の入力用だったのに対し、こちらは複数行を入力できるフォームです。
      設定は「テキスト」と同様(Akismetは無し)です。

       

      ドロップダウンメニュー

      ドロップダウンメニューによる選択形式のフォームです。

      アフィリ
      アフィリ

      ドロップダウンっていうのはこういう感じのね

       

      「オプション」に1行に1選択肢設定します。

      ここでは例として都道府県をいれてみました。

       

      また、それぞれチェックを入れる事で
      ・複数選択を可能にする
      ・空の選択肢を先頭に挿入する
      ことが出来ます。

       

      チェックボックス

      チェックボックスによる選択フォームです。
      選択肢はドロップダウン同様、1行に1選択肢入力していきます。

      ・ラベルを前に、チェックボックスを後に配置する
       「令和 □」というように、チェックボックスを後ろに配置します。

      ・個々の項目を label 要素で囲む
       選択肢の文字をクリックしてもチェックが出来るようになります。
       (注意:フォーム編集画面上でフォームタグ全体をlabelで囲ってしまうとエラーになります。)

      ・チェックボックスを排他化する
       複数選択が出来ないようになります。

       

      ラジオボタン

      ラジオボタン(〇にチェックを入れるタイプ)による選択フォームをつくります。

      アフィリ
      アフィリ

      ラジオボタンっていうのはこういうのの事ね

      チェックボックスと似ていますが、複数選択は出来ません

      ・ラベルを前に、チェックボックスを後に配置する
       「令和 〇」というように、チェックボックスを後ろに配置します。

      ・個々の項目を label 要素で囲む
       選択肢の文字をクリックしてもチェックが出来るようになります。
       (注意:フォーム編集画面上でフォームタグ全体をlabelで囲ってしまうとエラーになります。)

       

      承諾確認

      例えば、「個人情報の取り扱いの方針への同意」のような、回答者に「○○について承諾して頂けますか?」というような確認をする時に使用します。

      同意条件:

      回答者に何の同意を求めるか記載します。

      オプション:

      「チェックボックスを任意選択にする」にチェックを入れておくと、条件に同意しなくても(チェックを入れなくても)回答を送信できます。
      (この場合だと、FAXに愛を誓わなくてもアンケートに回答できます。)

       

      実際のフォーム表示はこんな感じになります。
      (↓はキャプチャ画像です)

      アフィリ
      アフィリ

      一生FAXを愛するって何だ?。。。

      クイズ

      ちょっとしたお楽しみでクイズを設定することが出来ます。

      クイズと回答:

      出題したいクイズとその回答を” | “で区切って入力します。

      例えば、

      レモン1個に含まれるビタミンCは?|レモン1個分

      といった感じです。

      1つのクイズのフォームタグに設定できる問題は1問だけなので、複数の問題を出題する場合は1問ごとにフォームを作りましょう。

      ちなみにクイズの回答は正解を入力しないと送信できません。

      ファイル

      フォーム入力者が、フォームにファイルを添付して送信することが出来ます。

      ファイルサイズの上限(バイト):

      添付できるファイルの大きさをバイト数を入力して制限できます。
      デフォルト(未入力)の場合の上限は1MB(1048576バイト)となっています。

      入力例:2MBを上限とする場合

      ⇒ 2mb、又は2097152と入力

       

      受け入れ可能なファイル形式:

      送信できるファイルの形式を指定します。

      送信できるファイルの形式は、以下のものです。

      jpg、 jpeg、 png、 gif、 pdf、 doc、 docx、 ppt、 pptx、 odt、 avi 、 ogg、 m4a、 mov、 mp3、 mp4、 mpg 、 wav 、wmv

      単一のファイル形式のみ受け入れる場合、そのファイル形式を、
      複数のファイル形式を添付できるようにする場合は” | “で区切って入力します。

      例:jpgのみ ⇒ jpg

             複数のファイル形式 ⇒ jpg|jpeg|png|gif

       

      送信ボタン

      アンケートを送信するためのボタンをセットします。
      ボタンの表記はラベルに入れた文字で任意に設定できます。

       

       

      <label> ~ </label> について

      アフィリ
      アフィリ

      そーいえば、

      最初からある項目についている <label> ~ </label> ってコードは何?

      初めから入っている項目が <label> ~ </label> というコードで囲まれています。
      これは <label> ~ </label>で囲まれた要素と、入力欄を関連付けるものです。

       

      例えば、最初から入っていた

      <label> お名前 (必須)
      [text* your-name] </label>

      であれば、画面上で”お名前(必須)”の文字をクリックしても、続く入力欄をアクティブにして名前を入力できます。

       

      ・label要素のメリット

      例えば、フォームに入力をする時、スマホなどの画面が小さいタブレット端末を利用している場合、フォーム欄を正確にタップしづらいことはありませんか?

      そんなときlabel要素を適用していると、タップ出来る有効範囲が広がるので親切なフォームになります

      他にも、読み上げソフトなどの支援技術を利用している場合も、関連付けされます。

      アフィリ
      アフィリ

      今ってスマホでインターネット閲覧する人が多いから、これは意識しておくと良さそう

      Revol
      Revol

      注意:

      「チェックボックス」や「ラジオボタン」などの選択式の項目では、個々の選択肢にlabelを適用する設定ができます。
      全体を<label> ~ </label>で囲ってしまうとエラーとなってしまうぞ。

       

      メールの設定

      アンケートや問い合わせが送信された時、通知を受け取ったり、アンケート送信者に自動返信メールを送る設定ができます。

      アンケートが送信されたとき通知を受け取る

      アンケートや問い合わせが送信されたとき、
      次のように管理者が通知を受け取る事ができます。

      メール(2)にチェックを入れると、次の「フォーム入力者への自動返信メール」の設定が出来ます。

       

      フォーム入力者への自動返信メール

      メール(2)で、フォーム入力者(アンケート回答等をして頂いた方)への自動返信メールが設定できます。

      設定を変更したら「保存」を忘れずにしましょう。

      メッセージの設定

      アンケートの送信ボタンが押された際に表示するメッセージを設定できます。
      正常に送信された場合の他、各入力で不備があった場合など、状況毎に表示するメッセージを設定できます。
      編集後は忘れずに「保存」しましょう。

      その他の設定

      コードを利用して、特殊な設定をすることが出来ます。
      この記事冒頭のアンケートが”デモ”扱いとなっていますが、それもここから設定しています。
      詳しくはこちら ⇒ その他の設定

      上記のリンク先のページに記載されているコードを入力欄に貼り付けて「保存」すると設定が適用されます。

      まとめ

      Revol
      Revol

      今回は以下の事について解説してきました。

      ・Contact Form 7のインストール

      ・フォームの編集画面と、編集のやり方

      ・記事や固定ページにフォームを設置する方法

      ・各フォームタグの設定

      ・label要素について

      ・管理者・フォーム入力者への自動返信メールの設定

      ・アンケート・問い合わせ送信時に表示されるメッセージの設定

      ・その他の設定

      Revol
      Revol

      項目ごとに解説したので、実際に利用する際分からなくなったら、各項目を参照してみて下さい。

      アフィリ
      アフィリ

      わかったわ

      Revol
      Revol

      それでは今回の解説はここまで。

      ありがとうございました。

      アフィリ
      アフィリ

      ありがとうございました。し~ゆ~

       

       

       

       

       

      コメント

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