ホームページ » コーディング » AjaxベースのHTML5 / CSS3お問い合わせフォームを作成する方法

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

    この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る.

    それはそれが訪問者の意見や問い合わせをウェブマスターに渡すメッセンジャーとして機能するので、連絡フォームはあらゆるウェブサイトにとって致命的です。 Web上には数え切れないほどの連絡フォームがありましたが、残念ながらそれらのほとんどは内部の作業部分についてあなたに説明していないので、ポップテクノロジー、HTML5およびCSS3に基づいて最初から高度な連絡フォームを作成することを教える詳細なチュートリアルがあります.

    WebベースのEメール連絡フォームの性質を考慮すると、Eメールを送信するためのPHPバックエンド・コードと、リッチ・ユーザー・インターフェース用のjQuery関数という2つの別々のアプリケーション・フィールドに飛び込むことも必要です。最終的には、後でカスタマイズすることを念頭に置いて書かれた、完全に動的で機能的な連絡フォームが残ります。.

    あなた自身の高度な連絡フォームを作成するために今すぐ始めましょう!

    へのショートカット:

    • デモ - あなたが構築しているもののプレビューを取得します
    • ダウンロード - すべてのファイルをダウンロード (php + css)

    アプリケーションの構築

    始めるためには、うまくいくために何らかのWebサーバーが必要です。 Windowsマシンを実行している場合は、WAMPがおそらく最善の選択肢です。 MacユーザーはMAMPという同じようなプログラムを持っています。これはインストールが同じくらい簡単です。.

    これらのパッケージはあなたのマシン上にPHPへのフルアクセスを持つローカルサーバーをセットアップします。あるいは、サーバースペースを所有している場合、または遠隔地へのフルサーバーアクセスがある場合は、代わりにそれを使用することができます。私たちはMySQLデータベースを必要としません。.

    サーバーがセットアップされたら アプリケーションを格納するための新しいフォルダを作成します。. これは有害でもなく、最終製品にも関連していないため、好きな名前を付けることができます。フォルダ構造は、Webブラウザでファイルにアクセスするときに使用されます。簡単な例は http://localhost/ajaxcontact/contact.php

    ファイルを作ってみよう!

    私たちは2つのコアファイル内でのみ作業します。まずコアが必要です .php アプリケーションロジックだけでなく、フロントエンドのHTMLマークアップも格納するファイルです。下記は私達の開始ファイルから取ったサンプルコードです。.

       jQueryを使ったHTML5 / CSS Ajaxお問い合わせフォーム    

    はじめに、私たちの文書に簡単な見出しの節を書きました。これは一般を含みます HTML5のDoctype宣言 そしていくつかのHTML / XML文書要素。これらは必ずしも必要というわけではありませんが、より古い(そしてより新しい)ブラウザでのレンダリングプロセスを容易にします。また、それ以上の情報を提供するために害はありません.

    もう少し下の方で、見出しの終了タグの直前に2行が表示されます。最初は私達を含んでいます オンラインのGoogle Code RepositoryからのjQueryスクリプト. これは、動的ページエラーが機能するために必要です。この直下に基本的なものを含めることができます。 CSSドキュメント すべてのページスタイルを含む.

    私たちの文書本体の中にはいくつかあります。 部門を含む 主な連絡フォームを差し控える。これには3つの入力要素があります。 ユーザーの名前, 電子メールアドレス, そして プライベート・メッセージ. HTMLマークアップはかなり標準的なものであり、中間開発者の頭を悩ますべきではありません。.

     

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

    ここでは基本的な PHP条件付きコード いくつかのページコンテナ内にネストされています。これはという名前の変数の設定値をチェックします $ emailSent そして、もしtrueなら、成功メッセージを表示します。.

    フォームHTML内

    それ以外の 最初に送信するコンテンツがないため、ステートメントは最初のページの読み込み時に実行されます。ここに私たちは含まれます フォーム要素の簡単なコレクション そして 送信ボタン.

    フォーム送信時のエラー




    あなたはもう一つあることに気づいたかもしれません 条件付きブロック 開始フォームの直後これはという名前の変数をチェックします $ 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 = '[email protected]'; $ 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 プロジェクトコード内。ただし、ページは十分に構造化されているため、独自のルックアンドフィールを非常に簡単にデザインできます。.

    ソースコードをダウンロードして、私がもう少し近くで行ったことを調べてください。チュートリアルに従うのは良いことですが、プロジェクトのソースに直接アクセスすることは非常に貴重です。私はまた、カスタマイズを簡単にするための簡単なスタイルシートを含めました。あなたの意見に感謝します!