ランディングページのフィードバックフォーム。ランディングページを再読み込みせずにレターを送信するためのフォーム。フォーム用のphpハンドラーを作成します。

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

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

1 ページに無制限の数のフォームを接続します。

フィールドが正しく入力されていることを確認します。

通知の設定。

各フォームに文字を使用する機能。

文字の種類 - (HTML タグが使用されている場合)

無制限の数のアドレスに送信します。

各フォームの個別のカスタマイズ。

スクリプトはページをリロードせずにで実行されます。

スパムボットからの保護。

初期設定。
スクリプトはライブラリに基づいて動作するため、最初に行う必要があるのはライブラリを接続することです。これを行うには、Google ホスト型ライブラリを使用することをお勧めします。

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

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

HTML と必須の属性。
すべてのフォーム要素に必須の属性は name="" 属性です。これは後続のフォームのカスタマイズに必要です。
ボタン (type="button") の場合は、 class="フィードバック" を指定する必要があります。また、「フィードバック」クラスを持つ HTML タグはどれもボタンとして機能するという事実にも注目していただきたいと思います。モーダルウィンドウでフォームを呼び出すには、まずアクションを定義する必要があります。任意のタグ（例: 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 - フォーム要素の値。

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

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

ランディングページの主な要素には、連絡先情報とフィードバックのリクエストを含むブロックがあります。これらのブロックは非常に重要です。まず第一に、潜在的な消費者はランディングページに提示される十分な情報を持っていないことが多いことを理解する必要があります。人によっては、テキストコンテンツを読むよりも生きている人の言葉から情報をよりよく認識する人もいます。したがって、訪問者は質の高いフィードバックを提供する必要があります。どうやってするの？

連絡先を含むブロックはすべてのランディングページに存在する必要があります。番号や住所を一番奥の隅に隠す人もいますが、これは根本的に間違ったアプローチです。重要なのは、訪問者が 1 つのページのどこかではなく、すべてのページで電話番号と住所を確認できるようにすることです。電話番号のないページは非人間的に見えます。店舗管理者が意図的にすべての連絡先を避けているように感じられます。電子メールのみが指定されている場合の、間違った連絡先組織の典型的な例を次に示します。

訪問者はいつでもストアと迅速にコミュニケーションできる必要があるため、これは間違いです。これを行うには、ランディングページの最も目立つ部分 (ロゴから遠くないヘッダー内) に連絡先を配置する必要があります。 8-800の番号をレンタルすることはできますか? この場合、多くの消費者にとって、店頭にそのような数字が存在することがさらなる信頼を呼び起こすため、聴衆からのより忠実な態度を期待することができます。

ランディングページにフィードバックフォームを置かない方法

ランディングページでフィードバックフォームを使用し、折り返しの電話番号を残していただくよう求めることをお勧めします。アプローチは良いですが、フォームが押し付けがましくなりすぎないようにしてください。一部のランディングページでは、これを恐ろしい力で行い、訪問者が最終的にどこにたどり着いたのかを理解しようとしている間にフォームを表示します。画面を占領したり、立ち入った質問で訪問者の注意をそらすことなく、フォームが側面または下部のどこかに表示されることが最善です。店舗に対応可能なオペレーターがいない場合、訪問者はほぼ即時の応答を期待するため、そのようなリクエストを避ける必要があります (誰もが今ここで助けを必要としています)。フィードバックフォームでは、電話番号だけでなく、その他の連絡先情報も質問できます。

よく考えられたフィードバックを整理するには、さまざまなサービスのウィジェットを使用できます。これらには、コールバックフォーム、有料および無料のオンラインコンサルタントなどが含まれます。

1 つのページ内で、フィードバックを整理するためにさまざまなツールを組み合わせることができますが、この場合、ツールがあまりにも押し付けがましく、訪問者の注意を過負荷にしてはなりません。さまざまな形式の永続的なウィンドウのプレッシャーの下では、訪問者はランディングページから離れることを好むでしょう。それで何かを買う機会。

それでは始めましょう。

1. jQueryライブラリの接続

おそらくあなたもこれを行うでしょうが、とにかくそれについて思い出させておきます。
以下を head に追加する必要があります。

2.JavaScriptを追加する

ページをリロードせずにフォームを送信するには、ajax テクノロジーを使用する必要があります。接続されたライブラリの後に次のスクリプトを含める必要があります。

