メールのModx圧倒的なフォーム。 zvorotny zv'yazokMODXrevoを形成します。 通知に関する通知からチャンクを作成します
私はすでに、フォームをリンクで-リンクのリンクで-プラスのようにフォームを作成する方法についていくつかのレッスンを持っています:リロードせずにフォームを修正する、єvykno、あなたが歌うもの、通知が送信されたものなど。 まあ、そして明らかにマイナス:コードはjsiに追加されます cssファイルこれは速度にマイナスを与え、レンダリングされたjsはwikiのタイプを必要としません。新しいものを通して、バリデーターはフォワードを表示します-html5ではそれを表示する必要はありません。
したがって、私は純粋なFormItでrobitiフォームを作成します。これは、今日のレッスンとまったく同じです。
一度にフォームのHTMLマークアップの後に、次のコードを続けることができます。
特別なことは何もないので、ブートストラップ4マークアップで標準を移動します。
[[!FormIt? &hooks = `spam、email`&emailTpl =` email-tpl`&emailTo = `[[++ emailsender]]`&emailSubject =`サイトからのシート[[++site_url]]`&validate = `workemail:blank、name:required 、email:email:required、message:required:stripTags、phone:required`&successMessage = `
Dyakuyu、あなたの動物が送られました。
`]] [[!+ fi.successMessage:defaultNUM]]コードを解析して、一番下の獣に行きましょう:
&hooks-自作のものを含むさまざまなフックがここに追加されます:ビューパッドには2つの標準フックがあります: 郵便のスクリーンショット。 reshta khukivについて、ビデオで報告します。
&emailTpl-ページレイアウトのチャンク。次のコードの場合があります。
人のタイプ:[[+ name]]
電話:[[+ phone]]
Eメール:[[+ email]]
通知:[[+メッセージ]]
&emailTo-フォームが置き換えられるメールアドレス この特定のタイプに指定されたシステムが構成されていません(キー)++ emailsender
&emailSubject-実施されているシートの件名
&validate-埋め戻し用のカスタム言語フィールド、多くの場合スパム保護用のフィールド
&successMessage-オーバーストレングが成功した後の通知
ビデオを気にし、ドキュメントを読むフォームコードは分析しません:docs.modx.com/extras/revo/formit
フォームに添付されたファイル
添付ファイルを添付して編集できるようにするには、フォームタグに書き込む必要があります
Enctype = "multipart / form-data"
ファイルを添付するためのフィールドを追加する必要があります
チェックボックスとオプションの処理
Dekіlkaは片側に形成されます
スキンフォームのウィキに書き込むだけです
&submitVar='私は英語の形式です'
スキンフォームには独自の名前があります。
スパムと戦う
言わないでください、でもあなたは間違いなくスパムです 効率的な方法彼と戦うために-あなたがそれを自分で試すことができるように。
FormIt 3.0では、送信フォームの集計に使用されるメソッドの数が更新されています。 3.0ではopensslに置き換えられているため、最大約3.0 mcryptはひねりが加えられているため、PHP7.2ではmcryptは非推奨になっています。 FormIt 3.0には、マネージャーからアクセスできる移行ページが付属しています。
FormIt 2.2.9と同様に、すべてのフィールドは自動的に適用されたhtml_entitiesに設定されます。 保存/拡張用のHTMLタグを生成するには、htmlタグを作成する必要があるため、スキンフィールドに特別なCharsバリデーターを入力する必要があります。
FormIt 1.1.4と同様に、すべてのフィールドは、適用されたstripTagsに自動的に結合されます。 保存/防止用のHTMLタグを生成するには、スキンフィールドで[タグバリデーター]を選択します。これらのタグのスタイル設定が受け入れられます。
使い方
使用するフォームを含むリソースにFormItスニペット呼び出しを配置するだけです。 同様の先行バージョン(MODX Evolutionで最小のeForm)に関係なく、チャンクでフォームを開始し、FormItスニペット呼び出しでチャンクを呼び出すことはできません。文字通り、スニペット呼び出しを必要に応じてフォームに転送します。 スニペット呼び出しで「フック」(または検証後処理スクリプト)を指定します。 次に、を介して検証を追加します &検証と &customValidatorsスニペットタグのパラメータ。
側面にたくさんのフォームがある場合は、 &submitVarフォーム内のフォーム要素の名前へのSnippet呼び出しのプロパティ(つまり、&submitVar = `form1-submit`)。 Tseは、そのPOST変数を使用してフォーム要求を処理するようにFormItに指示します。 INPUT type = "submit" name = "form1-submit"で複数のフォームを使用する必要がありますが、送信する必要のある要素は機能しません。
利用可能なプロパティ
悪臭は、FormIt呼び出しの明らかなやり過ぎです(フック固有のプロパティは含まれていません)。
名前 | 説明 | デフォルト値 |
---|---|---|
preHooks | フォームの読み込み時に、他のスクリプトと同様に、どのスクリプトを起動するか。 フックのコンマ区切りリストを使用することもできますが、いつものように、プロシージャは使用しません。 フックは、そのスニペットを実行するスニペット名にすることもできます。 | |
renderHooks | フォームが読み込まれると、実行するスクリプトがあれば、preHooksが終了し、すべてのフィールドとエラーが設定されます。 アーチによって分割することが可能であり、すべての形の球体によってケルビングに勝利し、データに基づいて勝利したものはすべて、他のパッケージまたは正面から壊れています。 フックは、そのスニペットを実行するスニペット名にすることもできます。 | |
フック | フォームが検証に合格した後に起動するスクリプト(ある場合)。 のリストをコンマで区切ることもできます。最初のリストが失敗した場合、後続のリストは起動しません。 フックは、そのスニペットを実行するスニペット名にすることもできます。 | |
submitVar | プロセスを選択しない場合、POSTパラメーターが省略されていない場合。 注意:&storeプロパティをツイートすることをお勧めします(+ input = "submit"に送信変数を設定してください!)。 | |
検証 | name:validatorのようなスキンフィールド名(例:username:required、email:required)を使用して、検証する個別の弧状ファイル。 バリデーターは、email:email:requiredのようにチェーンすることもできます。 複数行で指定できます。 | |
validateErrorMessage | 検証が失敗した場合にプレースホルダー[[!+fi.validation_error_message]]に設定するメッセージを許可します。 すべてのエラーのリストを上部に表示する場合は、[[+errors]]を含めることができます。 | フォーム検証エラーが発生しました。 入力した値を確認してください。 |
validateErrorBulkTpl | 一般的な検証エラーメッセージ値のスキンエラーに使用されるHTMLtpl。 | [[+エラー]] |
errTpl | エラーメッセージのラッパーhtml。 注:チャンクはなく、単純なHTMLです。 | [[+エラー]] |
customValidators | カスタムバリデーター名(スニペット)のコンマ区切りリストで、このフォームでクイズを行う予定です。 悪臭は有罪ですが、ここに明示的に記載されています。そうでない場合、悪臭は実行されません。 | |
clearFieldsOnSuccess | 確かに、リダイレクトされないリスニングフォームが成功すると、水やりがクリアされます。 | 1 |
お店 | trueの場合、FormItRetrieverスニペットを書き込むためにデータをファイルに保存します。 | 0 |
storeTime | 「store」がtrueに設定されているように、これはフォーム送信からのデータを保存する秒数を指定します。 デフォルトは5分です。 | 300 |
店の所在地 | ストアを使用する場合、これは送信後にフォームが保存される場所を定義します。 可能なオプションは「キャッシュ」と「セッション」です。 デフォルトは「キャッシュ」です。 | キャッシュ |
placeholderPrefix | フィールドのFormItを形成するすべての領域の見積もりの予定。 必ず「。」を含めてください。 プレフィックスのセパレータ。 | fi。 |
successMessage | リダイレクトフックは勝ちません。リダイレクトフックは、更新が成功した後に更新の結果を繰り返します。 | |
successMessagePlaceholder | 回復が成功するまで、roztashuvannyaの月に名前を付けます。 | fi.successMessage |
redirectTo | ページID「ThankYou」ページ、訪問者は再試行フォームが成功した後、パラメータが読み取られます。フックのリストに「redirect」が含まれている場合のみ。 | |
allowFiles | ファイルの投稿を許可するかどうかを指定します。 ファイルはマルチステップ形式で選択されるため、前のファイルの前に定期的なディレクトリに配置および保存されます。 | 真実 |
attachFilesToEmail | メールにファイルをアップロードする場合は、enctype = "multipart/form-data"のようにインストールする必要があります。 | 真実 |
検証
FormItの変更は、validateプロパティを介して行われます。また、フォーム内の任意のフィールドの検証を自動的に処理するように設定することもできます。
FormItでの検証の詳細については、
レッスン zvorotny zv'azku CMF MODX Revolutionで、AjaxFormおよびFormItコンポーネントをハッキングします。
FormItおよびAjaxFormへのコンポーネントの割り当て
FormItは、サーバー側のフォーム処理割り当てであるMODX Revolutionのコンポーネント(スニペット)です。 以前にフォーム(検証)のフィールドを変更できます 遠い子供たち、サイトをスパムの排除から保護し、フォームデータをメールで編集し、完成したフォームのコピーを保存し、別の側にリダイレクトを設定し(たとえば、フォームを電子メールに送信した後)、自動送信機能を無効にします。 。
また、AJAXを介してFormItを操作するには、AjaxFormアドオンコンポーネントを微調整する必要があります。
健全なリンクのロボット形成の原理
MODX Revolutionリンクの開発に移る前に、その作業の基本的なアルゴリズムを見てみましょう。
フォームを使用してファイナルサイドを入力した後(サーバーでサイドが形成されるときにAjaxFormスニペット呼び出しの&formパラメーターで指定されたチャンクから取得されます)、ファイナルに進みます。 アップロードが完了したら、[送信]ボタンとAjaxFormコンポーネント( JavaScriptコード)AJAXヘルプのためにサーバーに送信します。 サーバー上で、コンポーネントはFormItスニペットを実行し、フォームデータを渡します。 データを収集すると、FormItスニペットが確認として形成されます。これは、AjaxFormコンポーネントを介してクライアントに送信され、ページの横に表示されるためです。 Vidpovіdは正(たとえば、フォームが検証に合格し、たとえば、データが郵便局に正常に送信されたことを意味します)または負(たとえば、フォームが完成したときに、coristuvachが許された)の場合があります。
zvorotnyyzvezkuからの作成
MODX Revolutionゲートの形状を作成するには、次の主要なステップを結び付ける必要があります。
レポートのセクション2と4を見てみましょう。
ChanziでのHTMLフォームの作成
コールバックリンクのHTMLフォームの作成は、tpl.AjaxForm.exampleテンプレートをコピーすることで実行できます。 たとえば、tpl.AjaxFormという名前のコピーされたチャンクを追加しましょう。 このチャンクは、名前、電子メール、メッセージの3つのフィールドで構成されるHTMLフォームを作成する準備ができています。 フォームでの作業が必要な主な部門は、主に新しいカテゴリの追加または重要なカテゴリの削除に持ち込まれます。 このカテゴリでは、ラベル(label)、フォーム要素(input、select、textarea)、スパン要素(pardon検証を表示するためのウィンク)など、相互に関連する要素のグループを理解できます。
主なポイント:
- ラベルテキスト(ラベル要素)。 辞書(バガトニックサイトの場合)から取得するか、追加のテキストを仲介せずに示すために呼び出します。
- span要素は、error_name値の親クラス属性を担当します。この場合、並べ替えのために、name句をform要素のname属性の値に変更する必要があります。
尊重:[[+fi.error.name]]のフォーム要素のvalue属性の値としてのプレースホルダー[[+fi.name]]は、span要素のコンテンツが従来のFormIt作業にのみ関連するため、あれは。 AJAXなし。 悪臭は、coristuvachyの導入の価値を保存し、検証の恩赦のように見えるようにするために、繰り返し過剰に強化してフォームに入力することで勝利を収めています。
たとえば、dodamo in HTMLフォーム入力フィールド 電話番号:
このチャンクの結果には、次のHTMLコードが含まれます。
AjaxFormスニペットを復讐するためのコードの作成
Vіdkrivaєmoテンプレート。これはvikoristovuvatimeリソースであり、コードを入力します。これはすべてzdіisnyuvatiである必要があります。
[[!AjaxForm? &form = `tpl.AjaxForm`&snippet =` FormIt`&hooks = `FormItSaveForm、email`&emailSubject =`テスト通知`&emailTo = ` [メール保護]`&emailFrom =` [メール保護]`&emailTpl =` tpl.email`&validate = `name:minLength = ^ 2 ^、email:email:required、message:minLength = ^ 10 ^`&validationErrorMessage = `フォーム保留中のご容赦!`&successMessage=`通知は正常に送信されました`]]
主なパラメータを見てみましょう。
- &form-フォームをスイープするチャンクに応答します(tpl.AjaxForm)。
- &snippet-フォームを完成させるスニペット(FormIt)。
- &hooks –フォームの書き換えが成功した後にFormItスニペットを連結するためのフック(1-FormItSaveForm、2-電子メール)。 フックは、フォームが検証された後に起動されるスクリプトです。 悪臭は誰を通して注文され、1つずつ順番に発射されます。 それらの1つに許しがあったかのように、他のものは開始しません。 この勝利者クラスには2つのフックがあります。 データベースにフォームを保存するためのFormItSaveForm割り当てをフックします。 電子メールの割り当てをフックして、データフォームを強制的に電子メールで送信します。
- &emailSubject、&emailTo、&emailFrom、&emailTpl-メールタグフックのパラメータ。 これらは、シートトピック(&emailSubject)、編集アドレス(&emailTo)、Fromヘッダー(&emailFrom)、シートテンプレート(&emailTpl)によって挿入用に指定されています。
- &validateは、フォーム検証の値に依存するパラメーターです。 パラメータの値は、要素をクラウドで分割した要素のリストです。 革の要素は、フォームの要素の名前(反響するために必要)とルール(ほとんどの場合)で構成され、2つ折りの追加の記号のためにそれらの間で分割されます。 たとえば、name:minLength = ^ 2 ^バリデーターは、名前フィールドの長さが2文字以上であることを確認します。 email:email:requiredバリデーターは、メールフィールドがメールアドレスと一致しないことを確認します。 バリデーターを作成するための基本的なルールについては、「FormItバリデーター」ページで学ぶことができます。
- &validationErrorMessage-フォームに恩赦があるかのように、表示されるかのように恩赦を報復します。
- &successMessage-通知、koristuvachとチャットする場合、通知が正常に送信される場合。
シートの優れたテンプレートであるtpl.emailチャンクを作成できませんでした。
アドバイス
人のタイプ:[[+ name]]
Eメール:[[+ email]]
電話:[[+ phone]]
通知:[[+メッセージ]]
MODX-チャンクtpl.emailUvaga:フィールドの価値を確認するには、活発なプレースホルダーを作成します。
内部告発者のロボット形式のデモンストレーション
そのような画像の助けを借りて、側面に回転リンクの形をした主な瞬間と作業時間が示されます。
MODX-検証に合格しなかったリターンリンクの形式
実際には、すべての商用サイトに連絡先ページがあり、そこに連絡先フォームが掲載されており、そこからサイトの管理を書くことができます。 今日は、お問い合わせフォームをすばやく作成する方法を見ていきます。 パッケージへのヘルプを求める折り返し電話のフォームを実装する フォーマットパッケージとのリンクで Ajaxフォーム、悪臭がインストールされていないかのように、それらをインストールします。
個人データを処理する許可を得たMODXRevoでのリターンリンクのフォームの作成は、2006年7月27日付の法律第152-FZ「個人データについて」の対象となります。
最初にチャンクを作成します。この場合、フォーム自体が保存されます。「contact-form」チャンクを使用せずに、標準フォームを新しいコードに配置します。私は主にブートストラップWikiを使用してサイトで作業します。トロッホの標準的な準備をしてやり直します。静的コードは次のようになります。
君の 古い外観私のフォームがプロジェクト用に定型化されていることに驚かれることでしょう。 cssスタイルヴィクラダティはバチュセンスではありません。
ここの軸は、他のフォームを見渡すことができます getbootstrap.com/css/#forms
そして今、私たちは改善された構文で動的な方法でコードを再構築することができます フォーマットі Ajaxフォーム、ステップバイステップでそれを取ります。
次に、もう1つのチャンク、フォームシートを作成し、次のチャンクでtpl-contact-formと呼びましょう。
名前:[[+ name]]
メール:[[+ email]]
電話:[[+ pfone]]
通知:[[+メッセージ]]
さて、必要な場所でvisnovokを育てることが必要になりました:
[[!AjaxForm? &snippet = `FormIt`&form =` kontact-form`&emailTpl = `tpl-kontact-form`&hooks = `spam、email`&emailSubject=`サイトアラート[[++site_url]]`&emailTo =` [メール保護]`&validate =` name:required、email:required`&validationErrorMessage = `フォーム保留中の恩赦!`&successMessage = `通知は正常に送信されました!`]]
値を変更することを忘れないでください emailToあなたのメールに。
コンポーネントのドキュメント:
- FormIt — docs.modx.com/extras/revo/formit
- Ajaxフォーム — docs.modx.pro/components/ajaxform
原則の軸とすべて!