簡単なフィードバック フォームを作成します。 PHP でフィードバック フォームを作成します。 HTML でフィードバック フォームを簡単にインストール

03.02.2024

HTML と CSS でフィードバック フォームを作成する手順、既製のフォームのコレクション、およびそれらの接続と設定のガイド。

ナビゲーション

今日では、プログラミングのスキルさえ持たない人でも、既製のテンプレートをインターネットからダウンロードし、使用しているエンジンにインストールするだけで、簡単に独自の Web サイトを作成できます。

ただし、既製のテンプレートのすべてがユーザーの要件を満たすことができるわけではありません。 それらの多くは「生の」形式で表示されており、フィードバック フォームなどの重要なセクションや機能がありません。

このサイトブロックは、オンラインストアや大規模な情報ポータルの所有者にとって非常に重要です。 この記事では、フィードバック フォームを自分で作成する方法、既製のテンプレートをダウンロードする場所、Web サイトにインストールする方法について説明します。

図 1. フィードバック フォームとは何ですか?なぜそれほど必要なのでしょうか?

フィードバック フォームとは何ですか? なぜそれほど必要なのでしょうか?

  • まともなウェブサイトの最も重要な機能の 1 つは、お問い合わせフォームです。 これは、訪問者とリソース管理者の間の対話に役立ちます。 したがって、その助けを借りて、テクニカルサポートにリクエストを書いたり、必要なデータを管理に送信したりできます。 たとえば、オンライン ストアでの支払いの詳細や注文した商品の名前などです。 ポータルの開発を成功させるには、訪問者やクライアントとの継続的な連絡が重要であるため、ポータルにこのようなフォームを設置することを強くお勧めします。

フィードバック フォームは別のページまたはブロック (部門) であり、いくつかのテキスト入力フィールドと [送信] ボタンで構成されます。 通常、標準フォームには次のフィールドがあります。

HTML と PHP で Web サイト用の簡単なフィードバック フォームを作成するにはどうすればよいですか?

この記事が本格的な退屈な教科書にならないように、マークアップ言語の基本をすでに理解していることを前提とします。 HTMLそしてそれがどのように機能するかについての一般的なアイデアを持っています。 そのようなスキルがない場合は、フォームの作成を開始する前に、無料のリソースで知識を少しブラッシュアップすることを強くお勧めします。 htmlbook.ru。 そうしないと、このアイデアを放棄するだけでなく、既存の Web サイトのコードが台無しになる可能性があります。

機能するフィードバック フォームを再作成するには、3 つの重要な要素が必要になります。そのうちの 1 つはフォームのレイアウトと構造を担当します ( HTML)、外観デザインの 2 番目 ( CSS)、3 番目はデータ処理と送信用 ( PHP)。 順番に始めましょう:

フィードバック フォームの HTML コードの作成

  • ステップ1。 形状を示すには HTMLタグが使用されています
    。 その中で、サイズ、スタイル、その他のフォームの重要なプロパティが指定されます。 タグ自体を記述するときは、タグに指定するクラスを割り当てる必要があります。これは、後でフォームにタグを設定するのに役立ちます。 CSSスタイル。

  • ステップ2。 次に、タグ内にフォームの最初のフィールドを作成します。
    ブロックタグを書く必要があります

    、新しい行の作成を担当します。

  • ステップ3。 タグの内側

    新しい行に次のタグを入力します。 名前 。 彼は将来のフォームフィールドの名前を担当します。

  • ステップ4。 新しい行からはすべてが同じタグ内にあります

    次の値を使用してフィールド作成タグを作成します。 あなたの名前を入力してください » 必須\>。 パラメータ「 type="テキスト""" はテキストフィールドのタイプを指定し、パラメータ" プレースホルダー=あなたの名前を入力してください «» このテキストフィールドに最初のテキストを設定します。 パラメータ「 必須» は、サイト訪問者に対して、このフィールドへの入力が必須であることを明確にします。 その結果、以下のスクリーンショットに示すように、フィールドが 1 つあるフォームが作成されます。

  • ステップ5。 上記の例を使用して、毎回タグで始まる必要な残りのフィールドを追加します。

    。 フィールドにテキストメッセージを設定するには、タグを使用します 。 オプション」 コル" そして " " はテキストフィールドの幅と高さを担当します。 好みのパラメータを設定できます。 以下のスクリーンショットに示されているものと同様のものが得られるはずです。

  • ステップ6。 現在インターネット上にボットが大量に存在するため、ボットから身を守るには、次のタグを使用して別の行を作成します。 。 パラメータのせいで「 style=”表示:なし” 「このフィールドは単なる人間には見えませんが、ボットによって自動的に入力されます。 したがって、生きている人物とプログラムを常に区別できます。

  • ステップ7。 マークアップの最終段階では、送信ボタンを作成します。 タグはこれに使用されます 。 スクリーンショットに示されているのと同様の結果が得られるはずです。

