ニュースレター登録のバリデーションの挙動について

AI-generated summary

ニュースレター登録のバリデーションが想定外に動作。主な症状は2点:

  • ケース①:お問合せフォームのメール欄が未入力で送信すると、ニュースレター欄まで「メール 無効です.」が表示。
  • ケース②:ニュースレター登録の「ご登録ありがとうございます!」が出たり出なかったり(出ないほうが多い)。ID/Nameを変更しても改善せず。

原因の見立て:

  • テーマがShopify Liquidのform.errors(フォーム送信時のエラーメッセージ)をページ単位で判定しており、フォーム間の識別ができていない可能性。form.errorsはID等を返さないため、複数フォームが同ページにあると混在しやすい。
  • 成功表示はform.posted_successfully?(送信成功時の真偽値)で分岐していると考えられ、テーマ側の条件分岐で不整合が起きている可能性。

推奨対応:

  • テーマ内で該当フォームのクラス・テンプレートを特定し、エラー/成功表示の実装を確認・修正。
  • 送信前にJS/HTMLで独自の未入力チェックを追加。
  • テーマ制作者へ問い合わせ、Shopify公式テーマならサポートを検討。

現状:未解決。テーマ側の実装確認と改修が必要。

フッターにニュースレター登録を配置しているのですが、バリデーションの挙動が少しおかしいです。

ケース①
お問合せフォーム内のメールアドレスを空欄にしたまま送信すると、お問合せフォームのメールアドレス欄だけでなく、ニュースレターのメールアドレス欄にも「メール 無効です.」が表示される。

ケース②
ニュースレター登録時、「ご登録ありがとうございます!」の文言が出るときと出ないときがある。なお、出ないときのほうが多い。

ケース①については、お問合せフォームとニュースレターでメールアドレスを入力するinputのidやnameが同じだったので、試しにニュースレター側のidとnameを変更してみたものの、挙動は変わりませんでした。

仕様やバグによるもので直せないものなのか、また開発側で回避策があるならばその方法が知りたいです。
よろしくお願いします。

テーマによる部分もあると思うのでなんとも言えませんが、①に関してはおそらく以下の状態かと思います。

  • form.errorで分岐させているため、フォーム単位での対応ができず、ページ単位で対応しているため

お使いのテーマ内で該当のフォームのクラス名などを検索して場所を特定すると、実際にどのような仕組みでエラーが表示されるかの確認ができると思います。

form.errorに関しては以下が該当します。

https://shopify.dev/api/liquid/objects/form#form-errors

form.errorで返される文字列の中にはidなどはないようなので、結果としてフォームの判別ができない状態です。

②に関してもテーマによるかもしれませんが、おそらくform.posted_successfully?で分岐させていると思われるので、その辺りの動作を確認されると状況が把握できるかもしれません。

https://shopify.dev/api/liquid/objects/form#form-posted_successfully

■別の対応方法

未入力チェックであれば、送信前に独自でバリデーションを行うことである程度の対応はできると思います。
その場合は手法によりJSやHTMLの知識が必要なので、その方面の情報を探されるかエキスパートやパートナーに依頼されることをお勧めします。

対象は違いますが方向性としては以下のスレッドが類似かと思います。

https://community.shopify.com/post/1266226

以上ですが、テーマの作成者に質問されることもお勧めします。
Shopify製のテーマの場合であれば以下のような無料サポートが受けられるかもしれません。

https://help.shopify.com/ja/manual/online-store/themes/theme-support#part-5ad7f21e8d34326a