1. HOME
  2. ブログ
  3. ワードプレス お問い合わせフォームプラグイン Contact Form 7

ワードプレス お問い合わせフォームプラグイン Contact Form 7

以前からよく使っていた、お問い合わせフォームプラグイン。

 

新たにワードプレスをインストールしたら、デフォルトでプラグインに入っているような。。。

とってもメジャーだっていうことなんだな。

 

今も、複数のサイトでこのお問い合わせフォームプラグインContact Form 7を使っているので、よく使う設定をまとめておこうと思います。

 


 

※ 今回はプラグインのインストール方法等の詳細は割愛していきます。

 

1.プラグイン Contact Form 7 をインストールして有効化

2.インストール済みのプラグイン > Contact Form 7の[設定]をクリック

3.生成されているコードをコピーし固定ページに貼り付ける

こんなやつ→ [contact-form-7 id=”7″ title=”コンタクトフォーム 1″]

 

今回はここから!

タグの作成を利用してどんなことが、contact form7 でできるのかをメモしていきます

contact form7 タグの作成

 

 

 

 

 


 

下図がデフォルトの状態です

名前、メアド、題名、メッセージ、送信ボタンが実装されています。

何も設定していない状態でこれです!すごいですね。便利便利

contact form7デフォルト常態

 

管理画面 > お問い合わせ

contact form7

 

 

 

* テキスト項目 を追加する

 

contact form7 テキスト項目

コード例 [text text-1]

 

最大文字数などをオプションで設定することができます

sizeに数値を入れることで、横幅の調整ができます。

 

 

****** プレースホルダーとは? ******

 

デフォルト値のとなりにチェックボックス ”このテキストをプレースホルダーとして使いますか?” というのがあります。

たとえば、Facebookの記入欄の ” 今どんな気持ち? ”

プレースホルダーについて

ここにカーソルを当てると、この文字は消えると思います。入力に関するヒントを示したテキストです。

画面表示スペースをすっきりとコンパクト&スマートにまとめることができ、ユーザーにも親切です。


 

*メールアドレス を入力する項目を追加する

contact form7 メアド

 

コード例 [email email-774]

 

最大文字数などをオプションで設定することができます

sizeに数値を入れることで、横幅の調整ができます。

 


 

*URL を入力する項目を追加する

 

contact form7 URL

コード例 [url url-125]

 

最大文字数などをオプションで設定することができます

sizeに数値を入れることで、横幅の調整ができます。

 


 

*電話番号 を入力する項目を追加する

contact form7 電話番号

コード例 [tel tel-1]

 

最大文字数などをオプションで設定することができます

sizeに数値を入れることで、横幅の調整ができます。

 


 

*数値 (スピンボックス) を入力する項目を追加する

contact form7 スピンボックス

コード例 [number number-431 min:1 max:10 step:1 “1”]

 

ダイアログボックスのように数字を一択させることができます

最大文字数などをオプションで設定することができます

sizeに数値を入れることで、横幅の調整ができます。

 


 

*数値 (スライダー) を入力する項目を追加する

 

 

 


 

*日付 を入力する項目を追加する

contact form7 日付

コード例 [date date-120 min:2014-12-31 max:2015-01-01 step:1]

 

この日付からこの日付までしか、ユーザーに指定できないするなんて設定も可能

 


 

*ドロップダウンメニュー を追加する

contact form7 ドロップダウン

コード例  [select menu-8 “あ” “い” “う” “え” “お”]

 

複数選択を可能にすることもできます。選択する場合はctrlを押しながら。

先頭に空の項目を挿入することができます。これを指定していないと、ユーザーが何も選んでいない常態なので、あを選んだ状態なのかがわからなくなります。

 


 

*チェックボックス を追加する

無題

コード例 [checkbox checkbox-732 “あ” “い” “う” “え” “お”]

ラベルを先に、チェックボックスを後に、置き換えることもできます。
個々の項目を <label> タグで囲むこともできます。
チェックボックスを排他化することもできます。


 

*ラジオボタン を追加する

contact form7 ラジオボタン

コード例 [radio radio-623 “あ” “い” “う” “え” “お”]

 

ラベルを先に、チェックボックスを後に、置き換えることもできます。
個々の項目を <label> タグで囲むこともできます。

 


 

*承諾の確認

contact form7 承諾の確認

コード例  [acceptance acceptance-23]

 

チェックを入れないと送信ボタンがグレーアウトしたままとなり、送信ができなくなります。

初期状態でチェックボックスにチェックを入れておくことも可能です
 


 

*クイズ

contact form7 クイズ

コード例 [quiz quiz-471 “犬と猫、好きなほうは?|猫”]

 

クイズに答えて景品!!っていうのにももちろん使えるけど、どっちかというとスパムメールを排除するために設定することが多いようです。

簡単なクイズを出して「1+1=?」 正しいことを入れないと、問い合わせできないなど、そんな使い方が。

 


 

*ファイルのアップロード

無題

 

コード例 [file file-134]

 

ファイルサイズの上限 (バイト) 設定や、受け入れ可能なファイル形式の指定が可能です


  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事