カスケード スタイル シート (CSS) の操作

  • マーキングのプロセス中にすでにお気づきかと思いますが、非常に曲がった、目立たない、不快なものが完成しました。 フィードバック フォームを多かれ少なかれきちんとした外観にするために、1 つの言語を使用します。 HTML十分ではないでしょう。 この目的のためには、スタイルを使用する必要があります。 CSS.
  • リソースに関する基本的なスキルを向上させるためのアドバイスを受け入れた場合 htmlbook.ruを使用して、フォームのすべての部分に特定のデザイン パラメータを設定します。 CSSそれはあなたにとって難しいことではありません。 これらすべてをいじくり回す意欲や時間がない場合は、既製のコードを提供し、それを接続する方法を説明します。

スタイルを接続する CSSHTML次の 2 つの方法で実行できます。

  • カスケード テーブル ファイルのコードをファイルの一番下にコピーします。 スタイル.css、ホスティングしているサイトに存在します
  • スタイルファイルをホスティングに移動して接続します

ファイル スタイル.cssタグ内で接続します スクリプトを使用する 。 スタイルを含むファイルがメインの HTML ファイルと同じフォルダーにない場合は、そのファイルへのパスを指定する必要があります。 スタイル ファイルでは、各要素に指定があります。 必要に応じて、基本的なプログラミング スキルにのみ基づいて、パラメーターを自分で変更できます。

PHPファイルの接続と設定

先ほども述べたように、スクリプトは PHPフィードバックフォームの実行を担当します。 ただし、言語がどのように機能するかを多かれ少なかれ理解するには、 PHP、大量の文献を読み、かなりの時間をかけて練習する必要があります。 したがって、次の場合と同様に、 CSS、PHP スクリプトを含む既製のファイルが提供されます。これをフォームのドキュメントに添付するだけで済みます。

ファイルとは異なります スタイル.css、PHP スクリプトを含むファイルはフォーム自体のプロパティに添付されます。 順番に始めましょう:

  • ステップ1。 前に作成したコードを開いて、open form タグを含む行を見つけます。 それにプロパティを追加します。」 アクション="コンタクトフォーム.php"" そして " メソッド = "投稿"」 スクリーンショットの例を参照してください。

  • ステップ2。 php ファイルをダウンロードし、フォームを含む html ドキュメントが配置されているのと同じフォルダー内のホスティングに配置します。 したがって、php ファイルと html ファイルは相互に対話します。

  • ステップ3。 次に、スクリプトを自分用にカスタマイズする必要があります。 ファイルを開いて変数を設定し、HTML スクリプト内と同じ名前を付けます。 フォームにフィールドを追加した場合は、スクリーンショットに示されているとおりに、それらを PHP スクリプトに正確に追加します。

  • ステップ4。 次に、電子メール アドレスとメールボックスに表示されるレターの件名を含む変数をさらに 2 つ追加する必要があります。 変数を含む行で「 $アドレス「メールアドレスを「」の行に入力してください $sub» スクリーンショットに示されている電子メールの件名。
  • ステップ5。 変数を含む行で「 $mes» 電子メールで受け取るレターの形式をカスタマイズします。 そのまま書き直すことも、好みに合わせて編集することもできます。

  • ステップ6。 他のすべての行はメッセージの送信を担当し、ボットから保護するための設定が含まれているため、変更しないでおく必要があります。 最終的に、完全なコードは以下のスクリーンショットのようになります。

