フィードバックフォーム用の既製の HTML コード。フィードバックフォームを作成する

29.01.2023

どの Web サイトにもフィードバックフォームが必要なので、遅かれ早かれ、私たち一人ひとりがフィードバックフォームの開発を検討することになります。インターネット上には非常に多くのオプションがあり、人気のあるプラグインを使用するものや、独自に開発したものを使用するものもありますが、ほとんどは既製のソリューションを探しています。いずれにせよ、このサイトのフィードバックフォームは正常に動作し、機能するので、これらすべてについて順番に説明しましょう。

HTML

それでは、いつものように、通常のテンプレートである html から始めましょう。まず、いくつかのフィールドを含むフォームが必要です。明確さとすべてのフォームの標準のために、3 つのフィールドを取り上げます。それらの。これは名前、メールアドレス、電話番号になります。

各入力には独自の一意の名前があり、後でメッセージを送信するときに必要になります。独自のフィールドを自由に追加したり、入力だけでなく選択やテキストエリアを追加することもできます。それぞれに独自の名前を割り当てることを忘れないでください。電子メールで情報を送信するときにこの名前を使用します。便宜上、各フィールドに必須属性を追加しました。これにより、ブラウザーはユーザーが空の値を送信することを許可せず、値を入力する必要があることを通知します。

CSS

フォームの準備ができたら、少し変形することができます。ここでのすべてはあなたのニーズと空想にも依存します。わかりやすくするために、すべてが単調に見えないように、各要素のスタイルをいくつかスケッチしました。しかし、あなたが怠け者であるか、その方法がわからない場合は、私のオプションを使用できます。

