Contact Form 7 初心者向け簡単ガイド
ほとんどの Web サイトには、顧客、潜在的な顧客、定期的な読者が連絡を取る手段が必要です。カスタム連絡先ページが組み込まれたテーマを購入することも、連絡先ページを自分でコーディングしてみることもできますが、これらのオプションは通常、コストがかかるか、複雑になります。そんな時間はありません。そこで、Contact Form 7 をご紹介します。
Contact Form 7 とは何ですか?
Contact Form 7 は、Web サイト用のさまざまな問い合わせフォームを作成するために使用できる無料の WordPress プラグインです。このプラグインは無料であるだけでなく、作成する各連絡先フォームのカスタム ショートコードを使用すると、投稿、ページ、またはウィジェット領域に連絡先フォームを簡単に追加できます。
私たちはこのプラグインを非常に気に入っているため、事実上すべての WPExplorer テーマがこのプラグインをサポートしており、最も売れているプレミアム WordPress テーマ Total さえもサポートしています。互換性のないテーマを見つけるのは難しいため、他の開発者も同意しています。
Contact Form 7 を選ぶ理由?
Contact Form 7 が何であるかは理解できたので、次の疑問は、なぜこのプラグインなのかということかもしれません。素晴らしいコンタクト フォーム プラグインはたくさんありますが、なぜ Contact Form 7 が正しい選択なのでしょうか?
まず第一に、 プレミアム版はないので無料です。そのため、他の「フリー」フォームのプラグインと比較すると、メインのダッシュボードに大量のアップセルが組み込まれていないのは非常に優れています。さらにカスタマイズ可能です。利用可能なパラメータや少しの CSS を使用してフォームを微調整する簡単な方法もあります。また、前述したように、 非常に幅広い無料テーマやプレミアムテーマと互換性があるため、後でテーマを変更することにした場合でも、お問い合わせフォームは機能し続けるはずです。
これを理解したら、WordPress サイトで Contact Form 7 を使用する方法を見てみましょう。
Contact Form 7 の使用を開始する方法
取り付けは簡単です。 [プラグイン > 新規追加] に移動し、検索オプションを使用して Contact Form 7 プラグインを見つけます。プラグインをインストールして有効化します。
アクティブにすると、WordPress ダッシュボードに便利な「連絡先」メニュー項目が表示されるはずです。それをクリックすると、メインの問い合わせフォーム管理ページに移動します。
プラグインの作成者は親切にも、ダッシュボードにいくつかの役立つ情報を含めてくれました。この通知はいつでも自由に無視してください。デフォルトでは、「お問い合わせフォーム 1」の例もすでに用意されています。最初からやり直せるように、このフォームを削除することをお勧めします。
「新規」を追加して最初のお問い合わせフォームを作成します。お問い合わせフォームが開くと、多くのオプションが表示されます。怖がらないでください – 簡単だと約束します。
まず、ページの上部にボックスがあることに気づくでしょう。ここでフォームの名前を変更できます。フォームには、使用する場所や方法など、目的に応じた名前を付けることをお勧めします。
次に、利用可能な設定に進みます。これらをタブごとに見ていきます。
フォーム設定
[フォーム] タブでは、実際にお問い合わせフォームを作成します。 Contact Form 7 では、さまざまなタグを使用してさまざまなフォーム セクションを追加します。デフォルトの連絡フォームには、名前、電子メール、件名、メッセージ、および送信ボタンのフィールドが含まれています。
フィールドを削除するには、そのコードをフォームから削除するだけです。
フィールドを追加するには、利用可能なタグのいずれかをクリックしてコードをフォーム セクションに挿入するだけです。ポップアップが開くので、挿入する前に関連情報を確認できます。
テキスト、電子メール、URL、電話、番号、日付、テキスト領域、ドロップダウン メニュー、チェックボックス、ラジオ ボタン、同意 (条件など)、クイズ、ファイル アップロード、送信ボタンのタグを生成できます。
メール設定
ここで、ユーザーが問い合わせフォームを送信したときに受信する電子メールを変更できます。デフォルトでは、プラグインはサイト管理者の電子メール アドレスを使用しますが、これをサポート用の電子メール アドレスまたは複数の電子メール アドレスに簡単に変更できます。
また、フォームにカスタム タグを追加することを選択した場合は、生成されたショートコード チャンクをメッセージ本文に必ず追加してください。このコードを貼り付けないと、そのフィールドに対してユーザーが送信した回答を受け取ることができません。
「メール 2」オプションを使用すると、メッセージが受信されたことをユーザーに知らせる自動応答を作成できます。または、別の受信者に別のメールを送信したい場合にも使用できます。連絡フォームの完全な情報が含まれる電子メールを受信したいが、サポート スタッフには 1 つまたは 2 つのフィールドが含まれる電子メールのみを受信してもらいたい場合があります。この機能を利用する方法は複数あります。
メッセージ設定
完了した (または未完了の) さまざまなタスクに対してユーザーに表示されるメッセージを編集します。連絡先の送信の成功、検証エラー、誤った形式などのイベント用にカスタマイズされたメッセージを作成できます。
追加の設定
[追加設定] の最後のタブでは、購読者のみ、デモ モード (実際には電子メールは送信されません)、受け入れ検証、メッセージ保存オプションなどに対してさまざまな組み込みオプションを有効にすることができます。 Contact Form 7 の追加設定については、ドキュメントを参照してください。
編集が完了したら、必ず変更を保存してください。
フォームの使用
コンタクト フォームが作成され、使用できる状態になったら、フォームのショートコードをコピーして、ページ、投稿、ウィジェット領域などに挿入できます。ショートコードは、保存すると、コンタクト フォーム作成ページの上部、フォーム タイトルのすぐ下に表示されます (強調表示されます)。次のようになります。
[contact-form-7 id="330" title="Contact Page"]または、WPBakery や Elementor などのページ ビルダーを使用している場合は、関連する Contact Form 7 ビルダー モジュールを使用してフォームを選択し、ページに挿入するだけです。
お問い合わせフォーム 7 の高度なヒント
必要に応じて、ほんの少しのカスタム コードを追加するだけで、Contact Form 7 をさらに豪華にすることができます。ここでは、Web サイトに印象的なお問い合わせフォームを作成するために使用できる、私のお気に入りのトリックをいくつか紹介します。
プレースホルダーテキスト
フォームフィールドに見出しを付けたくない場合や、特定のフィールドに何を入力すべきかをユーザーに示すテキストを追加したい場合もあります。プレースホルダーの追加は簡単です。フィールドからラベルを削除し、次のようにコードの末尾に引用符付きの希望のテキストを角かっこ内に追加するだけです。
[text* your-name "Your Name"]全角入力フィールド
私は個人的に、デフォルトのテキストフィールドが短すぎるのが好きではありません。テキストフィールドの幅を変更するには 2 つの方法があります。詐欺師の方法は、フォームセクションのそのフィールドのコードに必要な文字長幅を単純に追加することです。したがって、300 文字を入力できる全角フィールドが必要な場合は、次のように 300 の後にバックスラッシュを追加します。
[text* your-name 300/ "Your Name"]これを正しい方法で実行したい場合は、次のコードを CSS スタイルシートに追加する必要があります。
input.wpcf7-text { width: 100%; }ただし、これは WordPress インストール全体のすべての Contact Form 7 テキストフィールドに影響します。
WPBakery ページ ビルダーを使用している場合は、これを回避して、特定の投稿またはページの特定の行をターゲットにして、1 つの独立した連絡先フォームのみがスタイルになるようにするオプションがあります。まず行をクリックし、カスタムの行 ID を追加します。それから保存します。
次に、投稿またはページのメイン コンテンツ領域のすぐ上にある歯車アイコンをクリックし、#YOUR-ROW-ID に続いて上記の CSS コードを入力します。
横並びの入力フィールド
もう 1 つの優れたトリックは、フィールドを並べて追加することです。これにより、お問い合わせフォームが非常にクリーンでプロフェッショナルなものに保たれると思います。 Total WordPress テーマでこれを行うために、簡単にカスタム クラスを追加しました。次のように p タグに class=”one-half” を追加するだけです。
<p class="one-half first">[text* your-name "Your Name"]</p>
<p class="one-half">[email* your-email "Your Email"]</p>
<p>[textarea your-message]</p>
<p>[submit "Submit Form"]</p>注: このヒントは Total テーマのユーザーに向けたものですが、他のテーマにも同様のフォーム スタイルが組み込まれている場合があります。
ファンシーメールタグ
場合によっては、ユーザーが送信する以上の情報が必要になることがあります。ここで、Contact Form 7 の特別な電子メール タグが役に立ちます。これらを使用すると、電子メールのタイムスタンプ、送信 IP アドレス、お問い合わせフォームを含む投稿の ID またはタイトルなどを追加できます。これらのツールはすべて、フォームの送信を整理するのに役立ちます。
Contact Form 7 の詳細をご覧ください
Contact Form 7 の使用に関するその他のヒントについては、そのドキュメントを参照してください。ここでは、さまざまなタグとその機能の詳細な説明、プラグイン作成者からの役立つヒント、および何らかの理由でプラグインが機能しない場合のトラブルシューティングに関する役立つ記事を見つけることができます。
Contact Form 7 は、入手可能な最高の無料プラグインの 1 つであり、WordPress Web サイトでお問い合わせフォームを作成するための最良のオプションの 1 つです。このガイドがお役に立てば幸いですが、ご質問がある場合、または Contact Form 7 についてご意見を共有したい場合は、以下にコメントを残してください。