すべての手順を完了すると、このシンプルできちんとしたフィードバック フォームが届きます。

さまざまな目的に適した、HTML および CSS による美しいデザインのフィードバック フォームのセレクション

  • 上記の手順に基づいて、自分の好みに合わせてフィードバック フォームを簡単に「描く」ことができます。 ただし、自分でフォームを一から作成する時間がない場合や、基本的なスキルがあれば、インターネット上で既製のデザイナー フォームを見つけることができます。 HTMLニーズに合わせて編集してください。

  • 少し検索した結果、以下のセレクションを見つけました。 35 美しいポップアップデザインのフィードバックフォーム HTMLそして CSS。 これらの形式は、次のようなエンジンに適しています。 ワードプレスそして ジョームラ、コントロール パネルからのシンプルかつ簡単なセットアップが可能で、エンジンのないサイトにも最適です。

ビデオ: WordPress サイトのポップアップ フィードバック フォーム

著者より:こんにちは、友達。 この記事は、ページをリロードせずにフォームデータをサーバーに送信する実装を実装した続きになります。 ここではこのトピックを継続し、サーバーでデータを受信し、フォームを電子メールに送信する方法を学習します。 そこで、フィードバック フォームを設定し、電子メールで送信できる機能を追加しましょう。

現在の記事のソース ファイルは からダウンロードできます。

このレッスンでは、すべてをできるだけ簡単に自分たちで行います。 具体的には、メールを送信するには、これまでメールの送信によく使われていた mail() という特別な PHP 関数を使用します。

まずはメール関数の構文から始めましょう。 この関数には 3 つの必須パラメーターと 2 つのオプション (必須ではありません) があります。 必須パラメータ:

to — 受信者の電子メール (カンマで区切って複数のアドレスを指定することもできます)。

subject — 手紙の件名。

メッセージ — 手紙のテキスト。

オプションのパラメータのうち、ほとんどの場合、最初のパラメータのみが使用されます。これは、エンコーディング、送信者、レター タイプなどのレター ヘッダーを担当します。

この機能を使って手紙を送ってみましょう。 これを mail.php ファイルで行い、フォームからデータを受け取ります。 このファイルの新しいコードは次のようになります。

メッセージは送信されました

"; )else( エコー "

エラー!

"; }

< ? php

$to = " [メールで保護されています]" ; // 受信者のアドレス

$件名 = 「折り返し電話をしてください」; // メールの件名

$メッセージ= "名前: ($_POST["名前"])\r\n"; // テキストに名前を追加します

$メッセージ。 = 「電話番号: ($_POST["電話"])」; // 電話番号をテキストに追加します

$ヘッダー。 = 「コンテンツタイプ: text/plain; charset=utf-8」。 "\r\n" ; // エンコーディングを設定する

$ヘッダー。 = "から: [メールで保護されています]" . "\r\n" ; // 送信者を追加

if (メール ($to, $subject, $message, $headers)) (

エコー "

メッセージは送信されました

" ;

) それ以外 (

エコー "

エラー!

" ;

これは、送信用のメッセージを生成できる最小限のコードです。 どのように動作するかを確認してみましょう:

ご覧のとおり、コードは機能し、応答として手紙が送信されたことを示すメッセージを受け取ります。 ローカルサーバーで作業しているため、レターは実際には mail() 関数によって送信されず、特別なフォルダーにテキスト ファイルとして保存されます。 Open Server では、これは \userdata\temp\email\ フォルダーです。 このフォルダーを開いて、手紙がそこにあることを確認してみましょう。次のようになります。

素晴らしい! JS スクリプト内で修正しても差し支えない部分がいくつか残っています。 たとえば、メッセージをプレーン テキストではなく HTML コードで表示し、メッセージの送信後にフォーム フィールドをクリアする必要があります。 最終的な JS コードは次のようになります。

$(function())( $("#recall").submit(function(e)( e.preventDefault(); var data = $(this).serialize(); $.ajax(( url: "メール。 php "、タイプ: "POST"、データ: データ、beforeSend: function())( $("#submit").next().text("Sending..."); )、成功: function(res) ( $ ("#recall").find("input").val(""); $("#submit").next().html(res); error: function())(alert("Error ! "); ))); )); ));