function AjaxFormRequest(result_id,formMain,url) ( jQuery.ajax(( url: url, type: "POST", dataType: "html", data: jQuery("#"+formMain).serialize(), success: function(応答) ( document.getElementById(result_id).innerHTML = 応答; )、エラー: function(response) ( document.getElementById(result_id).innerHTML = "

フォームの送信中にエラーが発生しました。もう一度やり直してください

"; ) )); $(":input","#formMain") .not(":button, :submit, :reset, :hidden") .val("") .removeAttr("checked") .removeAttr (「選択済み」);

その下部

$(":input","#formMain") .not(":button, :submit, :reset, :hidden") .val("") .removeAttr("checked") .removeAttr("selected");

送信ボタンをクリックした後、フィールドが空になるようにする責任があります。チェックボックスやラジオボタンを特定のフォームに追加した場合、それらをクリアすることもできます。不要な場合は、簡単に削除できます。

3.htmlを追加

適切な場所に、以下のフォームのコードを挿入します。

連絡先を残していただければ、当社のコンサルタントがご連絡させていただきます

このフォームには、名前と電話番号の 2 つのフィールドがあります。そのため、Landing だけでなく、あらゆる Web サイトでコールバックを注文するためのフォームとしても使用できます。メールアドレスや住所などの独自のフィールドを追加できます。
ちなみに、最後の入力は送信ボタンで、 div id=messegeResult で囲まれています。全体的なトリックは、ボタンを押すとデータがメールに送信され、ボタン自体が消え、その代わりに「メッセージは正常に送信されました」のようなテキストが表示されることです。すぐに折り返し電話させていただきます。
たとえば、div id=messegeResult に 2 行目を含めることができます。連絡先を残していただければ、当社のコンサルタントからご連絡いたします。ボタンをクリックすると、このテキストが上に表示されたものに変わります。一般に、ボタンをクリックすると、この div 内のすべての内容が、送信の成功に関するメッセージに変わります。

4.フォーム用のphpハンドラーを作成します。

まず、ファイルを作成し、それに zakiz.php という名前を付ける必要があります。
次に、処理を担当する次のコードをそこに挿入します。

4 と 11 では、フォームのデータの送信先となる電子メールを指定する必要があります。 $message の 6 行目はレターの内容全体で始まります。そのため、住所やメールアドレスなどの新しいフィールドを追加する場合は、既存の名前と電話番号の例に従ってここに追加するだけです。
行 15 には、前の段落の div id=messegeResult に表示されるメッセージが正確に含まれています。したがって、自分に合わせて変更できます。

5. スタイルを設定する

フォームを多少なりとも読みやすくするために、スタイルを設定しましょう。必要に応じて変更することもできます。

Form( 幅:350px; 高さ:225px; 位置:絶対; 上:50%; 左:50%; 右:50%; 下:50%; 背景:#f1f1f1; パディング: 20px; ) .form p( font-サイズ:18px; カラー:#333; テキスト整列:センター; ) input(背景:#fff; フォントサイズ:15px; ボーダー:2px ソリッド #336699; パディング:7px 10px 6px; 10px 0 0; フォントサイズ:15px; ボックスシャドウ:インセット 0 2px 7px rgba(0,0,0,.15); input:hover, input:focus(border-color:#ff6600;) color:#ccff33; ) .btn(vertical-align:middle;font-size:18px;color:#fff;font-weight:700;text-align:center; line-height:1.3 !重要;パディング:5px 10px 5px;margin:10px 0 0;border:0;cursor:pointer;background:#97ca33;) .btn:active( color:rgba(255,255,255,.6); 背景 :#57900f; box-shadow:inset 0 2px 15px rgba(0,0,0,.2);

すべてが正しく行われていれば、フォームが完成するはずです。以上です、ご清聴ありがとうございました:)

このようなジュエリーの作業には料金を支払う必要があることを理解する必要がありますが、支払う価値はあります。作成に関連するすべての問題について話し合う必要があります。これは、作業のコストとランディングページ全体に影響します。作成するときは、美しさから使いやすさまで、人々の注目を集める可能性のある小さなことをすべて考慮する必要があります。さらに、心理学と潜在意識についても忘れてはなりません。多くの決断は無意識下で行われます。製品の購入も例外ではありません。あなたが、ある人の問題に対する解決策、この解決策の説明、この解決策が正しくてその人を助けるだろうという信念、この目標への集中、行動への推進力、そして行動そのものを含む正しい論理的な連鎖を構築すれば、そうすれば、訪問者のほとんどを顧客に変えることができます。さらに、ページのターゲットアクションが、販売、ニュースレターの購読、訪問者の連絡先情報の取得など、どのようなものであっても構いません。

クライアントのフィードバックフォームには特別な注意を払う必要があります。たとえ直接的でなくても、クライアントとのコミュニケーションですから。ウェブサイトだけではクライアントのニーズに完全に応えることはできないため、クライアントとのコミュニケーションは非常に重要です。問題を解決するために標準的なアプローチを選択する人はほとんどいないため、標準的なリクエストのみを処理できますが、そのリクエストは非常に少数です。フィードバックを通じてクライアントに連絡を取ることで、販売/取引/購読の売上高だけでなく、会社の評判も高めることができます。

なぜなら、個人的なコミュニケーションと顧客満足度は、良い評判を築くために非常に重要だからです。このようなフォームの作成には常に特別な注意が払われています。フィードバックがインストールされているテンプレートを使用すると、ページの機能が大幅に制限されるため、このフォームはすべての SEO 要件に従って、常に手動でメインコードに入力されています。このフォームには特別なアプローチもあります。目に見える場所に配置する必要があり、直感的で使いやすいものである必要があり、クライアントに多くの不必要な情報を要求せず、メールアドレスと名前のみを入力する必要があります。場所は、必要な情報を素早く検索して使用することに慣れている人々のカテゴリーに影響を与えます。一部の人にとっては、ページに数秒滞在するだけで、そのサービスを利用するかどうかを判断するのに十分です。したがって、そのようなユーザーでもオファーに興味を持ち、連絡先を残すことができるような場所である必要があります。

すべてのインターネットユーザーがこの問題に慣れているわけではないため、ページが理解しやすいことは非常に重要です。経験の有無を問わず視聴者にリーチするには、操作を完了するための一連のアクションを直感的に理解する必要があります。そして同様に重要なのは情報量です。これは潜在意識の信頼レベルに影響を与えます。ページで多くの連絡先を要求する場合: 電話番号、電子メール、カード番号、住所など。このページは詐欺師によって作成されたのではないかと感じるかもしれません。そして、これはサイト全体の評判に大きな打撃を与えます。したがって、クライアントとコミュニケーションをとり、クライアントの要望を明確にし、取引条件を満たすのに十分なだけの情報を正確に要求する必要があります。ランディングページ全体は、複雑な方法で作成されたシンプルなサイトです。ユーザーにとっては簡単ですが、開発者にとっては作成が困難です。しかし、そのような作業には努力する価値があります。

読者の皆さん、こんにちは。私は経験を積んだので、PHP フィードバックフォームの操作原則についてお話します。すべてがどのように機能するのか、また入力フォーム自体 (その入力フィールド) と PHP で記述されたハンドラーファイルの間でどのように対話が行われるのかを理解できるように、明確な例を示します。さらに、ソースとともに無料でダウンロードできます。

もちろん、HTML / CSS について少なくとも少しは理解していれば大丈夫です。なぜなら... 同様に、コードをページにドラッグする必要があります。 PHP 言語については触れません。自分で行う必要がある変更をすべて示します。

更新: 読者からの反応に基づいて、もっと美しくて機能的なものが必要であることに気づきました。実際に会って、チェックして見てください。一番好きなものを選んでください）

UPDATE2: バージョン 3.0 アダプティブランディング + UTM タグの送信を備えた Ajax フォーム、読んで確認してください。きっと気に入っていただけるでしょう

初めて PHP で独自のフィードバックフォームを作成しようとしたときのことを思い出しました。正直に言うと、これは非常に労力がかかりました。何がどのように起こっているのか理解できませんでした。忍耐と忍耐、そして友人、そしてあなたも成功するでしょう。

PHP フィードバックフォーム - 構造

ランディングページの例を使用してフィードバックフォーム自体の分析を学習します。ちなみに、別の記事があります。以下のボタンを使用して、実際にどのように動作するかを確認できます。この 1 ページのページとメインの php ハンドラーファイルのソースを添付します (このファイルは電子メールを処理して送信します)。

ソースをダウンロードしてアーカイブを解凍すると、次のファイル構造が表示されます。

画像 - ランディングページ自体、ボタンなどに使用されるすべての画像。
js - ページ上のポップアップモーダルウィンドウやその他の視覚効果などを提供する JavaScript スクリプト
Index.html - 1 ページのページのインデックスファイル
Index1.php はフォームからの値が転送されるハンドラーファイルで、受け取った変数からレターが生成され、指定された電子メールアドレスに送信されます。 Index1.php は、index.html (つまり、1 ページのページ) への自動リダイレクトによるデータ送信の成功に関する中間通知ページとしても機能します。

サイトファイルが配置されているホスティングが PHP 処理をサポートしていることが重要です。サポートされていない場合、index1.php ファイルは実行されず、機能しません。この微妙な違いを明確にするには、ホスティングが登録されているキャンペーンに問い合わせるか、単にテストしてください。動作するということは、サポートがあることを意味します。そうでない場合は、PHP 言語サポートオプションを有効にします。

すべての要素 (ページ、フォーム、ハンドラー) がどのように相互作用するかを示す図を見てください。

フォームとハンドラーを呼び出すためのソースコード

フィードバックフォームを含むモーダルポップアップウィンドウを表示するボタンの 1 つがどのように機能するかを見てみましょう。この指定されたソースコードは、ページに何度でも挿入でき、デザインやニーズに合わせて自分でカスタマイズする必要があります。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

コールバックをリクエストするコールバックをリクエストする

以下は、index1.php ハンドラーの完全なソースコードです。メールボックスへの送信を設定するには、「」を変更します。 [メールで保護されています]「あなた自身のもので、残りは原則として変更しないでください」

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

ご連絡させていただきます

body (background: #22BFF7 url(img/zakiz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); に連絡されます。 /*3 秒 (3000 ミリ秒) 後に現在のページアドレスを変更します*/

フォームの機能を確認する

ウィンドウを呼び出して、フォームのテストチェック用のデータを入力します

ホスティングが PHP ファイルの処理をサポートしている必要があることをもう一度思い出してください。そうでない場合、ハンドラーは単に実行されず、指定された電子メールアドレスにレターは送信されません。フィードバックフォームが正常に完了した結果