お問い合わせフォーム 7つのWordPress既製スタイル。

入手するのにかかった 美しい形プラグインの場合、フォームは昨日のうちに作成する必要がありますが、座って手動でスタイルを記述するのは非常に困難であり、多くのプロジェクトでは予算内に収まりません。 そこで、CSS コンタクトフォームを素早く設定できる興味深いプラグインを探してみました。

全員が満場一致で (これは検索エンジンにも当てはまります)、賢明な人々はこう言いました - CSS を編集し、誰もだまさず、メモ帳を手に取り、先に進むことを推奨しました。 将来を見据えると、賢明な人々は正しかったのです。

しかし、好奇心が勝り、プラグインをさらに詳しくテストすることになり、以前にも試してみましたが、非常に鈍くて不便に思えました。 このプラグインは 11 か月間更新されていませんでした。これは悲しいことです。 6,000 人を少し超えるウェブマスターが危険を冒してフォームを彼に預けましたが、これもそれほど多くはありません (そのうち私は彼を 4 ～ 5 回ダウンロードしました)。

インストール後、管理者メニューのルートに「連絡先スタイル」セクションが作成されます。 このセクションには、バレンタインデーやクリスマス用のテンプレートと、フォーム出力を完全にカスタマイズできる「カスタム スタイル」を含む 2 つのアイテムがあります。 実際、最も興味があるのは「カスタム スタイル」セクションで、利用可能な設定の詳細は次のとおりです。

「一般設定」 - 背景色、形状の幅 (px で設定、% は試していない)、境界線の太さ、形状 (点線、実線など)、色、丸めを定義できます。

「入力とラベルの設定」 - 入力フィールドの背景、入力フォントの色、フォント (リストは大きくなく、キリル文字はほとんどありません) とそのサイズ。 フィールドの境界線の色、スタイル (実線の点線など)、太さ、丸め。 フォントとそのサイズを入力します。 ピクセル単位のマージンパラメータ - 高さ/幅、パディング。 ラベルのフォント、スタイル、サイズ、色。

「送信ボタン設定」 – フォーム送信ボタンの設定。 使用可能な設定は、ボタンのサイズ、丸め、色、境界線の種類、境界線の色です。

使用上の問題。

設定を確認した後、すべてが非常に良好であるという結論に達することができます。実践ではその逆が示されました。 本当にたくさんの設定がありますが、それだけでは十分ではありません。フォーム内にはインデント設定がないため、すべてのブロックはフォームの端に近い左側の境界線に集められます。 奇妙な「デフォルト」設定 - 入力フィールドは 100*100 ピクセルです。 フィールド サイズを正しく設定すると、ドロップダウン リストには影響せず、メイン テーマのスタイルが適用されます。 プラグインをアンインストールする前に元の設定にリセットすることはできませんでした...

これまでのところ、スタイルを手動で変更する以外は、多かれ少なかれまともに機能していません...奇跡は起こりませんでした。

重要な注意点！プラグインは最近更新され、設定が大幅に変更されたため、確認してテストする必要があります。

Contact Form 7 は複数のコンタクト フォームを管理でき、非常にシンプルなレイアウトでフォームとメールのコンテンツを柔軟にカスタマイズできます。 フォームには、Ajax 送信、CAPTCHA、Akismet スパム フィルターなどのサポートが組み込まれています。

ドキュメントとサポート

スクリーンショット

インストール

  1. contact-form-7 フォルダー全体を /wp-content/plugins/ ディレクトリにアップロードします。
  2. WordPress ダッシュボードの「プラグイン」ページからプラグインをアクティブ化します。

WordPress コンソール メニューには、「フィードバック」タブがあります。

プラグインの正しい使用方法を学ぶには、そのホームページにアクセスしてください。

参加者と開発者

Contact Form 7 はオープンソース プロジェクトです。 次の貢献者がプラグインの開発に貢献しました。

参加者

変更履歴

詳細については、「リリース」を参照してください。

5.1.3

  • 「メール」タブでオプションの選択を解除できなくなるバグを修正しました。

5.1.2

  • 一定の連絡先: 連絡先リスト セレクターが導入されました。
  • 定数接触: 追加設定 constant_contact が導入されました。
  • reCAPTCHA: wpcf7_recaptcha_actions および wpcf7_recaptcha_threshold フィルター フックを導入しました。