$(関数()(

$("#recall" ) 。 submit(関数(e)(

e. 防止デフォルト();

var data = $(this) 。 シリアライズ();

$。 アヤックス ((

URL: "mail.php" 、

タイプ:「ポスト」

データ: データ、

beforeSend : function () (

$("#submit" ) 。 次()。 text ("送信中..." ) ;

今では、フィードバック フォームのない Web サイトを想像するのは困難です。

したがって、リソースに連絡先セクションがない場合は、それをインストールする必要があります。 これを行う方法を考えてみましょう。

フィードバックを整理するためのソリューション

当然のことながら、現在では、PHP のユニバーサル スクリプトから CMS のプラグインやモジュールに至るまで、Web サイト上のフィードバックを整理する方法がいくつかあります。 つまり、ご覧のとおり、コードを手動で記述する必要はありません。

次の汎用ソリューションを使用できます。

  • 問い合わせフォームの HTML コードを自動的に生成する無料のオンライン サービスを利用してください。 ただしこの場合、PHP 処理ファイルを個別に作成してインストールする必要があります。 これらの目的のためのリソースの 1 つをここに示します
  • HTML コードを生成し、PHP でデータ プロセッサを提供する無料のオンライン サービス (多くの場合、これらのサービスのサーバーでホストされています) に助けを求めてください。 そのようなリソースの一例
  • フィードバック フォームを設定するための無料のスクリプトをインターネットで見つけます。 このオプションは、HTML と PHP をある程度のレベルで知っている人に適用できます。いずれの場合でも、スクリプトを自分のサイトに合わせて調整する必要があるためです。

ただし、多くの場合、ユーザーは Web サイト開発に関する広範な知識を必要としません。ソリューションの汎用性と幅広い選択肢により、上記の方法のいずれかを使用して希望の形式のフィードバックを設定できます。

HTML でフィードバック フォームを簡単にインストール

キャプチャ付きの HTML フィードバック フォームを作成してインストールするための一般的なプログラムの 1 つを考えてみましょう。 たとえば、この Web サイトでは、それらの幅広いセレクションが紹介されています。 サイトはロシア語で、選択は簡単で、インストール自体は 3 分もかかりません。

ただし、最初に、標準の config.php ファイルを修正することを忘れないでください。エンコーディングを変更し、受信者の正しい電子メール アドレスを記述する必要があります。

修正されたファイルを含むフォルダーをサイトのルート ディレクトリにコピーする必要がありますが、その前に、Robots.txt ファイル内のインデックス作成を制限します ( 禁止: /sendmail-zakz).

基本的にはこれですべてです。手順が正しく完了すると、完成したフォームは次のようになります。

PHP サポートを必要としないフィードバック フォーム ビルダーがあります。 そのうちの 1 つを考えてみましょう。 リンクをクリックすると、目的のフォームを作成するための設定を行うウィンドウが表示されます。

必要なパラメータをすべて入力したら、検証キャプチャを入力し、「生成」ボタンをクリックしてから「コードを取得」をクリックする必要があります。

結果のコードをサイトの選択したページにコピーするだけです。

簡単な問い合わせフォームを自分で作成することもできます。 これを行うには、form.php ファイルを作成し、次のコードをそのファイルに保存する必要があります。

フォームが機能するには、ハンドラー ファイルが必要です。 これを mail.php という名前にして、次のコードに保存します。

Joomla のフィードバック フォーム

この非常に汎用的な管理システムでは、連絡先コンポーネントを使用してフィードバック フォームを構成できます。 非常にシンプルですが、その機能はフォームの通常の操作には十分です。

したがって、コンポーネントを設定するには、管理パネルに移動し、「コンポーネント/連絡先/連絡先カテゴリ」タブを選択します。

カテゴリのないページが開きます。 作成するには、「新規」ボタンをクリックします。

「タイトル」と「ニックネーム」フィールドに入力するように求められます。 これを完了したら、「公開済み」行の「はい」ボックスをチェックする必要があります。

設定は、ウィンドウの右上隅にある同じ名前のボタンをクリックして保存する必要があります。 カテゴリがあれば、あとはお問い合わせフォームのあるページを作成するだけです。 これを行うには、「連絡先」タブに移動し、右上隅にある「新規」ボタンをクリックします。

表示されるダイアログボックスに必要事項を入力します。 「名前」欄と「ニックネーム」欄は必ずご記入ください。 「公開済み」行の「はい」ボックスにチェックを入れ、この連絡先のカテゴリを指定します。 少し下に移動すると、「ユーザーとの連絡先」ウィンドウが表示されます。ここで、メッセージを受信する連絡先担当者を指定する必要があります。

「情報」フィールドにも入力する必要があり、Web サイト上のフォームの位置と受信者の電子メール アドレスを指定する必要があります。 残りのメニュー項目は必要に応じて入力できます。

フィードバック フォームの設定が完了したら、あとはそれを Web サイトに配置するだけです。 これらの目的のために、管理パネルに移動し、「メニュー」タブを選択して項目を表示する場所を決定する必要があります。

このメニューに新しい項目を作成します。 これを行うには、「作成」ボタンをクリックし、開いたメニューで「連絡先/連絡先ページ」を選択します。

ページが開き、メニュー項目の名前を設定し、そのエイリアスを入力し、反映を有効にし、「連絡先の選択」メインパラメータフィールドで、このメニュー項目がリンクされる連絡先情報を指定する必要があります。 設定を保存します。

サイトにアクセスし、「連絡先」項目を見つけてクリックします。 次のページが開きます。

WordPress へのフィードバック

このシステムでは、プラグインを使用してフィードバックフォームを作成できます。 最も人気があり機能的なのは Contact Form 7 プラグインです。

この後、「ページ/新規追加」タブに移動し、HTML モードをオンにして、以前にコピーしたフィードバック フォームのコードを貼り付ける必要があります。


ブログ サイトの読者の皆さん、こんにちは。 今日は、ウェブマスターが訪問者やクライアントとの便利なコミュニケーションを組織するために必要となる、フィードバック、注文、連絡先、その他の種類のフォームを作成する方法について話したいと思います。

Joomla と WordPress を使用する場合、フィードバックや順序の問題はさまざまな拡張機能やプラグインを使用して解決できることは明らかですが、純粋な HTML 上で構築されたプロジェクト、またはスクリプト、CMS、デザイナーなどを使用して構築されたプロジェクトに適した方法があります。フォームジェネレータのフィードバック)。

ただし、Php サポートを必要としないソリューションもあり、それについてもこの記事で説明します。 これは現在インターネット上で見つけることができる利用可能なオプションの概要にすぎないため、この記事ではインストールと構成について特に詳細な説明は行いません。

フィードバック システム (できればオリジナルで美しく、機能的なもの) の作成例を、その説明と例が記載されたページへのリンクとともにコメント欄に提供していただければ、非常に感謝します (私はまだ理想的な解決策を見つけている途中です)。

Joomla と WordPress のフィードバック フォーム

標準ツールまたは拡張機能を使用して、Joomla と WordPress でフィードバックを整理する方法を見てみましょう。

Joomla にはこの機能を実装するデフォルトのオプションがすでにあり、その設定については提供されたリンクで読むことができます。 原則として、このエンジンのディストリビューションにはデフォルトで最も安定した拡張機能が含まれていますが、必ずしも最も機能的な拡張機能が含まれているわけではありません。 そして開発者は眠らず、より機能的な新しいソリューションが定期的に登場します。

したがって、Joomla 用の別のフィードバック モジュールをダウンロードできます。 迅速な連絡これにより、新しい機能が提供されます (デモを参照)。 このモジュールのセットアップと機能について読むことができます。 さらに、フィードバックを実装するための Joomla の標準コンポーネントには十分な柔軟性がなく、スパム対策保護 (キャプチャ) の使用が許可されておらず、サイト上で複数の異なる連絡フォームを作成することもできません。

これらの問題は、このエンジンの代替コンポーネントを使用することで解決されます。 aiContactSafevを使用すると、サイト上にフィードバック フォームをいくつでも作成でき (別の電子メール アドレスにリンクできます)、ファイルをアップロードするためのフィールドやその他のタイプのフィールドを追加する機能もあります。

フィールドが正しく入力されているかどうかをチェックし、エラー メッセージを表示します。また、aiContactSafev は送信されたすべてのデータのアーカイブを保存し、それを から表示できるようにします。

このコンポーネントには、非常に柔軟なキャプチャ (スパムから保護するためにデータを送信するときにコードを入力する) が含まれています。 Joomla のさまざまなバージョンだけでなく、無料でダウンロードできます。

さて、WordPress について話しましょう。 個人的には、これについてはまだ決めておらず、連絡先ページに通常の電子メールを設定していますが、一般的にあまり良いものではありません。なぜなら、長い間スパム データベースに保存されていたためです。それを通常のものにリンクしてください。そうすれば、はるか昔にスパムの洪水に圧倒されていたでしょう。

しかし、Google メールのスパムカットはうまく機能しており、またうまく機能しすぎています。親愛なる読者の皆さん、あなたの手紙は時々その熱い手に落ちてしまうからです。この場を借りてお詫び申し上げます。

一般に、これがフィードバック フォームの主な利点です。これにより、スパマーに対してメール アドレスを秘密にしておくことができます。 通常、これはかなり快適なシェルで設計されており、プロジェクトに対するユーザーの態度にプラスを加えることができます。これは、便利な注文やフィードバック フォームがコンバージョン (収入) を増加させることができる商業リソースに特に当てはまります。

実はWordPressについて。 と呼ばれる非常に人気があり、非常に強力なプラグインがあります。 お問い合わせフォーム7。 彼の人気は単に桁外れであり、それは彼に何か特別なものがあることを意味します。 確かに、キャプチャ機能を実装するには、追加の Really Simple CAPTCHA プラグインをインストールする必要があります。

フィードバック フォームは、ウィジェットだけでなく、WordPress ブログの任意のページや投稿にも挿入できます。 実際、これは WordPress の一種のコンストラクターで、(ajax テクノロジーを使用して) ページを更新せずにフォーム内の情報を更新できるようにします。 個人的に、私は約 2 年前にサイト用にこのプラグインをテストしましたが、そのときは非常に重く、目標 (フィードバック) を達成するには不当に扱いにくいように思えました。

この間に Contact Form 7 が私たちに直面しているタスクの実装にさらに適したものになったことは明らかです。したがって、かなり詳細な説明に基づいて、ご自身で試してみることをお勧めします。 他の優れた軽量プラグインを使用している場合は、それについてコメントに一言書いてください。

そこで、適切な拡張機能を使用して Joomla と WordPress にフィードバックを実装することについて話しました。

しかし、それもあります いくつかの方法:

    自分でフォームを作成します。 これを行うには、コードを作成し、Css スタイルを使用して外観をデザインし、さらに Php でそのハンドラーを作成し (原則として、Popov の Php ビデオ コースから得た知識で十分です)、次のことを確認する必要があります。フィールドが正しく入力されていることを確認します。 すぐに言っておきますが、これは簡単ではありません。

    このスクリプトのインストールと構成のプロセスを説明するには、別の記事を書く必要があるため、ダウンロードしてインストールすることをお勧めします。 詳細なビデオチュートリアルを見るこの問題については、スクリプトをサイトのデザインに統合するプロセスについても説明します。

    フィードバックフォームのデザイナーとジェネレーター

    デザイナーやジェネレーターからのオンライン フィードバックがかなりの数あります。 たとえば、このサービスは、ほぼあらゆる複雑な構造を作成するための、非常に便利で機能的なインターフェイスを提供します。 最初のステップでは、配色を選択するように求められます。

    その後、ウィンドウの左側から将来のフォームに必要なフィールドを選択し、それらをクリックして微調整を行う必要があります(フィールドラベルをロシア語で設定し、フィールド幅を選択し、タイプを変更して入力します)予備テキスト):

    追加されたフィールドは、マウスをドラッグするだけで交換したり、削除したり、再編集したりできます。

    一般に、このオンライン デザイナーのインターフェイスは非常にモダンで便利です。 必要なフィールドをすべて希望の順序で配置し、必要な設定をすべて指定したら、(下部にある) 保存ボタンをクリックします。 次のページでは、フィードバック スクリプトを表示してダウンロードするか、編集に戻るかを尋ねるメッセージが表示されます。

    HTML サイト (Php なし) のフィードバック

    サーバー上に配置される独自の Php プロセッサを無料で提供するオンライン サービスがあります。 このタイプには次のものが含まれます。

    もちろん、デザインの洗練度という点では噴水ではありませんが、そのようなフォームは 5 秒で作成でき、さらに 1 分で、Php をサポートしていないホスティング上にある場合でも、あらゆる Web サイトに配置できます。

    外観をカスタマイズし、必要なフィールドを追加した後、「表示」ボタンをクリックし、「カスタマイズ」ボタンをクリックしてコードをコピーします。 それを連絡先ページに貼り付け、コードの下にある「挿入」ボタンをクリックします。

    この後、コードを挿入したサイトのページのアドレスと、このフォームを通じて送信されたユーザー メッセージの送信先となる電子メール アドレスを入力します。

    機能的に非常に似ている別のフィードバック フォーム ジェネレーターがあります。 これを使用して作成されたデザインは、Php サポートのないホスティング サイトに配置することもできます (ページ アドレスとメッセージの送信先の電子メールを指定するだけです)。 これについては、本質的には上で説明したコンストラクターと非常によく似ているため、多くは説明しません。

    頑張ってね! ブログサイトのページでお会いしましょう

    興味があるかもしれません

    Google フォーム - Google フォームでウェブサイト上でオンライン アンケートを作成する方法 オンライン HTML エディター - Web サイトにインストールするためのビジュアル、IDE、およびエディター
    SendPulse - サイトのプッシュ通知と、SendPulse から接続するための無料オプション
    Airi.rf クラウド サービスでの Web サイトの高速化と保護
    サイトのアイコン、バッジ、背景、写真、ロゴ (オンライン サービス IconFinder、Freepik、PSDGraphics など) ウェビナーはファッションステートメントまたは便利なコミュニケーションツールです
    CoMagic - 販売分析、または無駄にせずに訪問者を Web サイトに引き付ける方法
    Vicks - 無料のオンラインウェブサイトビルダー Google アラート - 概要と使い方、便利なアラートの作成例

こんにちは、親愛なる読者の皆さん、今日は、Ajax テクノロジーと、訪問者にフォームの使用を促す強力なトリガーを使用して、ページをリロードしなくても機能するおいしい HTML フィードバック フォームを用意しました。 私のブログの読者は、ランディング ページに関する私の前回の記事について非常に活発に議論しており、現在、最終的な新しいフォームを評価し検討しているところです。 必要なものすべて 記事に添付されているソースコードとデモ 、仕事とつながりの構造も分析します。

更新:件名の名前エンコーディングに関するバグを修正しました。 これで、すべてが正しく表示されるようになりました。 読者に感謝します(エカテリーナ・カラチェワ)

フォーム自体の形式には PHP のハンドラー ファイルも含まれています。さらに、作業には jquery ライブラリとスクリプトが必要ですが、まず最初に、あまり長い時間ロードしないようにします。レビューに進みましょう。私たちのフィードバックの分析。

HTML フィードバック フォーム - 作業構造

私たちのフォームは次のようになります。

ここでのポイントは何ですか? 右側にはそのようなフォームがありますが、左側には、訪問者に連絡先情報をすぐに入力するよう促す特別なブロックを作成しました。 秘密は簡単です。左側のブロックに日付と時刻が表示されていますか? 今日の日付が常に表示されます。時間の経過とともに、これら 2 時間の範囲は現在の時間から計算されます。たとえば、現在の時間が 13:14 の場合、時間の範囲は 12 時から 14 時までとなります。それは動作します)))

訪問者は、「おお、今日は割引がある、ちょうど間に合いました、また割引がある!」とわかります。 すぐに受け取らなければなりません! - これが私たちのきっかけです。

HTML フィードバック フォームのソース コードをダウンロードし、デモを見ました - 十分にプレイしたと思います)) 次に、最も重要なこと、動作原理について説明します。

