MVPlayer420

ワードプレスのカスタマイズ方法を中心にガジェットや日常の話をしてます。ブログ運営の話もしてますよ

WordPress

ContactForm7(問い合わせフォーム)のカスタマイズ

投稿日:

 

前回の設定でContactForm7が使えるようになったと思います。
今回は様々な項目を追加する事で、自分用にカスタマイズできますので、

ひとつずつ項目を見て行きましょう!

スポンサーリンク

 

問い合わせフォームのカスタマイズ

赤枠がカスタマイズできる項目です。

では、項目別に見て行きましょう。

 

テキスト

テキストのタブを押すとポップアップが表示されます。

項目タイプ   必須項目にしたいのであればチェックを入れます。

名前      項目の名前の事です。デフォルトでも構いません。任意で名付けてください。

デフォルト値  表示したい文字を入力(空白でも可)

このテキストを項目のプレスホルダーとして使用するにチェックを入れた場合はテキスト欄に書いてある文字が半透明になり、入力されるまで文字が残ります。

実際に入力してみます。

項目タイプ                     チェックなし

名前                        text-test

デフォルト値                    一般

このテキストを項目のプレースホルダートして使用する チェック

Akismet                                                                 チェックなし

「ID属性」と「クラス属性」を必要であれば設定します。が今回はなし

 

タグを挿入を押下

赤枠部分が追加されます。

<label>タグで囲みます

<label>ジャンル [text text-test placeholder “一般”] </label>

保存を押下

問い合わせフォームで確認してください。

ジャンルと言うテキストボックスができれば、成功です。

薄く「一般」と書かれていますがユーザーが書き込みすると以下の様に黒文字で上書きされます。

メールアドレスタグ URLタグ 電話番号タグ テキストメニュータグ

の項目はテキストと同じ概念で作成することができます。

 

数値

数値タグを押下

ポップアップが表示されます。

項目タイプ   スピンボックス もしくは スライダーを選ぶ事ができます。

名前      項目名です。(任意でつけてください)

デフォルト値  任意(テキストを作った時と同じ考えで使ってください)

範囲      ここで数値の範囲を選択します。下限と上限を決めて下さい

ID属性・クラス属性は必要な方のみ記入してください。

 

タグを挿入 押下

以下の画面がでてきます。

<label>で囲って保存を押下

 

問い合わせフォーム確認

先程のジャンルの下に数値がスピンボックスで表示されますね。

▲ボタンを押せば数値が上がって行きます。

 

次はスライダーを設定してみましょう。

 

数値2としてスライダーが出てきました。

どのように使うかはわかりませんが、あなた次第でカスタマイズできます。

 

 

日付

日付タグを押下

ポップアップが出てきます

範囲で表示させたいカレンダーの範囲を指定してください。

他の項目は前述同様です。

作成された項目を<label>タグで囲みます

問い合わせフォーム確認

カレンダーの項目が出てますね。

大きな▼を押下するとカレンダーが出てきます。

小さな▲は年代・月・日単位で変更する事ができます。

 

ドロップダウンメニュー

ドロップダウンメニュータグを押下

以下のポップアップが表示されます。

項目タイプや名前、ID属性、クラス属性は前述と同じ考え方でよいです。

オプション

並べたい項目を書きます。

☑複数選択を可能にする

☑空の項目を先頭に挿入する

チェックを入れます

タグを挿入を押下

<label>で囲みます。

保存を押下

 

 

 

 

 

 

 

 

 

 

 

 

 

 

問い合わせフォームを確認

 

選択項目として記入した項目が出てきました。

コントロールボタンを押しながらクリックしていくと複数選択ができます。

 

チェックボックス

次はチェックボックスです。

項目タイプ等は同じですので、違う場所だけピックアップします。

オプションに表示させたい文字を記入

☑ ラベルを前にチェックボックスを後ろに配置する

☑ 個々の項目をlabel要素で囲む

☑ チェックボックスを排他化する(複数選択できないようにする)

三項目にチェックを入れた状態でタグを作成します。

注意 個々の項目をlabel要素で囲むをチェックした場合<label>タグで囲むとエラーになりますので気を付けてください。

例)

下図のように<label>で囲めばエラーはなくなります

 

問い合わせフォームを確認

チェックボックスが後ろに来て、複数選択ができない状態になっているはずです。

 

三項目にチェックを入れないでタグを挿入

タグを挿入します。

<label>タグで囲って保存を押下

問い合わせフォームを確認します。