5.1.1

  • reCAPTCHA: 応答を空の応答トークンに変更します。

5.1

  • 統合モジュール Constant Contact が導入されました。
  • reCAPTCHA モジュールが更新され、reCAPTCHA v3 をサポートするようになりました。
  • ダークモードスタイルのルールを追加します。

5.0.5

  • WPCF7_FormTag クラスの get_data_option() と get_default_option() の間の不一致の問題を修正しました。
  • unlink() を呼び出すときに発生する PHP エラーを抑制します。
  • UPLOADS 定数をサポートするために wpcf7_is_file_path_in_content_dir() が導入されました。

5.0.4

  • register_post_type() 呼び出しで power_type 引数を明示的に設定して、不正な権限昇格の問題を修正します。
  • ローカル ファイル添付 - wp-content ディレクトリの外にあるファイルへの絶対パスを指定することは禁止されています。
  • Configuration Validator - 誤った添付ファイル設定を検出するためのテスト要素を追加します。
  • の JavaScript 下位互換性機能のバグを修正しました。 古いブラウザ、HTML5 プレースホルダー属性はサポートされていません。
  • 同意チェックボックス - フォームタグの保存禁止機能を無効にします。

5.0.3

  • CSS: 「無効」状態の送信ボタンに「許可されていない」カーソル スタイルを適用します。
  • 承認チェックボックス: 個人データ保護の観点から、より良いオプションの使用を奨励するためにタグ生成 UI を改訂します。
  • wpcf7_anonymize_ip_addr() 関数を導入します。
  • すべてのフォームタグタイプにconsent_for:storageオプションが導入されました。

5.0.2

  • readme.txt ファイルにプライバシー通知セクションを追加しました。
  • 情報メタボックスのコンテンツを更新しました。
  • より適切な場合は、get_locale() の代わりに get_user_locale() を使用してください。
  • 承認チェックボックス: 送信が成功した後、送信ボタンの無効なステータスをリセットします。

5.0.1

  • _n() の誤った使用法を修正しました。
  • 構成の検証: [追加設定] タブ パネルの誤ったアラート数を修正しました。
  • 構成の検証: From メール ヘッダー フィールドの [_site_admin_email] 特別なメールタグの不適切な処理が修正されました。
  • 承認チェックボックス: 指定された class 属性と id 属性は、間違った HTML 要素に適用されました。
  • 構成の検証: Cc や Reply-To などのメールボックスに追加のメール ヘッダーがあり、空の値が含まれる可能性がある場合、「無効なメールボックス構文が使用されています」エラーが返されます。
  • 意図しないパラメータ値が渡されるのを避けるために、add_action() の 4 番目のパラメータを明示的に指定します。
  • ディレクトリを削除する前に、ターゲット ディレクトリが空かどうかを確認してください。

5.0

  • 追加の設定: on_sent_ok と on_submit が削除されました。
  • 新しい追加設定: Skip_mail
  • Flamingo: 対応するお問い合わせフォームのタイトルの変更に伴い、インバウンド チャネルのタイトルも変更されます。
  • DOM イベント:event.detail.apiResponse プロパティを通じて API 応答オブジェクト全体にアクセスできるようにします。
  • HTML メール: HTML ヘッダーに言語関連の属性を追加します。
  • ファイルのアップロード: アップロード フィールドに accept 属性を設定します。
  • WPCF7_MailTag クラスを導入します。
  • wpcf7_before_send_mail アクション フックを使用してメール送信の試行を中止できます。 さらに、アクション インターセプターを介してカスタム ステータスとメッセージを設定できます。
  • 承認チェックボックス: フォームタグのコンテンツ部分に条件ステートメントを指定できるようにします。
  • 承認チェックボックス: オプションのオプションをサポートします。
  • 新しい特別なメール タグ: [_site_title]、[_site_description]、[_site_url]、[_site_admin_email]、[_invalid_fields]、[_user_login]、[_user_email]、[_user_url]、[_user_first_name]、[_user_last_name]、[_user_nickname]、および[_user_display_name]
  • 新しいフィルターフック: wpcf7_upload_file_name、wpcf7_autop_or_not、wpcf7_posted_data_($type)、および wpcf7_mail_tag_replaced_($type)
  • 新しいフォームタグ機能: ゼロコントロールコンテナーと非メール対応

