5分で独自のWordPress連絡フォームプラグインを作成する

キーテイクアウト

• 独自のWordPressの連絡先フォームプラグインを開発することで、WordPressの仕組みをよりよく理解し、Web開発スキルを向上させ、不必要な機能なしで特定のニーズに合わせたフォームを作成するのに役立ちます。
この記事では、PHPコードの書き方、フォームに基本的な検証を追加し、フォームデータを送信する方法など、WordPress用のシンプルで非臭素化されていない連絡先フォームプラグインを作成する方法に関する段階的なガイドを提供します。サイト管理者の電子メールアドレス。
結果の連絡先フォームプラグインは、WordPressダッシュボードの「プラグイン」セクションでアクティブ化し、提供されたショートコードを投稿またはページに追加することにより、任意のWordPress Webサイトに簡単に統合できます。
• この記事では、WordPressプラグインディレクトリで利用可能な人気のある無料の連絡先フォームプラグインについても説明します。
• ほとんどのWebサイトは、通常、連絡先フォームが配置されている専用ページを含めることにより、標準のWebプラクティスに準拠するように設計されています。これにより、訪問者はサイトの所有者に簡単に手を差し伸べる方法を提供します。
簡単に言えば、連絡先フォームには、訪問者が記入する一連の質問とフィールドがあります。情報は通常、サイト管理者または別の指名された電子メールアカウントに電子メールで自動的に送信されます。このメールアドレスが訪問者に表示されないことは注目に値するため、連絡先フォームを使用すると、インターネット上の裸のメールアドレスを収穫するボットから電子メールスパムが減少します。連絡フォームは、ユーザーからフィードバック、問い合わせ、その他のデータを収集するために使用されるWebサイトで非常に重要な役割を果たします。

あなたのウェブサイトがWordPressを搭載している場合、あなたのウェブサイトに連絡先フォームをシームレスに統合する多数のプラグインがあります。 この記事では、無料のWordPress連絡フォームプラグインのリストを提供します。また、自分の連絡先フォームを転がすことを検討すべき理由についても説明します。次に、独自のWordPress連絡フォームプラグインを構築する方法を示す短いチュートリアルを提供します。

WordPressお問い合わせフォームプラグイン

開始する前に、WordPressプラグインディレクトリで利用可能な人気のある無料の連絡先フォームプラグインをいくつか説明します。これらは使用するのに最適ですが、独自のプラグインを作成し始めたときから学ぶ方がさらに良いです。 以下は、WordPress用の最も評価されている無料の無料連絡フォームプラグインの一部です。

フォーム7の連絡先 - これは、1800万を超えるダウンロードを備えた2番目に人気のあるプラグインであり、WordPress Webサイトの事実上の連絡先フォームプラグインとみなすことができます。フォーム7の連絡先は複数の連絡先フォームを管理でき、フォームと電子メールのコンテンツを簡単なマークアップでカスタマイズできます。フォーム機能には、Ajax駆動の提出、Captcha、Akismet Spamフィルタリングなどが含まれます。

連絡先フォームへのメール - このプラグインは連絡先フォームを作成するだけでなく、指定されたメールアドレスにデータを送信するだけでなく、連絡先フォームデータをデータベースに保存し、選択したデータを印刷可能なレポートとオプションを提供します。 csv/excelファイル

Formget連絡フォーム - 簡単なオンラインドラッグアンドドロップ連絡フォームビルダーツール。必要なのは、フォームに必要なフィールドをクリックするだけで、数秒以内に連絡先フォームの準備ができています。

BestWebsoft連絡フォーム - Webページまたは投稿にフィードバックフォームを簡単に実装できます。非常に簡単で、プレイできるものがありますが、追加の設定は必要ありません。

なぜあなた自身の連絡先フォームプラグインをロールするのですか？

より良い開発者になる

独自のWordPressプラグインを開発することで、WordPressが「フードの下」の仕組みをよりよく理解することで、より経験豊富なWeb開発者になるのに役立ちます。 WordPressプラグインディレクトリには何万ものプラグインがありますが、他のプラグインを変更および拡張できることは非常に便利なスキルです。 より良いフォームを構築する

多くのWordPress連絡フォームプラグインが肥大化しています。これらには、使用できない多くの機能が含まれています。 JavaScriptおよびCSSファイルの重い使用法は、標準の連絡先フォームプラグインの一部でも一般的です。これにより、WordPressのパフォーマンスに悪影響を与えるHTTP要求の数が増加します。

Yahooのパフォーマンスルールによると：