チェックボックスが前に設置され、複数選択ができるようになりましたね。

ラジオボタンタグも同じ概念で作成する事ができます。

承認確認

承認ボタンの設置ができます。

☑ チェックボックスにデフォルトでチェックを入れた状態にする

☑ この挙動を反対にする(チェックボックスのチェックを外さないと送信できないようにする)

今回はすべてチェックを外して動作確認しました。

<label>で囲って保存を押下

問い合わせフォーム確認

承認確認のチェックボックスがありますね。

ちなみに公式HPでは

とあります。いくつかのチェックボックスを作成して、空のチェックボックスがあればエラーメッセージが表示されるようになるというものです。

ここでは確認は割愛しますが、必要な場合は作って使ってください。

 

 

クイズ

問い合わせフォームにクイズを設定する事ができます。

クイズと回答の欄に |←パイプで区切り問題と回答を判断させます。

<label>タグで囲って保存を押下

間違った答えを書いて送信ボタンを押下した場合このようなエラーメッセージが出てきます。

 

reCAPTCHA

スパムメールやいたずら防止の為に使う機能です。

このタグを使う場合は事前準備が必要です。

Googleアカウントが必要ですので、最初にアカウント取得もしくはアカウントをお持ちの方はログインしてください。

その後、こちらにアクセスして登録を行ってください。

reCAPTCHA V2

Invisible reCAPTCHA

どちらかを選択してください。

どちらでも構わないと思いますが、reCAPTCHA V2に設定しておけば問題はないと思います。

この記事を書いている2017/3/29現在では両方試してみましたが、ほとんど同じ動作でした。

labelは登録後わかりやすいように名前を付ける

例) mvplayer420 ContactFormなど。。。

Registerを押下

以下の画面でSite Key とSecret Keyが発行されますので、コピーするか画面を残してください。

wordPressに戻ります。

お問い合わせ > インテグレーション > キーを設定する 押下

以下の画面がでてきますので、先ほど取得したkeyを割り当ててください。

保存を押すと以下の画面がでてきます。

これで設定は終了です。

問い合わせフォームの編集に戻ります。

reCAPTCHAのタグを押すと以下の画面がでてきます

明るさと大きさを選んでタグを挿入してください。

保存を押下

 

問い合わせフォームを確認

以下の様に私はロボットではありません。が表示できていれば完成です。

 

 

ファイル添付

ファイル添付を追加したい場合にこのタグを使います。

ファイルの上限サイズを決めます(バイト単位)

送信できるファイルの種類を決めます。,カンマで拡張子を区切ってください。

今回はjpegとpngだけにしました。

タグを挿入

保存を押下

問い合わせフォームを確認

ファイルを選択のボタンができていれば完成です。

 

 

いかがだったでしょうか?

このプラグインはかなり拡張性が高い為、高度な問い合わせフォームができると思います。デザインなどを変えたい場合はCSSやHTLMなどの知識が必要です。

チャレンジしたい方は勉強してみてください。

 

デフォルトでもかなり使えるプラグインですので、この機会に使ってみてください。

この記事が参考になったらいいね!して頂けると運営の糧になります。

 

 

スポンサーリンク




スポンサーリンク




-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

FaileZiila  インストールと設定方法

今回はmacユーザーのためのFTPソフトの紹介です。 FTPソフトっていくつかありますが、その中でもmacユーザーであれば、FaileZiila です。 FFFTPのソフトも紹介しましたが、こちらはw …

WordPress おすすめテーマ -厳選-【2017年版】

WordPress おすすめテーマ 気軽にブログを続けて行きたいという人は断然無料がおすすめです。 ただでさえ、ドメインとサーバーにお金をかけているのだから、テーマくらいはただで使ってもいいと思います …

mac スクリーンショットと保存先変更

  今回はmacのスクリーンショットです。 長年windowsを使ってきたユーザーにとってはmacは未知の世界。 windowsで簡単にできていた作業でもmacでは 「ん?どうするんだっけ? …

EasyFancyBox 設定方法と使い方

今回は筆者のおすすめプラグインでも紹介した、EasyFancyBoxの設定と使い方です。 デフォルトでも使えますし、簡単な設定で誰でも画像やサムネイルをクリックした時に拡大ポップアップとして表示してく …

All in One SEO PackをYoast SEO に変えてみた。

All in One SEO PackをYoast SEO に変えました。 最近、人気急上昇のYoast SEO。今はAll in One SEO Packを使ってはいるけど、なかなかSEO対策がとれ …



about me