お問い合わせフォームプラグインを使用します。 しかし、時間が経つにつれて、このプラグインの機能は明らかに十分ではなく、最大の欠点はフォームを 1 つしか作成できないことであることが理解されるようになりました。 フィードバック.

実際には問題はないようです。 ただし、Web サイト所有者の中には、複数のフィードバック フォームを必要とする人もいます。フィードバック フォームは、「フィードバック」または「連絡先」ページだけでなく、他のページや投稿にも配置できます。

このチュートリアルでは、別のプラグインを使用してフィードバック フォームを作成する方法を説明します。これは、前回の投稿で説明したプラグインよりも機能的で、少し複雑です。 始めましょうか？

プラグインの説明

Contact Form 7 プラグインを使用すると、さまざまなフォームを作成して結果を電子メールの受信トレイに送信できます。 絶対にすべてをカスタマイズできます - 外観フォーム、フィールドの順序、碑文の名前、電子メッセージの形式、応答受信者の選択。 一般に、このプラグインは非常に機能的でクールです。

さらに、スパム対策保護のために Akismet プラグインを接続して実装し、多言語機能を使用することもできます。 私の意見では、これはクールです！ :-)

Contact Form 7 プラグインのインストール

プラグインはWordPressの標準的な方法でインストールされます。 「プラグイン」-「新規追加」セクションに移動し、「Contact Form 7」という名前を入力してリポジトリからインストールします。 インストール後はすぐにアクティベートすることを忘れないでください。

Contact Form 7 のセットアップ

プラグインを有効にすると、WordPress メイン メニューに新しい項目「連絡先 (CF7)」が表示され、これがフィードバック フォームを設定する主な場所になります。 フォームの数は無制限です。

既存のフォームのリストは、「お問い合わせフォーム」セクションでご覧いただけます。

ここで、目的のショートコードをコピーしてページまたは投稿に貼り付けることができます。

新しいフィードバック フォームを追加する

ご覧のとおり、メニューには特別な追加項目はないので、フィードバック フォーム自体の作成に進みましょう。 これを行うには、メインメニューで「新規追加」項目を選択します。

まず、作成するフォームのインターフェース言語を選択するように求められます。 WordPress はサイトにインストールされているバージョンを検出し、それをデフォルトとして選択するように求めます。

ただし、リストから使用可能な言語を選択できます。

「新規追加」ボタンをクリックすると、フォームデザイナーが表示されます。

フォームの名前を変更する

まず、フォームが多すぎるときにリスト内で迷子にならないように、フォームの名前を入力する必要があります。 これを行うには、画面の上部にある「タイトル」という単語をクリックするだけです。

この後、テキストフィールドが表示され、名前と説明を入力します。

ページが更新されると、次のメッセージが表示されます。

提案されたショートコードをコピーして、必要なページに貼り付けることができます。
ただし、これはフォームを設定した後で行うことができます。 選択はあなた次第です。

フォームテンプレートの変更

フォーム テンプレートは、フォームの外観を定義するプレーン HTML コードです。 デフォルトでは、4 つのフィールド (名前、電子メール、件名、メッセージ) とフォーム送信ボタンが含まれています。 次のようになります。

コードをカットアンドペーストするだけで、ブロックを交換できます。
たとえば、電子メール アドレス フィールドと顧客名を交換できます。

または、「件名」フィールドを削除して、フォームに表示されないようにすることもできます。 これを行うには、テンプレート内の対応するテキスト ブロックを削除するだけです。

要素コードの横にあるアスタリスクは、このフィールドが必須であり、クライアントが何らかの値を入力するまでフォームは送信されないことを意味します。

フォームに新しいフィールドを追加する方法

Web サイトのアドレスを含むフィールドを標準フォームに追加する必要があると想像してください。 このプラグインのフォーム デザイナーを使用すると、問題なく計画を実装できます。 「タグを生成」ボタンを使用するだけです。

クリックすると、追加可能なフィールドの膨大なリストが表示されます。

必要な作業は、必要なフィールドのタイプを選択し、いくつかの簡単な手順を実行することだけです。

心配しないでください。 設定は難しそうに見えますが、実際は非常に簡単です:-)

「必須フィールド」チェックボックスを使用すると、追加のチェックを設定できます。このフィールドが空のままであるか、値が正しくない限り、フォームは送信されません。 ほとんどすべてのフィールド タイプには次の設定があります。