エンドユーザーの応答時間の80％は、フロントエンドに費やされます。この時間のほとんどは、画像、スタイルシート、スクリプト、フラッシュなど、ページ内のすべてのコンポーネントをダウンロードする際に縛られています。コンポーネントの数を減らすと、ページのレンダリングに必要なHTTP要求の数が減ります。これは、より高速なページの鍵です

あなたが私のようであり、あなたがただ動作するだけの単純な連絡先フォームプラグインを望んでいるなら、読んでください。独自のプラグインを開発する簡単なプロセスをご案内して、さようなら肥大化したプラグインにキスできるようにします。この例では、追加のCSSとJavaScriptファイルは必要ありません。HTML5を使用して行われた検証。

フォームプラグインの開発

にお問い合わせください

5分で、シンプルなWordPress連絡フォームの開発方法を学びます。それは約束です！準備はできましたか？セット？ GO！

すべてのWordPressプルインは、/wp-content/plugins/directoryにあるphpファイルです。この例では、ファイルはsp-form-example.phpと呼ばれます。 FTP/SFTP/SCPまたはSSHを使用してサーバーに接続するのに満足していると思います。

フォローしたい場合は、sp-form-example.phpというファイルを作成するだけです（記事の最後に最終的な完全な例が利用可能になります）：

次に、連絡先フォームhtml：

を含む関数html_form_code（）を追加します

パターン入力属性を介して基本的な検証がフォームに追加されました。

連絡先フォームの正規表現は、次のフィールド検証を行います。

• [a-za-z0-9]：名前フィールドで許可されている文字、スペース、数のみ。特別なシンボルは無効であるとみなされます
  [a-za-z]：件名フィールドでは文字とスペースのみが許可されています。
• 電子メールフォームコントロールは電子メールフィールドを検証するため、パターン属性は必要ありません。
  これがどのように機能するかの詳細については、HTML5を使用したクライアント側のフォーム検証に関する私の記事を読んで、パターン属性がフォーム検証を支援する方法を理解してください。
急いで！

• わかりました、何分残りましたか？ 4分！まだこれをやり直す時間があります。

関数配信_mail（）フォームデータを消毒し、WordPress管理者のメールアドレスにメールを送信します。

フォームデータの衛生は、次のWordPress内部関数によって行われます。

sanitize_text_field（）：ユーザー入力からのデータを消毒します

sanitize_email（）：電子メールで許可されていないすべての文字を取り除きます。

ESC_TEXTAREA（）：

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span></span>

メッセージ

テキスト領域値を逃がします

コードget_option（ 'admin_email'）プログラムでプログラムで、WordPress管理者のメールアドレスをデータベースから取得します。
• 連絡先フォームにメールを管理者に送信したくないですか？変数$を目的のメールアドレスに設定するだけです。

  関数wp_mail（）によるエラーなしで電子メールが正常に処理された場合、テキスト

  私に連絡していただきありがとうございます。応答がすぐに表示されることを期待します。 🎜>が表示されます。
• 1分と30秒の残り
  関数cf_shortcode（）は、連絡先フォームショートコード[sitepoint_contact_form]がアクティブなときに呼び出されるコールバック関数です。
• 上記の関数は、html_form_code（）およびderver_mail（）関数を呼び出して、連絡先フォームhtmlフォームを表示し、フォームデータをそれぞれ検証します。

  最後に、ショートコード[sitepoint_contact_form]がWordPressに登録されます。したがって、単純に追加してください：

  3、2、1…時間が上がる！

おめでとうございます、私たちは独自のWordPress連絡フォームプラグインを成功裏に開発し、以前の約束を果たしました。

ここで、このプラグインをWebサイトで使用するには、WordPressダッシュボードの「プラグイン」セクションの下にアクティブ化してから、投稿またはページを作成してから、フォームを表示したいショートコードを追加するだけです[sitepoint_contact_form] 。

ページをプレビューすると、以下に示すように表示される連絡先フォームが表示されます。

結論

プラグインの構築方法とWordPressサイトに実装する方法をさらに理解するには、以下のコードをコピーし、ファイルに貼り付けて/wp-content/プラグイン/ディレクトリにアップロードします。

プラグイン全体の例：