Form( max-width: 400px; width: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0、0、0.11; パディング: 10px 20px; 境界線: 5px; 背景: 黒0px 2px 0 1px 黒;

クライアント部分

ここでは、より詳細に理解するか、むしろ自分にとって適切なオプションを選択する価値があります。電子メールでメッセージを送信するには、php 言語を使用する必要があります。このすべてのデータを転送する別のファイルを作成します。ただし、ページをリロードせずにすべてが行われる方がはるかに美しいため、ここではこの方法は考慮しません。そこで、ajax 経由でデータを送信する方法を見ていきます。

すべてを昔ながらの方法で実行したい場合は、上部の HTML を少し調整し、フォームのメソッド属性値 (post または get) を設定する必要があります。すべてはフォームからデータを転送する方法によって異なります。また、php ファイルへのパスを示すアクションを記述することも忘れないでください。

そして、より高度な方法を使用して、ページをリロードせずにデータを送信し、サーバーから応答を受信したときに、操作の成功またはエラーに関するメッセージをユーザーに表示します。ただし、contact.php とcustom.js という 2 つのファイルも必要になります。

まず、Jquery ライブラリを接続することを忘れないでください。その助けを借りてコードを数倍削減し、既製のソリューションを使用してあらゆるアクションを簡単に実行できます。

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", URL: "contact.php", data: str, success : function(msg) ( if(msg == "ok") (alert("メッセージは送信されました"); ) else (alert("エラー! フィールドに間違って入力した可能性があります。"); ) ) );

ここで、アクションプランと、これらすべてのライブラリとファイルが必要な理由を理解しましょう。ユーザーが送信ボタンをクリックすると、送信イベントが発生します。これをcustom.jsに記述し、これに基づいてフォームからすべてのデータを受信し、contact.php ファイルに渡します。ここでは、フィールドが空かどうかをもう一度確認し (スパムの可能性を避けるため)、電子メールでメッセージを送信し、その結果をユーザーに通知します。その結果は、custom.js への応答として送信されます。

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = トリム($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // 誰から $fromMail = " [メールで保護されています]"; // ここにメールアドレスを入力 $emailTo = " [メールで保護されています]"; $subject = "フィードバック"; $subject = "=?utf-8?b?".base64_encode($subject) ."?="; $headers = "出典: サンプルフォーム\n"; $headers . = 「コンテンツタイプ: text/plain; charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ".date("D, d M Y h:i:s O") ."\r\n"; // レターの本文 $body = "サイト ".$site" からレターを受け取りました。 \n\n名前: ".$txtname."\n電話番号: ".$txtphone."\neメール: ".$txtemail."\nメッセージ: ".$txtmessage; mail($emailTo, $subject, $body, $headers); 「ok」をエコーします。

これは、お問い合わせフォームがどのように機能するかを示す最も基本的な例です。 PHP でチェックファイルを変更する方法、独自のクラスを作成する方法など、多くのオプションがあります。しかし、私たちの仕事は、Web サイトで使用できるシンプルで実用的なサンプルを作成することでした。

デモ

ファイル

準備ができたプラグイン

あなたは WordPress ブログを使用しているので、特にプログラミングとレイアウトがまったく苦手な場合は、あらゆる種類のプラグインを使用する準備ができており、熱心に使用することになるでしょう。このことであなたを責めるつもりはありませんし、わかりやすくするためにそのうちの 1 つを紹介することもできます。私はいくつかのプロジェクトで Contact Form 7 プラグインを使用しているため、この段落の目的は推奨ではなく、単なる例です。

設定は非常に簡単で、ほぼ常に完璧に動作します。独自のユニークなデザインを作成する必要がある場合は、それを行うことができます。コンストラクターに必要なフィールドを追加し、エラーと送信成功に関する通知を独自の方法で翻訳および変更するだけで完了です。次に、ショートコードをコピーし、フォーム内の目的の場所に貼り付けます。

このプラグインで問題が発生したことはありません。すぐに使える解決策が必要な場合は、これが最適です。機能とデザインの点でフォームに独自の要件がある場合は、この業界の知識が必要となる最初のオプションを使用することをお勧めします。

それでは、始めましょう。まず、ページをマークアップし、スタイルを記述します。マークアップには、2 つの入力 (電話、メール) と 1 つのテキスト領域を備えた通常のフィードバックフォームが含まれます。私たちのアイデアによれば、ユーザーはそこにメッセージを入力します。フォームハンドラーは別のページに配置します。

フィードバックフォーム

電話番号を入力してください:

あなたのメール:

あなたの質問：

スタイルを書いてみましょう:

Html, body( 高さ: 100%; マージン: 0; ) html( 背景色: #fff; カラー: #333; フォント: 12px/14px ヴェルダナ、タホマ、サンセリフ; カーソル: デフォルト; ) #フィードバックフォーム(背景色: #ececec; マージン: 50px 自動 0; テキスト整列: センター; 幅: 430px; パディング: 15px; ) #フィードバックフォーム h2(マージン-ボトム: 25px; ) #フィードバックフォーム入力, #フィードバック-form textarea( 背景色: #fff; ボーダー: 1px ソリッド #A9A9A9; パディング: 1px 5px; 幅: 90%; ) #フィードバックフォーム入力( 高さ: 26px; ) #フィードバックフォームテキストエリア( 高さ: 75px;パディングトップ: 5px; ) #フィードバックフォーム入力(マージントップ: 15px; 背景色: #0B7BB5; 境界線: 1px 実線 #CCCCCC; カラー: #FFFFFF; フォントの太さ: 太字; 高さ: 40px; 行-高さ: 40ピクセル; テキスト変換: 大文字;

これらすべてのアクションの結果、次のフォームが得られます。

今度はサーバーに取り組みます。スクリプトにはいくつかの部分が含まれます。

設定;
二次的な機能。
受信データの処理;
メッセージ出力。

もちろん、これらの部分はすべて条件付きです。コードを混乱させたり、逆に重要な部分を他のファイルに移動したりすることを誰も止めてくれないからです。ただし、ハンドラーを 1 つのファイルに作成したほうが、他のプロジェクトに接続するのに便利だと思います。

設定

この段階では、$my_email (データの送信先メールボックス)、$path_log (ログファイルへのパス)、$time_back (ユーザーがサイトに戻った時刻) の 3 つの変数を作成します。

// メールボックスを指定 $my_email = " [メールで保護されています]"; // ログの保存場所を指定 $path_log = "log.txt"; // ユーザーがサイトに戻る時間 (秒) $time_back = 3;

二次機能

ここでは、データ処理を簡素化する 5 つの関数について説明します。

メッセージ出力テンプレート:

Function error_msg($message)( $message = "".$message.""; return $message; ) function success_msg($message)( $message = "".$message.""; return $message; )

フォームから受信したデータをクリアします:

関数 clear_data($var)( return trim(strip_tags($var)); )

手紙を送る:

Function send_mail($email, $subj, $text, $from)( $headers = "From: ".$from." \r\n"; $headers .= "MIME バージョン: 1.0\r\n"; $headers .= "Content-Type: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); true を返します。

そして最後の機能は、電話とメールの形式が正しく記録されているかどうかをチェックします。

Function check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) ブレーク; case "電話": $pattern = "/^(\+?\d+)?\s*($\d+$)?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( true を返す; ) ブレーク; ) false を返す; )

ご覧のとおり、私たちが作成した関数はすべて小さいサイズです。これらをデータ処理領域の外に残しておくこともできますが、たとえば check_format() など、何かを変更または拡張する必要がある場合は、その方がはるかに簡単で便利です。

受信データの処理

まず、ユーザーがどのページから来たのかを調べます。次に、メッセージとレター送信ステータスが保存される変数を定義します。

// 前のページを検索 $prev_page = $_SERVER["HTTP_REFERER"]; // 私たちのメッセージ $msg = ""; // メールのステータス $status_email = "";

ここで、エンコードに関する問題を回避するために、ヘッダーを使用してそれを示します。

Header("Content-Type: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["email"], $_POST["question"]))( $number = clear_data ($_POST["番号"]); $email = clear_data($_POST["電子メール"]); $question = clear_data($_POST["質問"]) if(check_format($number, "電話"); check_format($email, "email") && !empty($question))( // 手紙を作成 $e_title = "New message"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "メール: ".$email; $e_body .= "
"; $e_body .= "Question: ".$question; $e_body .= ""; $e_body .= ""; // END レターを作成する if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "成功"; $msg = success_msg("ご質問ありがとうございます。
できるだけ早くご返信いたします。"); )else( $status_email = "error"; $msg = error_msg("メールの送信中にエラーが発生しました。"); ) // ファイルに書き込みます $str = "時刻: ".date ("d-m-Y G:i:s")."\n\r"; $str .= "電話番号: ".$number."\n\r"; $str .= "メール: " .$email." \n\r"; $str .= "質問: ".$question."; $str .= "メール: ".$status_email."; $ str .= "= =====================================\n\r"; ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "フォームに正しく記入してください!"); )else( $msg = error_msg("エラーが発生しました!"); )else( exit ;)

書かれたコードでは、フォームが送信されたかどうかを判断し、送信されていない場合は、exit 関数を使用してこのファイルを閉じます。次に、POST 配列内にデータを含むセルが存在するかどうかを確認し、セルが到着した場合は、不要なセルを消去します。クリーニング後、メールと電話の形式、および質問変数内のテキストの存在をチェックします。次に、レターを生成して送信し、データに加えてレター送信のステータスを保存するログを書き込みます。こうすることで、mail() 関数の操作を追跡できると同時に、データが失われないようにすることができます。

メッセージ出力

私たちがしなければならないことは、操作が成功したか「失敗」したかをユーザーに通知し、フォームを持ってサイトに戻すことだけです。これを行うには、PHP スクリプトを含むマークアップを使用します。

ユーザーをサイトにリダイレクトするには、refresh メタタグを使用します。ここに、作成済みの変数を含む PHP コードを挿入します。ページをもう少し動的にするために、少し JavaScript を使用する必要もあります。リダイレクトの前に逆順に秒数をカウントする関数 timeBack() を作成します。

これで、HTML サイト用の簡単なフィードバックフォームが完成しました。 sendmessage.php ファイル内の電子メールを自分のものに変更することを忘れないでください。

ポップアップフィードバックフォームをサイトに追加する

ボタンをクリックすると開くポップアップフォームが必要な場合があります。やり方はとても簡単です。例として、以前に作成したフォームを取り上げて作業してみましょう。

まず、jQury fancybox に接続する必要があります。これは記事の最後でダウンロードできます。

これらの行を body 終了タグの前に追加し、ファイルへのパスを独自のパスに変更するだけです。

そしてそれにスタイルを与えます。

モーダルボックス ( カラー:#FFFFFF; 表示:ブロック; カーソル:ポインター; パディング:10px 11px; フォントサイズ:1.2em; ボーダー:ソリッド 1px #F9F9F9; ボーダー半径:2px; 背景:#70C6B9; 幅:210px; テキスト-装飾:なし; テキスト整列:中央; マージン:0 自動 .modalbox:hover (背景:#979797;)

ボタンをクリックするとポップアップウィンドウが表示され、モーダルボックスクラスとパス href=”#inline” を割り当てる必要があることに注意してください。これがないと、サイト上でポップアップフォームが開きません。

次に、以前に作成したフォームを非表示にして、ポップアップウィンドウで開くようにします。これを行うには、#inline スタイルを古いスタイルから新しいスタイルに置き換える必要があります。

#inline (表示:なし; マージン左:30px; 幅:80%; マージン:0 自動; 背景:#fff; パディング:10px 20px; )

結果として、このようなボタンが得られます。

クリックすると、フィードバックを含むポップアップウィンドウが開きます。

繰り返しますが、スタイル、フィールドおよび要素のレイアウトは必要に応じて変更できます。たとえば、サイトからコールバックするには、名前と電話番号の 2 つのフィールドだけを残し、残りのフィールドを削除するだけで十分です。

フォームを機能させるには、上で公開されているハンドラーをサイトの最後に追加し、sendmessage.php ファイルをサイトのルートにアップロードする必要があることを忘れないでください。

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

サイトが WordPress エンジンで実行されている場合は、特別なプラグインを使用して問い合わせフォームを追加できます。最高の Contact Form 7 プラグインの 1 つ。公式 Web サイトから、または管理パネルの「プラグイン」セクションからダウンロードできます。

プラグインを有効にすると、左側のメニューに新しいタブが表示されます。それを開いて、「新規追加」をクリックします。

新しいフォームの名前を入力し、フォーム内に含めるフィールドを選択します。通常は、自動的に追加される標準のもので十分です。体調を整えてください。

保存後、ショートコードが画面に表示されます。このコードは、連絡先ページなど、連絡先フォームを表示するページに挿入する必要があります。

このコードをコピーし、目的のページに移動し、ビジュアルエディターで「テキスト」形式を選択し、このショートコードを貼り付けてページを保存します。

次に、フォームがページに表示されるか、正しく動作するかを確認します。これを行うには、コードを挿入したページに移動するだけです。次のようなフォームが表示されるはずです。

これで、サイト訪問者は、WordPress エンジンで作成されたお問い合わせフォームを通じてあなたに連絡できるようになります。

WordPress のポップアップフィードバックフォームを作成する

私自身、このエンジンに不要なプラグインを追加するのは好きではありません。プラグインがサイトを読み込むと、作業が遅くなります。したがって、ポップアップフォームの場合、私は通常 2 つのオプションを使用します。

記事内で説明したポップアップフォームを HTML サイトではなくエンジンに接続するだけです。

Contact Form 7 ポップアップフォームプラグインを使用して作成されたフォームに若干の変更を加えたもの。

最初の方法についてはすでに説明したので、2 番目の方法に進みましょう。

まず、開始 body タグの直後に次のコードを貼り付けます。

バツ

何が何なのか考えてみましょう:

id=”callme-open” のリンクをクリックすると、フォームが開きます。このリンクは開始タグの後に挿入するのではなく、このボタンを配置したい場所に挿入する必要があることに注意してください。通常、ヘッダーの右隅、会社の電話番号の隣に追加されます。
bg-b ブロックは、ポップアップフォームを開いたときにサイトの背景を暗くします。
callme ブロックにはフィードバックフォーム自体が含まれます。
X – これはフォームの隅にある十字で、クリックするとフォームが閉じます。
さて、Contact Form 7 プラグインのショートコードが起動される php コードです。

あなたのフォーム ID と名前は私のものとは異なる場合があることに注意してください。新しいコードが追加されたので、それにスタイルを与えます。

Bg-b ( 位置:絶対; 幅:100%; 高さ:100%; 左:0; 上:0; 背景:rgba(51,51,51,0.55); z-index:1000; ) body (位置:相対; .callme ( 位置:固定; 上:30%; 左:50%; 幅:300px; マージン-左:-150px; z-インデックス:1100; 背景:#fff; パディング:20px 20px 10px; 境界半径:4px; ) .callme small (位置:絶対; 右:10px; 上:10px; フォントサイズ:15px; カーソル:ポインタ; )

コードを保存して確認してください。フォームは画面の中央に配置され、その後ろに半透明の暗い背景が表示されます。すべて問題ありませんが、最後に追加する必要があるのは、必要なボタンをクリックしたときにこのフォームを開いたり非表示にしたりするスクリプトです。

このスクリプトは、フッターファイルの body 終了タグの前に挿入する必要があります。

最後の仕上げが残っており、WordPress 上のポップアップフォームが完成します。 display:none スタイルをクラス .callme および .bg-b に追加します。これは、サイトの起動時にフォームが画面に表示されないようにするために必要です。

コールバック用のフォームを作成するためのいくつかのオプションについて話し合いました。サイトにフォームを実装する際に問題が発生しないことを願っています。問題や質問がある場合は、いつでもコメントでアドバイスを得ることができます。

更新日 2018/06/06

WordPress の最新バージョンでは、jQuery スクリプトは $ 記号では機能しないため、これを考慮して $ を jQuery に置き換える必要があります。

Web サイト上のエンドツーエンドのフォームが内部ページで送信を停止するという問題が頻繁に発生します。これを防ぐには、ハンドラーの sendmessage.php ファイルに完全な let を指定します。たとえば、次のようになります。

URL: "http://site.ru/sendmessage.php"

最初の 2 つのフォームのソースは、次の方法でダウンロードできます。

更新日 2018/07/04

多くのリクエストにより、フィードバックフォームが最新化されました。ロシア連邦法第 152-FZ「個人データについて」に従ってデータ送信に同意するためのチェックボックスが考慮されるようになり、あらゆる画面解像度への適応性が向上し、js および css ファイルが圧縮されました。

リンクを使用して例を表示したり、更新されたフィードバックフォームとポップアップフォームのソースをオンラインでダウンロードしたりできるようになりました。

これから紹介するサイトのフィードバックフォームは、Ajax テクノロジの使用に基づいています。ただし、心配しないでください。これを知る必要はありません。すべての準備がすでに整っています。必要なのは、このフォームをインストールして自分用にカスタマイズすることだけです。

皆さん、このスクリプトはとっくの昔に時代遅れです。うまくいく人もいれば、うまくいかない人もいます。そして、私はそれを理解するのが面倒で、ましてや更新することさえできません。したがって、ご自身の判断でテストしてください。

電子メールで送信される PHP フィードバックフォーム

これ ウェブサイトのフィードバックフォームそれ自体は非常に機能的ですが、いくつかのプラグインが接続されており、魅力的な外観を作成し、入力したデータの有効性 (読み取りの正しさ) をチェックします。これらのプラグインは、偉大で強力なプラグインで動作します。そして、それらは次のように呼ばれます。

1. JQTransform– フィードバックフォームを美しくするためのプラグインです。

2. フォームバリデータ– このプラグインは、入力された情報が正しいかどうかお問い合わせフォームをチェックし、何か問題が発生した場合はツールチップを表示します。

このフォームの完全な操作には、クラス PHPMailer が使用されます。最高のものの 1 つと考えられています。

賢い人向けのメモ:

サイトのフィードバックフォームがHTMLで作れる！ただし、PHP の助けがなければ機能しません。何もありません！

HTML のみのフィードバックフォームを探している人のための私です。やりますが、うまくいきません！

したがって、お使いのフォームは PHP をサポートしている必要があり、このお問い合わせフォームの場合、PHP は少なくともバージョン 5 である必要があります。明らかにしてほしいと思いますか？さらに、現在では、通常のホスティングはすべてこれらの条件をサポートしています。

私はこのフィードバックフォームを Web サイト www.tutorialzine.com で見つけました。リンクは元のページに直接アクセスできます。このフォームの作者のウェブサイト!

そこにあるものはすべて英語なので、サーシャと私はこのお問い合わせフォームとそれに接続されているプラグイン自体をロシア化するために少しいじる必要がありました。

正直に言うと、さまざまなバグが発生し始めたため、この「フォーム」を 2 日間いじりました。未完成のフィードバックフォーム、特にこのような美しいフォームを投稿したくありませんでした。したがって、あなたがすべてを自分で行うのが好きで、その考えが頭の中に浮かんだ場合、この形式を自分でロシア語化するために、フレーズを単に翻訳することに限定されないので、いくつかのヒントを提供します。

1. このフィードバックフォームはブルジョワジー向けに調整されており、そこからダウンロードされたため、通常のロシア語文字の代わりに krakozyabl が送信されます。コーディングを理解します。そして一般に、すべての「シール」がこれに関連付けられます。

2. 検証スクリプトは最初は文字を理解できないため、そこに文字を記述する必要があります。

3. これらの手順を実行した後でも、ロシア語でレターの件名を指定すると、件名なし (正しく書けたと思います) でレターが届きます。これは、PHPMailer クラスファイルでエンコーディングを指定すると解決できます。。

4. 元のフォームでは、入力フィールドのテキストは中央ではなく下部に押し込まれていました。これは JQTransform プラグインの不具合です。

まあ、すべてが書かれ、警告されたようです。次へ移りましょう！