さらに、フォーム フィールドの多くは同じ名前設定、要素 ID、CSS クラスを持っており、これらのフィールドの外観を変更できます。 それらはほぼすべての分野に存在します。

「名前」フィールドは最も重要で、フォーム テンプレートとレター テンプレートの両方で使用されます。

ただし、このプラグインを使用している間、これらの属性の値を変更または設定する必要はありませんでした。 おそらくそれも必要ないでしょう。 しかし、私は彼らに伝えて紹介しなければなりません:-)

フォーム コンストラクターのすべてのテキスト フィールドには、フィールド自体のサイズと値の最大長を備えた追加フィールドがあります。それらは次のとおりです。

また、URL や通常のテキストフィールド以外のフィールドなどの特定のフィールドには、独自の特別な設定があります。 たとえば、URL フィールドには追加の設定があります。

すべての設定を完全に考慮するわけではありません。 それらは多すぎて、各フィールド タイプに固有です。 突然、この情報がまだ必要な場合は、この投稿のコメントにそれについて書いてください。設定の追加レビューを準備します。

次に、このフィールドのコードをフォーム テンプレート フォームに追加する必要があります。
これを行うには、提案されたコードをコピーして、左側のフォームに貼り付ける必要があります。

たとえば、クライアント名の後に Web サイトのアドレスを含むフィールドを配置したいとします。 他のフィールドと同様のコードを入力する必要があります。つまり、段落と改行を追加し、この新しいフィールドのショートコードを挿入します。

このフィールドの値を電子メールで送信するには、この値をコピーする必要があります。

そして、「電子メール テンプレート」の下のテキスト フィールドに貼り付けます。

他のフィールドも同様に追加されます。 すべてがシンプルかつ明確です:-)

宛先と手紙のテンプレート

次に、メッセージを送信するときに考慮される設定を見てみましょう。 この場合、これは受信者 (ほとんどの場合あなた) であり、メッセージの送信後に指定された電子メール アドレスに送信されるレターのテンプレートです。

まず、フォームからの電子メール メッセージの送信先となる受信者を指定する必要があります。 デフォルトでは、WordPress 設定の電子メール アドレスがここに挿入されます。

これらのフォームでは、 、 などの理解できないコードが使用されていることにすでにお気づきかと思います。 つまり、これは上で説明したフィールド ジェネレーターの「名前」フィールドと同じです。

さて、あなたがしなければならないのは、レター自体のテンプレートを整理することだけです。

[タグの生成] ボタンを使用して自動的に作成したすべてのフィールドを使用することも、設定を何も変更していない場合は標準フォームのままにすることもできます。

追伸 このプラグインの設定には、メッセージの 2 番目の受信者を指定するというかなり興味深い機会があります。 正直なところ、なぜこれが必要なのかはすぐには思いつきませんが、チャンスがあるので、いずれにしても誰かがそれを利用するでしょう。

メッセージの設定

さて、通知や碑文のテキストを変更できない場合、これはどのようなメッセージ送信プラグインなのでしょうか? Contact Form 7 プラグインも例外ではありません。 テキストやエラー メッセージを翻訳できます。

既知の問題点

電子メールや URL などの標準以外のコントロールを使用すると、ページ上の個々の要素の外観が異なる場合があります。 たとえば、フォーム自体の「Web サイトのアドレス」フィールドに注目してください。

見ませんでしたか？ そして、もっと近くでお見せします。

一般に、問題は、そのようなフィールドの外観が標準のテキスト フィールドと視覚的に異なることです。 「あなたの名前」フィールドと比較すると、すぐにすべてがわかります。

ここで考えられる解決策は 2 つあります。 まず、テーマの style.css ファイルに適切なスタイルを追加するか、フォーム テンプレートで URL の種類をテキストに変更すると、すべてがうまくいきます。

結論

フィードバックフォームの作り方の検討は完全にクローズドと考えていいと思いますし、このテーマ自体は上下に検討されています。

もちろん、成功しなかったり、他の同様のプラグインを検討することを提案したい人もいることは間違いありません。 いつでも喜んで質問や提案をさせていただきます! コメントでお気軽に質問してください:-)

資料について私に感謝したい場合は、ここで行うことができます :-)

エラーを見つけた場合は、テキストの一部をハイライトしてクリックしてください。 Ctrl+Enter.