Shopifyでは多くのタッチポ▪▪ントでフォ▪▪ムが使われています。カスタマー登録からブログへのコメント,さらにマーチャントへの連絡や,商品バリエーションをカートに追加する場面にまで,フォ，ムは使用されています。クライアントとユーザーをつなぐうえでフォームが果たす役割は大きいため,このコンポーネントを堅実でユーザーフレンドリーにしておくことが重要です。
Shopifyメタフィ，ルドのようなダナミックなコンポネントと比べると，フォムの重要性は見過ごされやすいものです。しかしお客さまとストアとの@ @ンタラクションな機能面において，フォ@ @ムは重要な役割を占めます。
フォ，ム作成は反復的な要素が強く，ゼロから作ろうとするとミスも起こりが，です。幸いなことに，フォ，ム作成を安全か，楽にしてくれる液体要素がいろいろあって，正しいエンドポントへのデタ転送に必要なコドを自動で生成できます。
今回の記事では，液体を活用してShopifyでのフォ，ム作成プロセスを簡素化する方法をご紹介します。この方法でンプット要素を生成し，エラを特定し，カスタマへのフィドバックを出力できます。また、さまざまなフォ、ムを作成する際に開発者がアクセスできるフォ、ムのタ、プも見ていきます。
形式タグとは何か?
液体の形式タグは,入力データを特定のエンドポイントに送信するためのインプットと一緒に,超文本标记语言の< >形式要素を生成します。このタグを使用することで，Shopifyペジにさまざまなタプのフォムを構築する際，アクションや値の割り当てを自動化できます。
形式タグを使うと,開発者は素早く信頼できる方法でプロジェクトにフォームを追加でき,アクションを記述するためのコードやエンドポイントのターゲティングを心配しなくて済みます。これにより,ログインやブログコメント,マーチャントへの連絡などのフォーム作成時にヒューマンエラーの可能性を削減し,時間が節約できます。
特定タ@ @プの形式タグを使うと,送信データへのアクションを決定するためにエンドポイントで使用されるインプット要素と一緒に,超文本标记语言の< >形式要素が作成されます。実装されるフォームのタイプに応じて,要求されるアクションを実行するためのさまざまなセットのインプットが生成されることになります。
自動生成されるンプットフィルドは，Shopifyサバのエンドポントとながることを目的としたもので，形式タグによって作成されるユザが接することのできるンプットフィルドはありません。まり，開発者はマニュアルでカスタマメルやパスワドのンプットフィルドを追加することになり，タグはShopifyサ，バ，へのデ，タ送信を受け持，ます。
形式タグの例
ここまで見てきたように，形式タグは超文本标记语言のフォ，ムを作成する確かな代替策です。たとえば，ログ形式タグを使わないと，以下のようなコ，ドが必要になるでしょう。
✓" / >
<！--インプットフィールドとラベルのコード-->
> < /形式
形式タグを使うと，上記のコ，ドが簡単なマ，クアップになります。
{% form 'customer_login' %}
<！--インプットフィールドとラベルのコード-->
{% endform %}
この例からわかるのは，形式タグに"タ▪▪プ"が含まれることです。上記の例では，customer_loginが該当します。< >形式と<输入>要素を生成する13種類のフォムタプがあり，それぞれ個別の目的をもっています。現在使用可能なタ▪▪プに▪▪いては，後ほど詳しく見ていきます。
形式タグは，エンドポ< >形式と<输入>を生成しますが、ユ、ザ、が入力するための、ンプット要素を別に作成する必要があります。
たとえば,ログインフォームを機能させるためには,メールアドレスとパスワードを入力するフィールド,そして送信ボタンが必要です。これらが形式タグに追加されると，以下のようになります。
このコ，ドをフロントエンド側，オンラ，ンストアで見た場合は，こうなります。
実際のログンフォムの例は，液体のコ，ドサンプルでご確認いただけます。これらをあなたが作成する独自テ，マの基盤として利用することも可能です。
追加のパラメ，タ
特定オブジェクトをタ，ゲットにするにあたり，形式タグに追加パラメ，タが必要になることがあります。たとえば，ブログ記事へのコメントを送信するフォ，ムには，タ，プとしてnew_comment，さらにパラメタとして文章オブジェクトが要求されます。
{% form 'new_comment'， article %}
<！--インプットフィールドとラベルのコード-->
{% endform %}
出力はこのようになります。
Class ="comment-form" id="article-10582441-comment-form" method="post">
✓" / >
<！--インプットフィールドとラベルのコード-->
> < /形式
この例では，パラメ，タの文章が新規コメントを適切なブログ記事に結びける役割を果たします。商品、顧客アドレス、新規コメントのフォームなどは、すべて追加パラメータを必要とします。
さまざまな液体フォムのタプ
クラアントのストア内の特定タッチポントやデタ送信に関して，13種類のさまざまな液体フォムタプがあります。顧客登録の例で上述したように，フォ，ムを生成するには，形式タグにタ@ @プが求められます。
定義済みのフォムタプは以下のとおりです:
・activate_customer_password
・联系
・货币
・客户
・create_customer
・customer_address
・customer_login
・guest_login
・new_comment
・产品
・recover_customer_password
・reset_customer_password
・storefront_password
これらのフォ，ムの使用例や，必要となる追加パラメ，タの詳細は，開発ドキュメントで確認できます。
フォ，ムで条件ロジックを使用する
ある種のフォームタイプには,パスワードのリセットや無効データのエラー表示など,追加機能が必要となる場合があります。間違ったメールアドレスが入力された場合にエラーメッセージを表示するといったケースがありますが,特定イベント発生時にコンテンツを表示するルールはコントロ，ルフロ，タグを使って設定することができます。
液体オブジェクトのform.errorsと液体フィルタ，のdefault_errorsは，フォ，ムによるデ，タ送信が成功しなかった場合にとても役立，ます。デフォルトのエラ，メッセ，ジが表示されるからです。
form.errorsオブジェクトは，フォ，ム送信が失敗したときに文字列の配列を返すか，出力をします。空欄またはエラーが含まれるフィールドに応じて,文字列が返されますが,可能性のある値は以下のようなものです。
・作者
・身体
・电子邮件
・形式
このオブジェクトによって，正しく入力されていないフォ，ムの箇所が特定でき，出力可能になります。ユ，ザ，によるエラ，の種類を表示したい場合は，手を加えて为ル，プを設定できます。
{%表示表单错误。错误%}
{{error}}
{% endfor %}
上記の例では，もしユ，ザ，が無効なメ，ルアドレスを入力した場合，电子邮件の値が出力されます。この出力内容とdefault_errorsフィルタ，を利用して，事前定義されたエラ，メッセ，ジを自動で生成可能になります。
default_errorsフィルタ，は，form.errorsオブジェクトによって返された文字列に応じて特定のメッセ，ジを出力します。実例として，コントロ，ルフロ，タグを使って{% form %}タグ内に如果ステ，トメントのフロ，を作成してみましょう。
{% if窗体。错误%}
{{形式。| default_errors
{% endif %}
これで,ユーザーが無効なメールアドレスを入力した場合に,以下のメッセージが表示されることになります。
有効なメ，ルアドレスを入力してください。
カスタムテーマにこうした条件ルールを付加することは,クライアントの顧客ユーザーが無効データを入力した際,適切なフィードバックを確認できるようにするためには必須です。液体をこのように有効活用すれば,わかりやすいエラーメッセージを適切なタイミングでユーザーに表示できます。
フォ，ムと機能
液体オブジェクト,タグ,フィルターを組み合わせることで,確実なフォーム作成ができることがこれでわかったと思います。Shopifyでフォムを作成するときには，クラアントの要望に沿ってカスタムフィ，ルドを追加したり，フォ，ム属性を修正したりして機能を拡張可能です。
関連する液体要素によってフォームを確実に安定させるには,フォームのデザインや構築においていくらか調整や修正が必要かもしれません。今回の記事を参考にして，液体がフォ，ムやテ，マプロジェクトを向上させる方法に慣れていただければ幸いです。
Shopifyパ，トナ，プログラムでビジネスを成長させる
マーケティング,カスタマイズ,またはWebデザインや開発など提供するサービスに関係なく,Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で,収益分配の機会が得られ,ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマスコミュニティに今すぐ参加しましょう!
よくある質問
Shopifyでのフォ，ムの使われ方は?
液体の形式タグとは?
形式タグを使うと,開発者は素早く信頼できる方法でプロジェクトにフォームを追加でき,アクションを記述するためのコードやエンドポイントのターゲティングを心配しなくて済みます。これにより,ログインやブログコメント,マーチャントへの連絡などのフォーム作成時にヒューマンエラーの可能性を削減し,時間が節約できます。> < /形式
フォムで条件ロジックを使用するには?
液体オブジェクトのform.errorsと液体フィルタ，のdefault_errorsは，フォ，ムによるデ，タ送信が成功しなかった場合にとても役立，ます。デフォルトのエラ，メッセ，ジが表示されるからです。
