*

プラグインContact Form 7-問合せ簡単作成のカスタマイズ

公開日: : 最終更新日:2018/04/04 WordPress

前回はContact Form 7-の基本的な使い方で「お問い合わせ」なんか作ってみました
そのほかにもいろいろカスタマイズして応用できます。
簡単なカスタマイズをしてみました。

スポンサーリンク
 

メールフォームのカスタマイズ


メールフォームの新規作成画面には操作ボタンにいろいろな種類が表示されています
このボタンをクリックしてメールフォームに設置する部品を作成できます。

ボタン
これらの部品の組み合わせでお問い合わせだけでなく、アンケートや感想、評価などのメールフォームを作ることができます。
作成したい部品名のボタンをクリックすると部品の種類に応じた設定項目が表示されます
 

テキスト


「テキスト」は1行のテキストを入力してもらうために使用します>
「テキスト」ボタンをクリックすると「フォームタグ生成・テキスト」が表示されます。

テキスト 

「名前」は部品を識別するための項目になるので、他の部品に使用していない名前にします。

自動で設定された名前をそのまま使ってもOK

入力を必須にする場合は「必須項目」にチェックを入れます。
デフォルトの値を設定する場合は「デフォルト値」の項目に入力します

デフォルト値ではないけれど、入力されるまでサンプルとして値を表示しておきたい場合は
「プレースホルダーとして使用する」にチェックをいれます

それ以外にスタイル関係の「ID属性」と「クラス属性」は必要に応じて設定します。

テキスト設定
「フォーム」の使用したい位置に設定したタグ(例:[text text-kyojyuuwork placeholder “東京都”]) を記述します。
※「タグの挿入」をクリックすると、フォームのカーソルのあるところにはいります。


コードの挿入
フォームで入力した値をメールで送信する場合は、メールの方にもコードを記述します。

できたら保存します

作成したフォームを利用するには表示されたコードを記事や固定ページに記述します。

記事を公開しブログで確認してみます

 ブログで確認

ラジオボタン


「ラジオボタン」は複数の項目から一つを選択してもらう場合に使用します。

「オプション」のところに選択項目を1つにつき1行で記述します。

必要に応じて項目入力やチェックをいれます


ラジオボタン

チェックボックス


チェックボックスはラジオボタンと同じように利用できます
フォームで「チェックボックス」ボタンをクリックします

「オプション」欄に1行1項目で入力します。

チェックボックス

ドロップダウンメニュー


選択肢を用意して選んでもらう時に使用します。

フォームで「ドロップダウンメニュー」ボタンをクリックします

「オプション」欄に1行1項目で入力します。

ドロップダウンメニュー
フォームで入力した値をメールで受け取るために、メールにも部品のコードを記述します

メールに記述
保存ボタンをクリックします

作成したフォームを利用するには表示されたフォームのコードを記事や固定ページに貼りつけます。
投稿ページの投稿欄にコードをコピペしたら公開をクリックします。

公開前に確認するには「プレビュー」ボタンをクリック。
いろいろ使ってみた例です。

部品利用
ブログで確認してみます。

ブログで確認

スポンサーリンク



CAPTCHA


スパム目的の自動投稿の防止としてreCAPTCHAを利用することができます(Googleアカウントが必要)。
次のURLをクリックします。(Googleアカウントのログイン画面が表示されたらログインします。)

https://www.google.com/recaptcha/admin

reCAPTCHAの管理画面が表示されます。


Choose the type of reCAPTCHA?(reCAPTCHAのタイプを選択しますか?)reCAPTCHA V2Validate users with the “I’m not a robot” checkbox. (「私はロボットではありません」チェックボックスを使用してユーザーを検証します。)Invisible reCAPTCHAValidate users in the background.(バックグラウンドでユーザーを検証します。)

ラベル名に任意の文字列を指定し、タイプを選択します
(例は「reCAPTCHA V2」にチェック)

下の「Domains」にWordPressで使用しているブログのドメインを入力します。
「Register」をクリックします。

 
Please accept the terms of service.(規約に同意して下さい)と出るので
チェックをつけたら「Register」をクリックします。


表示されたサイトキーとシークレットキーをメモします。

 キー入力
WordPressのダッシュボードに戻り、「お問い合わせ」メニューの中にある「インテグレーション」をクリックします。

インテグレーション
「キーを設定する」をクリックします

キー
メモしておいたサイトキーとシークレットキーを入力し「保存」をクリックします。


キー入力
確認画面が出て完了です。

確認完了
フォームに設定してみます。

コンタクトフォームの編集画面を開き、「reCAPTCHA」ボタンをクリックします。

フォームに設定
CAPTCHAの設定画面が表示されたら、テーマやサイズを選択します。


「フォーム」に「[recaptcha]」を記述します。(「メール」に記述は必要ないです)。


作成したメールフォームを表示すると次のようにCAPTCHAが表示されます。

 
「わたしはロボットではありません」にチェックをすると、自動投稿かどうかを確認するための画面が表示されます(毎回異なります)。

自動投稿によるスパムなどを予防したい場合に利用します。

ファイル


「ファイル」はメールフォームを使ってファイルを添付して送信できるように設定できます。

ファイル
ファイルサイズの上限 (単位はバイト)や、添付可能なファイルの拡張子を指定できます。

複数指定する場合はカンマで区切ります。


設定できたらフォーム用のコードを「フォーム」に追加します。


メール用のコードを「メール」の「ファイル添付」のところに追加して下さい。
追加が終わりましたら変更内容を保存して下さい。

作成したメールフォームを表示すると次のようにファイル添付用のボタンが表示されます。


お疲れさまでした(^^)
簡単にお問合せフォームが作れることや、自分の好みでカスタマイズができる方法のご紹介でした。
いろいろ試してあなたらしい「お問い合わせ」ページ作ってみてくださいね。

 
前の記事 プラグインContact Form 7で問合せ簡単作成
次の記事 プラグインMaster Post Advertでアドセンス広告をポチッと挿入

WordPress一覧へ




にほんブログ村

日々の出来事 ブログランキングへ

スポンサーリンク




スポンサーリンク




Message

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


夏休みの宿題!工作の材料のおすすめ 低学年向けと高学年向け

子どもの夏休み、たくさん出る宿題のなかでも、なかなかに悩ましい

すだれのつけ方はとても簡単!風対策で固定 目隠し効果もバッチリ

おうちの窓をすだれがおおっているのを見ると夏が来たな~、と感じますね。

バーベキューコンロを自作!簡単に作る方法とおすすめメニュー

夏になるとやりたくなるのがキャンプ場や河原でのバーベキュー! 夏でな

夏バテとは?原因と対処法・予防 快適に夏をすごす予防レシピもご紹介

梅雨があけ本格的な暑い夏がやってきます。 夏と言うと、思いつ

十五夜はお月見のぬりえや折り紙で遊ぼう!無料サイトをまとめて紹介

十五夜にお月見しながらぬりえなんていかがですか?^^ 無料でダウンロ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    ・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に
    走り回りたい・猫を飼いたい・・

    いろいろあるけど、
    まずは資金と自由な時間を確保
    しないと進まない。
    日々どうしたらできるか考えながら
    リアル仕事に追われています。

PAGE TOP ↑