フィードバックを確立します。 フィードバックフォームを作成します。 多分それはあなたにとっても面白いでしょう
実際の最も一般的なタスクの1つは、フィードバックフォームの実装です。 HTMLコードを記述し、CSSで装飾し、ユーザーから受信したデータを処理してメールに送信するPHPスクリプトを作成し、フォームに入力データの妥当性をチェックするJSスクリプトを記述し、メールボックスがボット攻撃によって崩壊しないように、スパムから発案しました。
上記のすべての点は、私たちのレビューで考慮され、詳細にコメントされます。
それでは、フィードバックフォームの作成を始めましょう。
HTML
まず、HTMLコードを記述します。これは、ユーザーが入力するフィールドを設定します。 将来的に発行されます。 フォームコードは次のようになります。
< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > 名前: label> < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > 電話: label> < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > Eメール: label> < input maxlength= "30" type= "text" name= "mail" /> div> < div class = "right" > < label for = "message" > メッセージ: label> < textarea rows= "7" cols= "50" name= "message" > textarea> < input type= "submit" value= "メッセージを送る" /> div> form>
そして視覚的には次のようになります。
私は同意します、これまでのところすべてが醜く、何も明確ではありませんが、私たちはまだ始まったばかりです。
上記のコードを詳細に検討してください。
< form method= "post" action= "mail.php" > … form>
フォームを作成するには、formタグを使用する必要があります。 コードインタプリタのフォームの開始と終了を決定するのは彼です。 他のタグと同様に、属性のセット全体がありますが、フォームが機能するために必要なのは、メソッド(サーバーにリクエストを送信するメソッド、標準でpostを使用するフォームの場合)とアクション(標準で使用するフォーム)の2つだけです。フォームのファイルハンドラーへのパスを指定します。このファイルにはPHPのスクリプトが含まれ、ユーザーが入力した値をメールに送信します。この場合、このファイルはメールと呼ばれます。 phpとそれは私たちが検討しているページと同じサイトのディレクトリにあります)。< input maxlength= "30" type= "text" name= "name" />
次に、入力があります。 これらは、ユーザーが必要な情報を入力する実際のフォームフィールドです(type \u003d "text"は、テキストになることを意味します)。 maxlength属性は、ユーザーが特定のフォームフィールドに入力できる文字数を指定します。 最も重要な属性は名前です。特定のフィールドの名前を指定します。 将来、PHPスクリプトが入力する情報を処理するのは、これらの名前によるものです。 必要に応じて、プレースホルダー属性を設定することもできます。この属性は、フィールド内にカーソルを置くと消えるテキストをフィールド内に表示します。 プレースホルダーの問題の1つは、一部の古いブラウザーではサポートされていないことです。< label for = "name" > 名前: label>
プレースホルダーを放棄した場合に使用されます。 通常のフィールド署名であるfor属性は、この署名が属する特定のフィールドを示します。 値は、対象のフィールドの名前を指定します。< textarea rows= "7" cols= "50" name= "message" > textarea>
入力がユーザーが情報を入力することを目的としているのと同じように、今回だけ、長いメッセージに対してフィールドがシャープになります。 行は、フィールドのサイズを行で、列を文字で示します。 一般的に、彼らは私たちの箱の高さと幅を設定します。< input type= "submit" value= "メッセージを送る" />
Type \u003d "submit"は、これがフォームを送信するためのボタンであることを示し、valueはこのボタン内に表示されるテキストを設定します。< div class = "right" > div>
フォームのさらなる視覚的デザインにのみ使用されます。
CSS
フィードバックフォームを見栄えよくするために、それを調整する必要があります。 次の結果の場合:
このコードを使用しました:
フォーム(背景:#f4f5f7;パディング:20px;)フォーム。 左、フォーム。 右(表示:インラインブロック;垂直整列:上;幅:458px;)フォーム。 right(padding- left:20px;)label(display:block; font- size:18px; text- align:center; margin:10px 0px 0px 0px;)input、textarea(border:1px solid#82858D; padding:10px; font- size:16px; width:436px;)textarea(height:98px; margin- bottom:32px;)input [type \u003d "submit"](width:200px; float:right; border:none; background:#595B5F;色:#fff;テキスト変換:大文字;)
CSSを詳細に説明しても意味がありません。重要な点だけに注意を向けます。
- フォーム内のすべてのタグのデザインを書くべきではありません。 数行のコードで必要なすべての要素のスタイルを設定できるように、セレクターを作成してみてください。
- 改行やインデントに余分なタイプのタグを使用しないでください < br>, < p> など、ディスプレイ付きのCSS:ブロックプロパティとパディング付きのマージンは、これらのタスクで問題なく機能します。 使用しない理由の詳細 < br> レイアウトでは、通常、記事のタグbrを読むことができますが、本当に必要ですか? ..。
- 表形式のレイアウトは使用しないでください。 これはこのタグのセマンティクスに反し、検索エンジンはセマンティックコードが大好きです。 ドキュメントの視覚的構造を形成するには、divタグと、display:inline-block(ブロックを行に配置)およびvertical-align:top(画面全体に散らばらないようにする)プロパティセットのみが必要です。 CSSでそれらを使用して、必要な高さと出来上がりを設定します。それ以上のことはなく、すべてが必要な方法で配置されます。
ウェブサイトのデザインに時間を節約したい人のために、ウェブサイト、特に自作のウェブサイトを作成するときにCSSフレームワークを使用することをお勧めします。 このプランの私の選択はTwitterBootstrapです。 それを使ったフォームのデザインのレッスンを見ることができます。
PHP
さて、今度は私たちのフォームを実行可能にする時が来ました。
サイトのルートディレクトリに移動し、そこにmail.phpファイルを作成します。このファイルには、以前にformタグのaction属性でパスを指定しました。
最終的に、彼のコードは次のようになります。
彼の番号は「。$電話」です。
彼のメール: "。$メール。 "
彼のメッセージ: "..。 $メッセージ、); エコー 「メッセージは正常に送信されました。
間もなく回答が届きます
$戻る "; 出口; )else(echo; exit;)?\u003e
このドキュメントのHTMLとCSSの部分の説明はスキップできます。 基本的に、これはサイトの通常のページであり、必要に応じてデザインできます。 その最も重要な部分であるフォームを処理するためのPHPスクリプトについて考えてみましょう。
$ back \u003d "
\\ "javascript:history.back()\\"\u003e戻る
" ;この行で、前のページに戻るためのリンクを作成します。 ユーザーがどのページからこのページにアクセスするかは事前にわからないため、これは小さなJS関数を使用して行われます。 将来的には、この変数を参照して、必要な場所に表示する予定です。
if(!empty($ _POST ["name"])and!empty($ _POST ["phone"])and!empty($ _POST ["mail"])and!empty($ _POST ["message"])) (( //ハンドラーの内部 )else(エコー 「メッセージを送信するには、すべてのフィールドに入力してください!$戻る」; 出口; )
ここでは、フィールドの充実度についてフォームチェックを添付します。 ご想像のとおり、$ _ POST ["name"]の部分では、引用符で囲んで、入力のname属性の値を記述します。
すべてのフィールドに入力すると、スクリプトは内部でデータの処理を開始します。少なくとも1つのフィールドに入力しなかった場合は、すべてのフィールドに入力するように求めるメッセージがユーザーの画面に表示されます。フォームのecho「メッセージを送信するには、すべてのフィールドに入力してください!$戻る」と、最初の行に作成した前のページに戻るためのリンク。
次に、フォームハンドラーの内部に挿入します。
$ name \u003d trim(strip_tags($ _POST ["name"])); $ phone \u003d trim(strip_tags($ _POST ["phone"])); $ mail \u003d trim(strip_tags($ _POST ["mail"])); $メッセージ\u003dトリム(strip_tags($ _POST ["メッセージ"]));
したがって、htmlタグと余分なスペースからのユーザー入力をクリアしました。 これにより、送信されたメッセージで悪意のあるコードを受信することから身を守ることができます。
チェックは複雑になる可能性がありますが、これはあなたの要求に応じて行われます。 サーバー側にはすでに最小限の保護がインストールされています。 さらに、JSを使用してクライアント側で行います。
JSを優先してサーバー側のフォーム保護を完全に放棄することはお勧めしません。これは、非常にまれですが、ブラウザーでJSが無効になっている固有のフォームがあるためです。
タグをクリーンアップした後、メッセージの送信を追加します。
郵便物 ( "[email protected]",
「your_site_addressからの手紙」、「私はあなたに手紙を書きました:」 $名前。 「」
彼の番号は「。$電話」です。
彼のメール: "。$メール。 "
彼のメッセージ: "..。 $メッセージ、 "コンテンツタイプ:text / html; charset \u003d windows-1251")
;
私たちへのメッセージの形成と送信に従事しているのはこのラインです。 次のように記入します。
- "[email protected]"-引用符の間にメールを挿入します
- 「your_site_addressからの手紙」は、メールで届くメッセージの件名です。 ここには何でも書くことができます。
- 「私はあなたに手紙を書きました:」。$名前。」 < br /> 彼の番号は「。$電話」です。 < br /> 彼のメール:「。$メール」。 < br /> そのメッセージ: "。$メッセージ-メッセージ自体のテキストを作成します。$名前-前の手順のフィールドを参照してユーザーが入力した情報を挿入します。引用符で囲んで、このフィールドの意味を説明します。鬼ごっこ < br /> メッセージ全体が読めるように改行します。
- Content-type:text / html; charset \u003d windows-1251-最後に、メッセージで送信されるデータ型とそのエンコーディングが明示的に示されます。
重要!
ドキュメントの「ヘッド」で指定されたエンコーディング( < meta http- equiv= "Content-Type" content= "text / html; charset \u003d windows-1251" /> )、メッセージからのエンコーディングContent-type:text / html; charset \u003d windows-1251そして、一般に、PHPファイルのエンコーディングは一致する必要があります。そうでない場合、メールで受信するメッセージでは、ロシア語または英語の文字ではなく、 "krakozyabry 「」が表示されます。
多くは送信されるメッセージのエンコーディングを明示的に示していませんが、一部のメールクライアントでは、将来問題が発生する可能性があるため(判読できない文字がメールに届く)、すべて同じように指定することをお勧めします。
入力したデータの妥当性についてフォームを確認する
ユーザーが不注意でフィールドを見逃さず、すべてを正しく入力するために、入力されたデータを確認する価値があります。
これは、サーバー側のPHPとクライアント側のJSの両方で実行できます。 私は2番目のオプションを使用します。これにより、人はページをさらに遷移することなく、自分が間違ったことをすぐに見つけて修正することができます。
フォームのHTML部分があるのと同じファイルにスクリプトコードを挿入します。 私たちの場合、次のようになります。
< script> function checkForm(form)(var name \u003d form .name .value; var n \u003d name .match(/ ^ [A- Za- zA- Ya- z] * [A- Za- zA- Ya- z] + $ / ); if(!n)(alert( 「名前が間違って入力されました。間違いを訂正してください」); falseを返します。 )var phone \u003d form。 電話。 値; var p \u003d phone。 一致(/ ^ [0-9 +] [0-9-] * [0-9-] + $ /); if(!p)(alert( 「電話が間違って入力されました」); falseを返します。 )var mail \u003d form。 郵便物。 値; var m \u003dメール。 一致(/ ^ [A- Za- z0- 9] [A- Za- z0- 9 \\。_-] * [A- Za- z0- 9 _] * @([A- Za- z0- 9] + ([A- Za- z0- 9-] * [A- Za- z0- 9] +)* \\。)+ [A- Za- z] + $ /); if(!m)(alert( 「メールが間違って入力されました。エラーを修正してください」); falseを返します。 )trueを返します。 )
さて、今では通常の構文解析:
ために、 フォームの送信ボタンをクリックすると、チェックが入ります。 スクリプトの起動をフォームタグに掛けます。
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
ここで、ポイントごとに、チェックの構成を取ります。
![](https://i1.wp.com/vaden-pro.ru/sites/default/files/soobchenie-o-oshibke.png)
ご覧のとおり、このようなミニチェックは各フィールドに書き込まれます。 スクリーンショットの1つのフィールドのチェックを赤い四角で強調表示しました。他のフィールドについては同様の構造であり、フィールドを追加または削除する必要がある場合は、簡単に実行できるようになりました。
このレッスンでは、関数について説明します。 郵便物 ()、作成例を使用して pHPフィードバックフォーム その後、受信したデータをメールに送信します。
このために、2つのファイルを作成します- forma.php そして mail.php..。 最初のファイルには、ユーザー入力用のフィールドを持つフォームのみが含まれます。 タグの内側 形 -ボタン 「送信」 および属性 アクションこれはハンドラーを参照します- mail.php、ボタンが押されたときにフォームのデータにアクセスするのは彼にとってです 「送信」..。 この例では、フォームデータは次の名前のWebページに送信されます。 「/Mail.php」..。 このページには、 PHPフォームデータを処理します。
これは、フォームがブラウザで視覚的にどのように見えるかです。
次に、ファイルのコードを記述します mail.php..。 変数の名前を考え出す。 に PHP 変数は符号で始まります $ 次に、変数の名前。 可変テキスト値は引用符で囲まれています。 変数を使用して、フォームのコンテンツが管理者の電子メールに送信され、フォーム要素の名前が角かっこで囲まれているだけです。 名前.
$ to \u003d " [メール保護]"; //フォームからのデータの受信者の電子メール
$ tema \u003d "PHPフィードバックフォーム"; //受信したメールの件名
$ message \u003d "あなたの名前:"。$ _ POST ["名前"]。 "
"; //フォームから取得した値を変数に割り当てますname \u003d name
$ message。\u003d "E-mail:"。$ _ POST ["email"]。 "
"; //フォーム名から取得\u003d email
$メッセージ。\u003d "電話番号:"。$ _ POST ["電話"]。 "
"; //フォーム名から取得\u003d電話
$ message。\u003d "Message:"。$ _ POST ["message"]。 "
"; //フォーム名\u003dメッセージから取得
$ headers \u003d "MIME-Version:1.0"。 "\\ r \\ n"; //ヘッダーはフォーマットと改行文字に一致します
$ headers。\u003d "Content-type:text / html; charset \u003d utf-8"。 "\\ r \\ n"; //送信されるコンテンツのタイプを示します
メール($ to、$ tema、$ message、$ headers); //変数値をメールで受信者に送信します
?>
したがって、配列からのデータ $ _POST 対応する変数に渡され、関数を使用してメールに送信されます 郵便物..。 フォームに記入して送信ボタンを押しましょう。 あなたの電子メールを含めることを忘れないでください。 その手紙はすぐに届いた。
サイトのフィードバックフォームこれは、Ajaxテクノロジーの使用に基づいていることをお見せします。 しかし、心配しないでください。これを知る必要はありません。すべての準備が整っています。このフォームをインストールして、自分でカスタマイズするだけです。
みんな-スクリプトは長い間時代遅れです。 誰かが働いている、誰かが働いていない。 そして、私は怠惰すぎて理解できず、さらに更新することもできません。 したがって、ご自身の裁量でテストしてください。
メールに送信するPHPフィードバックフォーム
この ウェブサイトフィードバックフォーム それ自体が非常に機能的で、いくつかのプラグインが接続されており、魅力的な外観を作成し、入力したデータの有効性(読み取りの正確性)をチェックします。 これらのプラグインは、偉大で強力な人々のために機能します! そしてそれらはこのように呼ばれます:
1. JQTransform -フィードバックフォームを美しくするためのプラグイン!
2. formValidator -そして、このプラグインは、入力された情報の正確さについてお問い合わせフォームをチェックし、その場合、ツールチップを表示します!
この形式の本格的な作業では、クラス--PHPMailerが使用されます。 最高の1つと見なされます!
最も賢い人へのメモ:
サイトのフィードバックフォームはHTMLで作成できます。 しかし、それはPHPでのみ動作し始めます! 何もありません!
これは、HTMLのみのフィードバックフォームを探している人のための私です。 あなたはそれをしますが、それはうまくいきません!
したがって、PHPをサポートしている必要があります。このお問い合わせフォームでは、PHPは少なくともバージョン5である必要があります。 私はそれを明確にしたいと思いますか? さらに、現在、通常のホスティングはこれらの条件をサポートしています!
このフィードバックフォームをウェブサイトwww.tutorialzine.comで掘り下げました。リンクから、元のページに直接アクセスできます。 このフォームの作者のサイト!
すべて英語で書かれているので、サーシャと私はこのお問い合わせフォームとそれに接続されているプラ\u200b\u200bグイン自体をロシア化するために少し手を加える必要がありました。
正直なところ、さまざまなわき柱が出現し始めたので、この「フォーム」で2日間過ごしました。未完成のフィードバックフォームを投稿したくなかったので、さらに美しくなりました。 したがって、あなたがすべてを自分で行うのが好きで、考えがあなたの最も明るい頭に入る場合-このフォームを自分でロシア化するために、フレーズを単に翻訳することに限定されないので、私はあなたにいくつかのヒントを与えます:
1.このフィードバックフォームはブルジョアジー向けに作成されており、そこからダウンロードされるため、通常のロシア語の文字の代わりに、クラクジー的に送信されます。 エンコーディングを理解します。 とにかく、すべての「シール」はこれに関連付けられます!
2.検証スクリプトは最初は私たちの手紙を理解していないので、そこに書く必要があります!
3.これらのアクションの後でも、ロシア語で手紙の件名を指定すると、手紙には件名が付いています-件名はありません(正しく書いたと思います)。PHPMailerクラスファイルでエンコーディングを指定すると、これが処理されます。
4.元の形式では、入力フィールドのテキストは中央ではなく下部に押されていました。 これはJQTransformプラグインの不具合です。
まあ、彼はすべてを描いて警告したようです。 さらに進みましょう!
それでは始めましょう。最初に行うことは、ページをレイアウトしてスタイルを設定することです。 マークアップには、2つの入力(電話、メール)と1つのテキスト領域を含む通常のフィードバックフォームが含まれます。このフォームには、ユーザーがメッセージを入力します。 フォームハンドラーを別のページに配置しましょう。
フィードバックフォーム
スタイルを書いてみましょう:
Html、body(height:100%; margin:0;)html(background-color:#fff; color:#333; font:12px / 14px Verdana、Tahoma、sans-serif; cursor:default;)#feedback-form (background-color:#ececec; margin:50px auto 0; text-align:center; width:430px; padding:15px;)#feedback-form h2(margin-bottom:25px;)#feedback-form input、#feedback -form textarea(background-color:#fff; border:1px solid#A9A9A9; padding:1px 5px; width:90%;)#feedback-form input(height:26px;)#feedback-form textarea(height:75px; padding-top:5px;)#feedback-form input(margin-top:15px; background-color:#0B7BB5; border:1px solid #CCCCCC; color:#FFFFFF; font-weight:bold; height:40px; line-高さ:40px;テキスト変換:大文字;幅:225px;カーソル:ポインタ;)
これらすべてのアクションの結果として、次のフォームが表示されます。
次に、サーバーに取り組みます。 スクリプトにはいくつかの部分が含まれます。
- カスタマイズ;
- 二次機能;
- 受信データの処理;
- メッセージの表示。
もちろん、これらすべての部分は条件付きです。なぜなら、コードを台無しにしたり、逆に重要な部分を他のファイルに取り込んだりすることを誰も気にしないからです。 ただし、他のプロジェクトに接続しやすいように、ハンドラーを1つのファイルにまとめた方がよいと思います。
カスタマイズ
この段階で、$ my_email(データの送信先のメールボックス)、$ path_log(ログファイルへのパス)、$ time_back(ユーザーがサイトに戻った時刻)の3つの変数を作成します。
//メールボックスを指定します$ my_email \u003d " [メール保護]"; //ログの保存場所を指定します$ path_log \u003d" log.txt "; //ユーザーがサイトに戻った時間(秒)$ time_back \u003d 3;
二次機能
ここでは、データ処理を簡素化する5つの関数について説明します。
テンプレートの表示:
関数error_msg($メッセージ)($メッセージ\u003d "
「。$メッセージ。」
"; return $ message;)function success_msg($ message)($ message \u003d"「。$メッセージ。」
"; $メッセージを返す;)フォームからのデータのクリア:
関数clear_data($ var)(return trim(strip_tags($ var));)
手紙を送る:
関数send_mail($ email、$ subj、$ text、$ from)($ headers \u003d "From:"。$ From。 "\\ R \\ n"; $ headers。\u003d "MIME-Version:1.0 \\ r \\ n"; $ headers。\u003d "Content-Type:text / html; charset \u003d utf-8 \\ r \\ n"; $ result \u003d mail($ email、$ subj、$ text、$ headers); if(!$ result)(return false;)trueを返します;)
そして最後の機能は、電話とメールのフォーマット記録の正確さをチェックします。
関数check_format($ data、$ type)(switch($ type)(case "email":$ pattern \u003d "/ ^ * @(+(* +)* \\。)++ $ / i"; if(preg_match( $ pattern、$ data))(return true;)break; case "phone":$ pattern \u003d "/ ^(\\ +?\\ d +)?\\ s *(\\(\\ d + \\))?[\\ s -] *([\\ d-] *)$ / "; if(preg_match($ pattern、$ data))(return true;)break;)return false;)
ご覧のとおり、私たちが書いた関数はすべて小さいです。 それらをデータ処理の範囲から除外することもできますが、check_format()などの何かを変更または拡張する必要がある場合は、はるかに簡単で便利です。
受信データの処理
まず、ユーザーがどのページから来たかを調べます。 次に、メッセージとレターの送信ステータスが保存される変数を定義します。
//前のページを調べます$ prev_page \u003d $ _SERVER ["HTTP_REFERER"]; //メッセージ$ msg \u003d ""; //メールステータス$ status_email \u003d "";
さて、エンコーディングに問題がないように、ヘッダーを使用して示します。
ヘッダー( "Content-Type:text / html; charset \u003d utf-8");
If($ _ SERVER ["REQUEST_METHOD"] \u003d\u003d "POST")(if(isset($ _ POST ["number"]、$ _POST ["email"]、$ _POST ["question"]))($ number \u003d clear_data($ _POST ["number"]); $ email \u003d clear_data($ _ POST ["email"]); $ question \u003d clear_data($ _ POST ["question"]); if(check_format($ number、 " phone ")&& check_format($ email、" email ")&&!empty($ question))(//文字の作成$ e_title \u003d"(!LANG:新しいメッセージ"; $e_body = "!} "; $ e_body。\u003d"
"; $ e_body。\u003d"電話: "。$番号; $ e_body。\u003d""; $ e_body。\u003d"メール: "。$メール; $ e_body。\u003d"
"; $ e_body。\u003d"質問: "。$質問; $ e_body。\u003d""; $ e_body。\u003d""; // ENDレターの作成if(send_mail($ my_email、$ e_title、$ e_body、$ prev_page))($ status_email \u003d" success "; $ msg \u003d success_msg("ご質問ありがとうございます。
すぐに返信します。 ");)Else($ status_email \u003d" error "; $ msg \u003d error_msg("メールの送信中にエラーが発生しました。 ");)//ファイルに書き込む$ str \u003d"時間: ".date(" dmY G:i:s ")。" \\ n \\ r "; $ str。\u003d" Phone: "。$ number。" \\ n \\ r "; $ str。\u003d" Mail: "。$ email。 "\\ n \\ r"; $ str。\u003d "Question:"。$ question。 "\\ n \\ r"; $ str。\u003d "Email:"。$ status_email。 "\\ n \\ r"; $ str。 \u003d "\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \\ n \\ r"; file_put_contents($ path_log、$ str、FILE_APPEND);)else($ msg \u003d error_msg( "フォームに正しく入力してください!");))Else($ msg \u003d error_msg( "エラーが発生しました!");))Else(exit;)
記述されたコードでは、フォームが送信されたかどうかを判別します。そうでない場合は、exit関数を使用してこのファイルを閉じます。 次に、POST配列内のデータを使用してセルの存在を確認し、セルが来た場合は、ゴミの可能性を取り除きます。 クリアした後、メールと電話の形式、および質問変数内のテキストの存在を確認します。 次に、手紙を作成し、ログを送信および書き込みます。ここでは、データに加えて、手紙の送信ステータスを保存します。 このようにして、mail()関数を追跡し、同時にデータを失うことはありません。
メッセージの表示
操作が成功したか「あまり」実行されなかったことをユーザーに通知し、フォームを使用してサイトに戻す必要があります。 このために、PHPスクリプトが含まれているマークアップを使用します。
ユーザーをサイトにリダイレクトするには、refresh metaタグを使用します。ここで、作成された変数を使用してPHPコードを挿入します。 また、ページをもう少し動的にするために、JavaScriptを少し使用する必要があります。 timeBack()関数を記述します。この関数は、リダイレクトされるまで秒を逆の順序でカウントします。
ページに戻ります 全体
以上で、フィードバックフォームの準備が整いました。
著者から: 友達に挨拶します。 この記事は続きで、ページをリロードせずにフォームデータをサーバーに送信することを実装しました。 ここでは、このトピックを継続し、サーバー上でデータを受け入れ、フォームを電子メール(email)に送信する方法を学習します。 それでは、フィードバックフォームをカスタマイズして、メールに送信する機能を追加しましょう。
現在の記事のソースファイルは、でダウンロードできます。
このレッスンでは、すべてを可能な限りシンプルにし、独自に作成します。 特に、メールを送信するために、過去にメールを送信するためによく使用されていたmail()と呼ばれる特別なPHP関数を使用します。
mail関数の構文から始めましょう。 この関数には、3つの必須パラメーターと2つのオプション(オプション)があります。 必要なパラメーター:
to-受信者の電子メール(コンマで区切ってリストすることにより、複数のアドレスを指定することもできます);
件名-メールの件名。
メッセージ-メッセージテキスト。
オプションのパラメーターのうち、ほとんどの場合、最初のパラメーターのみが使用されます。これは、メッセージヘッダー(エンコード、送信者、メッセージタイプなど)を担当します。
この機能を使ってメールを送ってみましょう。 これは、フォームからデータを受け取るmail.phpファイルで行います。 このファイルの新しいコードは次のようになります。
メッセージが送信されました
";)else(エコー"間違い!
"; }< ? php $ to \u003d " [メール保護]" ; //受信者のアドレス $件名\u003d 「折り返し電話を注文する」; //手紙のトピック $メッセージ\u003d "名前:($ _POST ["名前 "])\\ r \\ n"; //テキストに名前を追加します $メッセージ。 \u003d "電話:($ _POST ["電話 "])"; //電話をテキストに追加 $ヘッダー。 \u003d "コンテンツタイプ:テキスト/プレーン;文字セット\u003d utf-8"..。 "\\ r \\ n"; //エンコーディングを設定します $ヘッダー。 \u003d "差出人:メール [メール保護]"。" \\ r \\ n "; //送信者を追加します if(mail($ to、$ subject、$ message、$ headers))( エコー " メッセージが送信されました ) そうしないと ( エコー " 間違い! |
これは、送信するメッセージを作成できるようにするための最小限のコードです。 それがどのように機能するかを確認しましょう:
ご覧のとおり、コードは機能し、応答として、手紙が送信されたというメッセージを受け取ります。 ローカルサーバーで作業しているため、メールは実際にはmail()関数によってここに送信されるのではなく、テキストファイルとして特別なフォルダーに保存されます。 Open Serverでは、これは\\ userdata \\ temp \\ email \\フォルダーです。 このフォルダを開いて、文字がそこにあることを確認しましょう。次のようになります。
いいね! JSスクリプトで修正しても問題がないことがいくつか残っています。 たとえば、メッセージをプレーンテキストではなくHTMLコードで表示し、メッセージの送信後にフォームフィールドをクリアする必要があります。 結果のJSコードは次のようになります。
$(function()($( "#recall")。submit(function(e)(e.preventDefault(); var data \u003d $(this).serialize(); $ .ajax((url: "mail.php "、タイプ:" POST "、データ:データ、beforeSend:関数()($("#送信 ")。next()。text("送信... ");)、成功:関数(res)($ ( "#recall")。find( "input")。val( ""); $( "#submit")。next()。html(res);)、error:function()(alert( "Error! ");)));));));
$(関数()( $( "#recall")。 送信(関数(e)( e。 PreventDefault(); var data \u003d $(これ)。 シリアル化(); $。 ajax(( url: "mail.php"、 タイプ:「POST」、 データ:データ、 beforeSend:関数()( $( "#submit")。 次 ()。 テキスト( "送信中..."); |