*

問合せフォーム簡単作成のカスタマイズ Contact Form 7-

公開日: : 最終更新日:2020/12/02 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 ↑