<span><span><?php </span></span><span><span>/*
</span></span><span><span>Plugin Name: Example Contact Form Plugin
</span></span><span><span>Plugin URI: http://example.com
</span></span><span><span>Description: Simple non-bloated WordPress Contact Form
</span></span><span><span>Version: 1.0
</span></span><span><span>Author: Agbonghama Collins
</span></span><span><span>Author URI: http://w3guy.com
</span></span><span><span>*/
</span></span><span>    <span>//
</span></span><span>    <span>// the plugin code will go here..
</span></span><span>    <span>//
</span></span><span><span>?></span></span></span>

これは単なる簡単な例です。プラグインの開発についてもっと知りたい場合は、さらに推奨される読書をご覧ください。

単純なWordPress Administrationプラグイン（チュートリアル）

• a wordpressウィジェットプラグイン（チュートリアル）
• 公式のWordPress Codexプラグイン開発者のドキュメント
• SitePoint PHPチャンネル
コメントであなたの考えや質問を教えてください。

あなた自身のWordPress連絡フォームプラグインに関するよくある質問（FAQ）

独自のWordPress連絡先フォームプラグインを作成することの利点は何ですか？

独自のWordPress連絡フォームプラグインを作成すると、フォームのデザイン、機能性、およびデータ処理を完全に制御できます。フォームをカスタマイズして、Webサイトの美学に合わせて、特定のニーズに応えるユニークなフィールドを追加し、ビジネスオペレーションに合った方法で収集されたデータを管理できます。さらに、サードパーティのプラグインの必要性を排除します。サードパーティプラグインは、ウェブサイトを遅くしたり、セキュリティリスクを引き起こす可能性があります。 、PHP、HTML、およびCSSの基本的な知識は、WordPress連絡フォームプラグインを作成するために必要です。ただし、このプロセスはガイドで簡素化されており、初心者でもアクセスできます。コーディングに慣れていない場合は、よりユーザーフレンドリーなドラッグアンドドロップインターフェイスを提供するWordPressフォームのビルダープラグインが多数あります。 ？

カスタムWordPress連絡フォームのセキュリティを確保するには、データの検証と消毒、フォームの提出のためのNoncesの使用、Captchaなどを使用したSPAMに対する保護などの測定値を実装する必要があります。テクニック。フォームのセキュリティを維持するためには、定期的な更新と監視も重要です。

WordPress連絡フォームにカスタムフィールドを追加できますか？カスタムフィールドを追加する機能。これは、単純なテキスト入力から、ファイルのアップロード、デートピッカー、またはカスタムドロップダウンなどのより複雑なフィールドにまで及びます。このプロセスには、フォームのHTMLを変更し、PHPコードでデータを適切に処理することが含まれます。

WordPressの連絡先フォームをスタイリングして、Webサイトのデザインに合わせてスタイリングするにはどうすればよいですか？

​​

WordPressの連絡先フォームをスタイリングしてWebサイトのデザインに合わせてCSSを使用して実現できます。フォーム要素にカスタムクラスを追加し、テーマのCSSファイルまたはカスタムCSSプラグインのスタイルを定義できます。これにより、フォームの色、フォント、レイアウトなどを制御できます。ニーズに応じてさまざまな方法で処理されます。データをメールアドレスに送信したり、WordPressデータベースに保存したり、CRM Systemsや電子メールマーケティングプラットフォームなどのサードパーティサービスと統合することもできます。これには、フォームの送信を処理するために追加のPHPコーディングが必要です。

マルチステップのWordPress連絡フォームを作成できますか？コーディング。これには、複数のフォームページを作成し、セッションまたは非表示フィールドを使用してステップ間でデータを管理することが含まれます。マルチステップフォームは、長いフォームを管理可能なセクションに分解することでユーザーエクスペリエンスを向上させることができます。 Google RecaptchaのようなCaptchaサービスと統合。これには、サービスからAPIキーを取得し、必要なHTMLとPHPコードをフォームに追加する必要があります。 captchaは、フォームをスパムや自動提出から保護するのに役立ちます。

レスポンシブワードプレスの連絡先フォームを作成できますか？優れており、すべてのデバイスサイズで機能します。これには、フォーム要素の適切な幅、マージン、およびパディングの設定、メディアクエリを使用してさまざまな画面サイズのスタイルを調整します。 WordPressの連絡先フォームには、問題を識別し、コードをエラーのかどうかを確認し、さまざまな条件下でフォームをテストすることが含まれます。一般的な問題には、フォームが電子メールを送信せず、フォームが正しく表示されない、または保存されていないフォームの提出物が含まれます。問題を解決できない場合は、WordPressコミュニティまたはプロの開発者に支援を求めることを検討してください。

以上が5分で独自のWordPress連絡フォームプラグインを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。