PHP でフィードバック フォームを作成します。 品質管理部門 モーダルウィンドウでフォームを呼び出す

皆さん、こんにちは! フォームから電子メールにデータを送信するための汎用スクリプトを紹介したいと思います。 このスクリプトは、ランディング ページ、名刺サイトなどのサイトに最適です。 私たちのフィードバック フォーム スクリプトは、1 ページ上でさまざまなフィールドを持つ無制限の数のフォームを接続し、複数の受信者にレターを送信できるという点で、インターネット上の他の大量のスクリプトの中でも際立っています。

それで。 始めましょう。 スクリプトの機能から始めましょう。

  • 1 ページに無制限の数のフォームを接続します。
  • フィールドが正しく入力されていることを確認します。
  • 通知の設定。
  • 各フォームに文字を使用する機能。
  • 文字の種類 - (HTML タグが使用されている場合)
  • 無制限のアドレスに送信します。
  • 各フォームの個別のカスタマイズ。
  • スクリプトはページをリロードせずに で実行されます。
  • スパムボットからの保護。
  • 初期設定。
    スクリプトはライブラリに基づいて動作するため、最初に行う必要があるのはライブラリを接続することです。 これを行うには、Google ホスト型ライブラリを使用することをお勧めします。

    残りのファイルについて詳しく説明します。

    feeded.js はメイン スクリプト ファイルであり、AJAX フォームの送信を担当します。
    jquery.arcticmodal.js、
    jquery.arcticmodal. - モーダル ウィンドウにフォームを表示する機能を提供します。
    jquery.jgrowl.js、
    jquery.jgrowl.css - ページ (ページの上隅のブロック) に通知を表示できるようにします。

    HTML と必須の属性。
    すべてのフォーム要素に必須の属性は name="" 属性です。これは後続のフォームのカスタマイズに必要です。
    ボタン (type="button") の場合は、 class="フィードバック" を指定する必要があります。 モーダル ウィンドウでフォームを呼び出す モーダル ウィンドウでフォームを呼び出すには、まずアクションを定義する必要があります。任意のタグ(例: modal_btn クラスの div をクリックする場合)
    モーダル ウィンドウでのフォームの呼び出し $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); )); ));
    フォームはモーダル ウィンドウでのみ表示される必要があるため、style="display: none;" 属性を使用して div に配置して非表示にし、モーダル ウィンドウのスタイルを設定するためにいくつかの標準 div でラップする必要があります。
    バツ

    これで、フォームを電子メールに送信するためのスクリプトを接続するための基本的な設定がわかりました。 内部を見て、フィールド、通知、その他すべてのものを構成する方法を理解しましょう。

    1 つのフォームの設定例すべてのフォームの設定はファイル feeded\index.php に保存されます
    $form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "フィールド [ %1$s ] にエラーが含まれている可能性があります", "minlength " => "最小フィールド長 [ %1$s ] は許可されている長さよりも小さいです - %2$s", "maxlength" => "最大フィールド長 [ %1$s ] は許可されている長さを超えています - %2$s", )), "tell " => array("title" => "電話", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "messages" => array( "preg" => "フィールド [ %1$s ] にエラーが含まれている可能性があります", "minlength" => "フィールド [ %1$s ] の最小長は、許容される長さ - %2$s 未満です",) ),), "cfg" => array(" charset" => "utf-8", "subject" => "メールの件名", "title" => "メール本文の見出し", " ajax" => true、"validate" => true、"from_email" => " [メールで保護されています]", "from_name" => "noreply", "to_email" => " [メールで保護されています], [メールで保護されています]"、"to_name" => "noreply1、noreply2"、"geoip" => true、"referer" => true、"type" => "html"、"tpl" => true、"antispam" => "email77 "、"antispamjs" => "address77"、"okay" => "メッセージ送信 - OK"、"fuck" => "メッセージ送信 - エラー"、"spam" => "スパム ロボット"、"notify" => "color-modal-textbox", "usepresuf" => false)); // 次のフォーム $form["form-2"] = array("fields" => array(....
    新しいフォームの設定を追加するには、$form["form-1"] 配列の例に従って、新しい配列 $form[""] を作成する必要があります。

    必須の name="" 属性について述べたことを覚えていますか?

    すべてのフォーム要素に必須の属性は name="" 属性です。これは後続のフォームのカスタマイズに必要です。
    したがって、なぜそれが依然として必要なのかを説明する時が来ました。
    name="" は配列の英数字キーであり、$form[""] 配列内で一意である必要があります

    わかりやすくするための HTML コードの例

    ここで、配列とその必要性を理解しましょう。

    $form["form-1"] = 配列();
    $form["form-2"] = 配列(); 等
    これらは、各新しいフォームのメイン配列であり、次のものが含まれます。

  • "フィールド" => 配列(); - フォーム要素の設定の配列。
    • "名前" => 配列(); - 多数の設定を含むフォーム要素設定の配列 (たとえば、input name="name" type="text")。
      • "title" => "Your name" - フォーム要素の名前。エラーが発生した場合、またはテンプレートに表示されます。
      • "検証" => 配列(); - フォーム要素の検証ルールを含む配列
        • "preg" => "%%" - 正規表現
        • "minlength" => "3" - 最小フィールド サイズ
        • "maxlength" => "35" - 最大フィールドサイズ
        • "substr" => "35" - 常に N 文字に切り取られます
      • "メッセージ" => 配列(); - 検証メッセージを含む配列、つまり次のとおりです。
        • "preg" => "フォーム要素が正規表現と一致しません"
        • "minlength" => "フィールド [ %1$s ] の最小長は許容範囲を下回っています - %2$s" - 検証エラー、キー (preg) が検証キーと一致しません
        • "maxlength" => "フィールド [ %1$s ] の最大長が許容制限を超えています - %2$s" - 検証エラー、キー (preg) が検証キーと一致しません
  • "cfg" => 配列(); - フォーム設定の配列。
    • "charset" => "utf-8" - エンコーディング
    • "subject" => "手紙の件名", - 手紙の件名
    • "title" => "レター本文のタイトル", - レター本文のタイトル
    • "ajax" => true、 - これは Ajax TODO フォームです (必要ない場合は false に設定してください)
    • "validate" => true、- (true) サーバー上のフォームを検証する場合、js 検証を "ajax" => true に置き換えます。 オフ (false) の場合、検証フィールドの設定を行う必要はありません。 TODO
    • "from_email" => "myemail"、 - 送信者、フィールド名 (name = "myemail") を指定します。ユーザーからの電子メールが必要ない場合は、スタブ [メールで保護されています]
    • "from_name" => "myname"、 - 送信者、フィールド名 (name="myname") を指定します。ユーザー名が必要ない場合は、No-reply スタブ
    • "to_email" => " [メールで保護されています]", - 受信者の電子メール。複数のアドレスに送信するには、カンマで区切ってリストします。例 ("to_email" => " [メールで保護されています], [メールで保護されています], [メールで保護されています]",)
    • "to_name" => "noreply1", - 受信者の名前。 複数のアドレスに送信する場合は、受信者の名前をカンマで区切ってリストします。 例 ("to_name" => "noreply1、noreply2、noreply3",)
    • "geoip" => true、 - TODO タイプを使用して場所を検索します
    • "referer" => false、 - フォームの送信元のページの URL を追加します
    • "type" => "plain"、 - 文字タイプ - plain、html (html タグが使用されている場合)
    • "tpl" => false、 - レターテンプレートを使用します。 true の場合、フォルダーのフォーム名 (name="form-1") に従ってテンプレート ファイルが接続され、ファイル (フィードバック/tpl/form-1.tpl) が処理されます。そうでない場合は、すべてが処理されます。そのまま送信され、各フィールドは新しい行に置かれます
    • "antispam" => "email77"、 - アンチスパム、このメソッドは非表示 (表示:なし) フィールドに基づいており、ロボットのみが自動的にこのフィールドに入力するため、ロボット自身が表示されません。
    • "antispamjs" => "address77", - スパム対策メソッドは、最初は入力されている非表示 (表示:なし) フィールドに基づいており、ページがロードされると自動的に JavaScript をクリアします。スマート ロボットでもこれを予期することはできませんが、その後、ブロックされました。
    • "ok" => "ユーザーへのメッセージ", - フォームが正常に送信された場合、ユーザーへのメッセージが表示されます。html タグを使用できます。
    • "fuck" => "ユーザーへのメッセージ", - フォーム送信時にエラーが発生した場合に表示されるユーザーへのメッセージ。html タグを使用できます。
    • 「spam」 => 「ユーザーへのメッセージ」 - スパムロボットが疑われる場合に表示されるユーザーへのメッセージ。htmlタグを使用できます。
    • "notify" => "color-modal"、 - 表示する通知の種類、テキストボックス - ページの上隅のブロック、色 - フォーム内の色の強調表示、モーダル - ページ中央のモーダルウィンドウ、なし- 無効にします。 例: color-modal - ハイライトによるフィールドの入力エラーと、TODO モーダル ウィンドウでのテキスト送信ステータスを組み合わせることができます。
    • "usepresuf" => false - カスタム追加をレターの件名に使用するかタイトルに使用するかに関係なく、小さな変更の場合は、たとえば %%cfg.title.suffix%% を指定できます。これには、次のものが必要です。フォーム内の隠しフィールド。詳細については、「f -qiu presuf()」を参照してください。
  • レターテンプレートの設定 それでは。 次に、メッセージのトピックを見てみましょう。
    まず、フォームをテンプレートで送信するには、フォーム設定でテンプレート ファイルの使用を有効にする必要があります - "tpl" => true 、
    次に、フォームの名前 (name="form-1" ) に従って、フォルダー (フィードバック/tpl/) に拡張子 *.tpl を持つテンプレート ファイルを作成する必要があります。

    例: (フィードバック/tpl/form-1.tpl)

    手紙の本文の見出し
    %%名前.タイトル%% %%名前.値%%
    %%tell.title%% %%tell.value%%

    名前を言う、伝えるなど - これらは、ユーザーが入力するフィールドの属性 (name="") です。
    title - フォーム要素の名前。フォーム要素設定配列に設定されます。
    value - フォーム要素の値。

    今日はここまでですが、スクリプトは確かに完璧ではないため、バグのコメントや説明は歓迎されており、将来のバージョンで修正される予定です。

    追伸 スクリプトはチームによって開発されました

    Web プロジェクトの開発では、訪問者からのフィードバックを受け取ることが非常に重要です。 残念ながら、多くの Web サイトでは、開発者にメッセージを送信する機能がまったく提供されていないか、非常に深刻な問題が発生します。

    今日は、この問題に対する簡単な解決策を説明します。 jQuery、PHP、および PHPMailer クラスを使用して、フォームはユーザーの提案を受信箱に直接送信します。

    HTML

    HTML マークアップから始めましょう。 スタイルはドキュメントの上部に含まれ、JavaScript ファイルは下部に含まれます。 これにより、ページの読み込みプロセスが最適化され、スクリプトが最後に読み込まれ、ユーザーがページのコンテンツを確認できるようになります。

    デモ.html

    PHP と jQuery を使用したフィードバック フォーム | Web サイトのデモ Web サイトのフィードバック

    返信が必要な場合は、連絡先情報をご記入ください。

    送信

    内部 位置した ディビジョン#フィードバック。 これは、チュートリアルの CSS セクションで説明するように、固定位置を使用してウィンドウの右下に配置されます。

    この中に ディビジョン 5つの色の要素が配置されています スパン。 それぞれの幅は 20% で、左にオフセットされます。 このようにして、幅全体に正確に配置されます。 ディビジョン#フィードバック。

    次に、タイトル、テキスト領域、ボタンを含む .section コンテナーが続きます。

    CSS

    フォームのスタイルの設定に進みましょう。 まず、スタイルシートの構造が何で構成されているかについて少し説明しましょう。 以下の CSS 定義を見ると、すべてのルールが #フィードバック で始まっていることがわかります。 これにより、CSS 内に同様の名前空間が作成され、競合することなく既存の Web サイトにコードを簡単に追加できるようになります。

    スタイル.css - パート 1

    #フィードバック(背景色:#9db09f; 幅:310px; 高さ:330px; 位置:固定; 下:0; 右:120px; マージン-下:-270px; z-index:10000; ) #フィードバック .section( 背景:url("img/bg.png")repeat-x 左上; border:1px ソリッド #808f81; border-bottom:none; padding:10px 25px 25px; ) #フィードバック .color( float:left; height:4px; width:20%; overflow:hidden; ) #フィードバック .color-1( 背景色:#d3b112;) #フィードバック .color-2( 背景色:#12b6d3;) ​​#フィードバック .color-3( 背景色:#8fd317;) #フィードバック .color-4( 背景色:#ca57df;) #フィードバック .color-5( 背景色:#8ecbe7;) #フィードバック h6( 背景:url("img/フィードバック.png" ) リピートなし; 高さ:38px; マージン:5px 0 12px; テキストインデント:-99999px; カーソル:ポインター; ) #フィードバック テキストエリア(背景色:#fff; ボーダー:なし; カラー:#666666; フォント:13px "Lucida Sans"、Arial、サンセリフ; 高さ: 100px; パディング: 10px; 幅: 236px; サイズ変更: なし; アウトライン: なし; オーバーフロー: 自動; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-shadow:4px 4px 0 #8a9b8c; ボックスシャドウ:4px 4px 0 #8a9b8c; )

    スタイル設定される最初の要素は ディビジョン#フィードバック。 固定位置が割り当てられ、ブラウザ ウィンドウに固定されます。 この後に、次の定義が続きます。 ディビジョン 。セクションと 5 つの色の要素 スパン。 これらの要素は、クラスごとに個別に割り当てられる背景色のみが異なります。

    CSS ファイルの表示部分の一番下には、テキスト領域を表示するためのルールが定義されています。

    スタイル.css - パート 2

    #フィードバック a.submit(background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent: -99999px; width:91px; ) #フィードバック a.submit:hover( 背景位置:左下; ) #フィードバック a.submit.working( 背景位置:右上 !重要; カーソル:デフォルト; ) #フィードバック .message ( font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; ) #フィードバック .arrow( 背景:url("img/arrows.png ") no-repeat; float:right; width:23px; height:18px;position:relative; top:10px; ) #フィードバック .arrow.down( 背景位置:左上;) #フィードバック h6:hover .down(背景位置:左下;) #フィードバック .arrow.up( 背景位置:右上;) #フィードバック h6:hover .up( 背景位置:右下;) #フィードバック .response( フォントサイズ:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; )

    スタイル シートの 2 番目の部分では、送信ボタンの外観を定義します。 ボタンには 3 つの状態があり、それらの画像は背景画像用の 1 つのファイルに含まれていることに注意してください。 送信.png。 必要な場合にのみ表示されます。

    jQuery

    フィードバック フォームには、最小化と最大化の 2 つの状態があります。 起動時、デフォルト状態は画面右下の最小化状態に設定されています。 そして、ユーザーがヘッダーをクリックすると、jQuery はフォームを最大の状態にします。 この機能は、イベントをバインドし、単純なアニメーションを実行することによって実現されます。

    script.js - パート 1

    $(document).ready(function())( // submit.php スクリプトの相対 URL。 // おそらく変更する必要があります。 var submitURL = "submit.php"; // フィードバック オブジェクトをキャッシュします: varフィードバック = $( "#フィードバック"); $("#フィードバック h6").click(function())( // アニメーションのプロパティ値は別のオブジェクトに格納されます // var anim = ( mb: 0, // 下マージン pt: 25 // 上パディング); var el = $(this).find(".arrow"); if(el.hasClass("down"))( anim = ( mb: -270, pt : 10); ) // 最初のアニメーションはフォームを上下に移動し、2 番目のアニメーションは // 縮小バージョンに合わせてタイトルを移動します Facebook.stop().animate((marginBottom: anim.mb));フィードバック.find(".section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("ダウンアップ"); )); ));

    コードをシンプルかつ明確に保つために、アニメーションの値を含む anim オブジェクトが上部に作成され、オペレーターが配置されます。 もし。 クラスの存在に応じて、 ' 矢印上で、形状を展開または折りたたむことができます。

    第二部 スクリプト.js AJAX の作業を処理します 送信.php.

    script.js - パート 2

    $("#フィードバック a.submit").live("click",function())( var button = $(this); var textarea = Facebook.find("textarea"); // 作業クラスを使用しません。データ送信ボタンのスタイルを設定するためだけに使用されますが、 // フォームの複数の生成を防ぐための一種のロックとしても使用されます。 if(button.hasClass("working") || textarea.val().length< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

    jQuery の AJAX $.ajax() メソッドを使用して対話します。 送信.php。 このメソッドは、 $.get() および $.post() よりも接続をもう少し制御できます。

    このメソッドの利点の 1 つは、コールバック関数の「全体」を通じてオブジェクトのプロパティを可視化できることです。 コンプライアンスの対応状況を確認します エラー404ページが見つかりません)、パスを確認するようにユーザーにメッセージを表示します。 送信URL.

    今度は最後の部分である PHP に進みます。

    PHP

    PHP は、AJAX から送信されたデータを処理して検証し、指定されたアドレスに電子メール メッセージを送信します。

    送信.php

    // ここにアドレスを入力する必要があります $emailAddress = " [メールで保護されています]"; // フラッディングを防ぐためにセッションを使用します: session_name("quickFeedback"); session_start(); // 最後のフォームが送信されてから 10 秒以内の場合、 // またはユーザーが過去 1 時間以内にすでに 10 件のメッセージを送信しているif($_SESSION[ "lastSubmit"] && (time() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("メッセージを再度送信する前に数分待ってください。"); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; "phpmailer/class.phpmailer.php" が必要です。 if(ini_get("magic_quotes_gpc"))( $_POST["メッセージ"] = ストリップスラッシュ($_POST["メッセージ"]); ) if(mb_strlen($_POST["メッセージ"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // 受信者のアドレスを追加 $mail->AddAddress($emailAddress); $mail->Subject = "フィードバック フォームからの新しいメール"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "デモ ページのフィードバック フォーム"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "デモ ページのフィードバック フォーム"); $mail->Send(); エコー「ありがとう!」

    まずセッション管理を使用して、ユーザーが過去 1 時間にフォーム送信を使用した頻度を特定し、最後の送信からの経過時間も特定します。 最後の送信から 10 秒未満が経過している場合、またはユーザーが過去 1 時間以内にすでに 10 件を超えるメッセージを送信している場合は、エラー メッセージが表示されます。

    電子メールは PHPMailer クラスを使用して送信されます。 注意! PHP5でのみ動作します。

    複数の方法 PHPメーラー送信電子メールの設定に使用されます。 IsMail() メソッドは、内部 PHP 関数を使用するようにクラスに指示します。 郵便()。 AddAddress() メソッドは、受信者のアドレスを追加します (このメソッドをさらに呼び出すと、複数の受信者を追加できます)。 件名と本文を追加した後、返信用のアドレスが表示されてメッセージが送信されます。

    準備ができて!

    結論

    このフォームを使用して、サイト訪問者からの簡単なフィードバックを整理できます。 送信の障壁が非常に低く、テキスト フィールドに記入してボタンをクリックするだけで済むため、ページの訪問者がアイデアを共有し始めるのに最適な環境が作成されます。 このスクリプトは適切に構造化されており、カスタマイズも簡単なので、最小限の労力で Web サイトで使用するのに役立ちます。

    このレッスンでは、PHP でフィードバック フォームを作成し、受信したデータを電子メールで送信する例を使用して、mail() 関数について学習します。

    これを行うには、forma.php と mail.php という 2 つのファイルを作成します。 最初のファイルには、ユーザーがデータを入力するためのフィールドを含むフォームのみが含まれます。 formタグ内にボタンがあります "送信" action 属性は、ハンドラー mail.php を参照します。これは、ボタンがクリックされたときにフォームのデータにアクセスする場所です。 "送信"。 この例では、フォーム データは「/mail.php」という Web ページに送信されます。 このページには、フォーム データを処理する PHP スクリプトが含まれています。


    フォームデータはPOSTメソッド($_POSTとして処理)で送信されます。 $_POST は、POST メソッドを介して現在のスクリプトに渡される変数の配列です。

    以下に、forma.php ファイルの内容を示します。このファイルのフィールドは、Web サイト上でユーザー自身によって入力されます。 データ入力用のすべてのフィールドには name 属性が必要です。ロジックに基づいて値を自分たちで書き込みます。




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


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





    伝言を残す:
    あなたの名前:



    Eメール:

    電話番号:

    メッセージ:

    テキスト領域には無制限の文字を含めることができます -->







    ブラウザ上でフォームが視覚的にどのように見えるかは次のとおりです。

    次に、mail.php ファイルのコードを記述します。 変数には独自の名前を付けます。 PHP では、変数は $ 記号で始まり、その後に変数名が続きます。 変数のテキスト値は引用符で囲まれます。 変数を使用すると、フォーム要素の名前 (名前の値) を角括弧で囲むだけで、フォームの内容が管理者の電子メールに送信されます。

    したがって、$_POST 配列のデータは対応する変数に転送され、mail 関数を使用してメールに送信されます。 フォームに記入して送信ボタンを押してみましょう。 メールアドレスを忘れずに含めてください。 手紙はすぐに届きました。


    この記事では、Web サイト用に PHP でフィードバック フォームを作成する方法を学びます。 スクリプトはユーザーが入力したデータを処理し、結果を必要な電子メールに送信します。 フィードバック フォームは機能するが、レターの送信時にエラーが発生する場合のオプションを PHP で提供します。 この場合、入力されたすべての情報をファイルに書き込みます。

    それでは、始めましょう。まず、ページをマークアップし、スタイルを記述します。 マークアップには、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 ピクセル; テキスト変換: 大文字; 幅: 225 ピクセル; カーソル: ポインター; )

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


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

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

    もちろん、これらの部分はすべて条件付きです。コードを混乱させたり、逆に重要な部分を他のファイルに移動したりすることを誰も止めてくれないからです。 ただし、ハンドラーを 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); if(!$result)( return false; ) true を返します; )

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

    Function check_format($data, $type)( switch($type)( case "email": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $pattern, $data))( return true; ) Break; case "phone": $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["number"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); if(check_format($number, "phone") && 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."\n\r"; $str .= "メール: ".$status_email."\n\r"; $ str .= "= ======================================\n\r"; file_put_contents ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "フォームに正しく記入してください!"); ) )else( $msg = error_msg("エラーが発生しました!"); ) )else( exit ; )

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

    メッセージ出力

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

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

    トピックの続き:
    ルーター

    読了時間: 5 分 この記事では、Android スマートフォン用の 5 つの最高の歩数計をレビューします。アプリケーションの長所と短所を特定します。 それらはすべて同期できます...