AjaxベースのHTML5 / CSS3お問い合わせフォームを作成する方法

 
 
  
あなたのメールが送信されました。フザ!
  

  
フォーム送信時のエラー
  
 
 名   
  
 
 Eメール   
  
 
 メッセージ <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 メールを送る!  
 
  

あなたはもう一つあることに気づいたかもしれません 条件付きブロック 開始フォームの直後これはという名前の変数をチェックします $ hasError 確認時にエラーメッセージを表示します。この代替方法は JavaScriptが無効になっている場合にのみ使用されます。 ブラウザ内では動的エラーが発生しない.

ずっと下まで見つけることができます 個々のPHP変数 確認中です。一部のデータのみが入力された状態でフォームがすでに送信されているかどうかを示すステートメントが規定されています。これは、既に入力されたフィールドの内容を表示する別の代替システムです。!

私たちのフォームの完成直後はわずかです jQuery関数 私たちは書いた。これらはページロードのデフォルト実装なので、最初に説明します。しかし、ブラウザがJavaScriptを受け付けない場合は、デフォルトでPHPコードに頼ることができます。.

jQueryを開く

このトピックについて話を始める最も簡単な方法は、すぐに理解していくことです。スクリプトが実際に何をチェックしているのかを確認できるように、個々のブロックを1行ずつ分解します。.

しかし、あなたが迷ったら プロジェクトコードファイルを確認する. 完全なブロックはすべて事前に作成されており、jQueryのWebサイトに詳しく記載されています。はじめに、他のコードと同様にコードを開きます。

あなたが精通しているなら コールバック あなたは気づくかもしれません 役職（） functionには組み込みのパラメーター・セットがあります。コールバックは呼び出される小さな関数です。 他の機能からのデータの応答時.

だから、例えば、 jQuery.post（） この関数は、スライドアニメーションを表示するための独自の内部関数を呼び出すEメールを正常に撮影します。このコードはすべてそれ自身のブロックに書いて他の場所に移動することができます。ただし、このチュートリアルのために、コールバックをインライン関数として作成する方がはるかに簡単です。.

私たちのPHPを乗り越えて

言及する最後のハードルは 論理 私たちのPHPプロセッサの背後にあります。これは実際にはバックエンドシステムです メール機能を呼び出す そして メッセージを送信する. 以下の例で使用されているコードはすべて、メインの一番上にあります。 .php HTML出力の前のファイル.

ページを新しくするいくつかの内部スタイルもあります。ここで特に新しいことは何もないので、詳細については説明しません。しかし styles.css ドキュメントはプロジェクトコード内に含まれており、初歩的なCSS3技術を含んでいます。.

 
まず始めに、PHP句を開いてチェックします。 フォームが送信された場合. の 役職 変数 “提出した” 実際には、フォームの最後に追加された隠し入力フィールドです。それはに便利な方法です ユーザーが何かを送信したかどうかを確認します それでも、サーバーリソースを無駄にしません.
 
これの後で私達に3つの別々があります if / else 確認するステートメントチェック 各入力フィールドが記入されている場合. これらはすべて本質的に非常に反復的なので、ここでは論理の各ビットを含めません。しかし、あなたに簡単な例を与えるために、私は下記の電子メール確認条項を含めました：
 
//（有効なメールアドレスが必要です。（trim（$ _ POST ['email']）=== "）$ emailError = 'あなたのメールアドレスを入力するのを忘れました。'; $ hasError = true;そうでない場合（！preg_match （ "/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i"、trim（$ _POST ['email']））））$ emailError = '無効なメールアドレスを入力しました。'; $ hasError = true; else $ email = trim（$ _ POST ['email']）; 
 
PHPは値からすべての空白を削除し、何かが残っていないかどうかを確認します。もしそうなら我々は詳細があります 正規表現（正規表現） ユーザーの入力文字列が電子メールパターンと一致するかどうかを確認する.
 
あなたは確かにどのように理解する必要はありません preg_match（） このスクリプトを構築するために働きます。に便利な機能です 成功するタイプのデータに関する規則と要件を決定する, しかし、高度なプログラミング知識を実際に把握するように命じます。このシナリオでは、ユーザーが選択した少数の文字のみを入力するようにしています。 @ 後に続くシンボル 2〜4文字 を表す 最上位ドメイン.
 
ロジックがすべてパスしてエラーが返されなくなったら、メッセージを送信します。このコードでは、電子メールメッセージをカスタマイズしていくつか設定するために個々の変数を設定します。 メールヘッダ プロセス用.
 
//失敗してもエラーが発生した場合は、今すぐメールしましょう。 if（！isset（$ hasError））$ emailTo = 'youremailhere@googlemail.com'; $ subject = 'から投稿されたメッセージ'。 $ sendCopy = trim（$ _ POST ['sendCopy']）; $ body = "名前：$ name \ n \ nEmail：$ email \ n \ nコメント：$ comments"; $ headers = 'From：'。 <'.$emailTo.'>'。 "\ r \ n"。 'に返信： ' 。 $ email; mail（$ emailTo、$ subject、$ body、$ headers）; //ブール値の補完値をTRUEに設定します。$ emailSent = true;  
 
コードがどのようにあなたのEメールアドレスを理解するのか疑問に思っていたのなら、これは記入する部分です。私たちのセットの最初の変数はタイトルです。 $ emailTo どちらでも構いません メッセージを受信する予定のEメールアドレス.
 
私たちの中 $ body 我々が利用する変数 \ n メッセージに新しい行を追加するための区切り文字。これにより、 送信者名, 電子メールアドレス, 彼らのために休憩が続きます メッセージ内容. もちろん、ディスプレイを整えるのに時間を費やすこともできますが、この構造はうまく機能します。.
 
結論
 
これで高度な連絡フォームに関するチュートリアルは終了です。自分の要素を自分の要素に合わせてスタイルしたい場合は、私の例をチェックしてください。 styles.css プロジェクトコード内。ただし、ページは十分に構造化されているため、独自のルックアンドフィールを非常に簡単にデザインできます。.
 
ソースコードをダウンロードして、私がもう少し近くで行ったことを調べてください。チュートリアルに従うのは良いことですが、プロジェクトのソースに直接アクセスすることは非常に貴重です。私はまた、カスタマイズを簡単にするための簡単なスタイルシートを含めました。あなたの意見に感謝します!