入力フォームのフィールドの検証はハンドラー ファイルで行われます。 contact.php以下のプログラム コードのリストでは、エラーとレターの送信成功に関するメッセージがフォーム自体に表示されます。送信後の表示は次のとおりです。

フォームハンドラーのソースコード

行内に貼り付けます 52 あなたのメールアドレスにすべての手紙が送信されます。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

< 1) { $error .= "Введите ваше сообщение.
<".$tel.">
「.$エラー。」
"; } } ?>

"; ) // 電話認証関数 ValidateTel($valueTel) ( $regexTel = "/^(7,12)$/"; if($valueTel == "") ( return false; ) else ( $string = preg_replace( $regexTel, "", $valueTel); return empty($string) ? true: false; ) if(!$tel) ( $error .= "電話番号を入力してください。
"; ) if($tel && !ValidateTel($tel)) ( $error .= "有効な電話番号を入力してください。
"; ) if(!$error) // メッセージ (長さ) をチェック if(!$message || strlen($message)< 1) { $error .= "Введите ваше сообщение.
";// この行は、文字の書き込みに関する最小限の制限を設定します。 ) if(!?utf-8?b?".base64_encode($name) ."?="; $message ="\n\nName: " .$ name."\n\n電話番号: " .$tel."\n\nメッセージ: ".$message."\n\n" $mail = mail(" [メールで保護されています]", $subject, $message, "From: ".$name_tema."<".$tel.">"."返信先: ".$email." 「。」 X-Mailer: PHP/" .phpversion()); if($mail) ( echo "OK"; ) ) else ( echo "

「.$エラー。」
"; } } ?>

形状性能

メールボックスに手紙を受信するには、上で説明した行を変更します。 gmail.com メールを使用することをお勧めします。フォームから生成されたレターを受信するときに遅延や妨害が発生することはありません。 警告したから… 読者からは多くの質問がありました(手紙はmail.ruに届きません)。 これには注意してください。

すべてのフィールドに入力します。電話番号は 8 で入力されていることに注意してください。私はツールヒントに 8 で示された番号「89251122333」を具体的に書きました。 文字を入力するとき «+» エラーメッセージが表示されます。 誰かがそれを必要とする場合、これをハンドラーに簡単に追加できます «+» .

テストデータを含む完成したフォーム

郵便受けに置かれた手紙

ご覧のとおり、3 つのフィールドすべてに記入して送信したレターを受け取りました。 「サイトサイトからのリクエスト」というレターのヘッダーがハンドラーで変更されます contact.php

すべて問題なく動作しています。コメント欄でフィードバック (建設的な批判) をいただければ幸いです。何か問題があり、対処できない場合は、お気軽に VK に私に書いてください (連絡先の詳細に記載されています) )。 フィードバック フォーム (サービスの注文、アプリケーション) とアクションを促すトリガーのこの共生のデザインと機能を気に入っていただけたでしょうか。 皆さんの仕事と前向きな姿勢が頑張ってください、さようなら))

の支援を受けて準備しました