将 2 个表单放在同一页面上的最佳方法是什么？答案

【问题标题】：What is the best way to place 2 forms on the same page?将 2 个表单放在同一页面上的最佳方法是什么？
【发布时间】：2019-03-16 03:16:48
【问题描述】：

在同一页面上放置 2 个相同表单的最佳方法是，但对每个表单使用相同的表单操作和字段？如何在提交数据的相应表单区域中保留响应消息？

我的网站页脚中有一个表单，网站主页上的弹出窗口中有一个表单。我正在使用隐藏的 div 和 Magnific 从位于页脚的表单中打开包含相同代码的弹出窗口。本质上，两种形式都做同样的事情，并利用相同的形式动作。

我无权访问表单操作或表单操作页面中的代码。

目前，存在于同一“页面”上的表单没有问题，但是当我在一个表单上提交电子邮件时，错误和成功消息会同时显示在弹出表单和页脚表单中。

我已经读到这可能与 ajax 相关，但为了完整起见，我想确保在继续学习之前，我正在构建我正在使用表单 html 做我能做的事情ajax 。

【问题讨论】：

标签： ajax forms shopify

【解决方案1】：

遗憾的是，没有很好的 html/liquid 解决方案。

唯一的方法是使用 cookie 来保存提交了哪个表单的信息，并仅显示该表单而不是两个表单的错误消息。

AJAX 不是一个好的解决方案，因为 Google Recaptch-a 当您多次提交表单时，这对 a** 来说是一个真正的痛苦，因为无法禁用它并且如果您提交表单将失败尝试用ajax提交。

最简单的解决方案是使用cookies，另一种选择是依赖APP，但这可能有点过头了。

Shopify 中的表单是......如何表达得很好......愚蠢......基本......对开发人员不友好，或者只是不能以任何方式进行调整（不包括前端）。

【讨论】：

感谢您。我同意 Shopify 表格。在您的第 3 段中，您的意思是说“ajax 不是一个好的解决方案”吗？我阅读了有关 Recaptch-a 问题的信息。你会碰巧有一个链接，所以我可以理解如何使用 cookie 吗？至于应用程序解决方案，我的主要目标是在页面上放置 2 个表单后，让表单将客户的电子邮件提交给 Shopify（而不是应用程序自己的数据库）。我尝试过的所有应用程序（并且我已经尝试了大多数推荐的应用程序）都有一个大问题，它们不会将表单数据发布到 shopify 中。他们将其存储在自己的数据库中以供导出。
@Jason 你是对的，它应该是“不”：D 你可以在这里看到答案 stackoverflow.com/questions/14573223/… 在那里你可以找到准备用于设置和获取 cookie 的函数。跨度>
感谢您的链接。我了解设置 cookie。您能否澄清一下您是指为 1.) 在页面上放置表单或 2.) 提交与 Shopify 已实施的 Recaptch-a 相关的表单设置 cookie？谢谢。
@Jason，不，我的意思是，一旦您单击提交按钮，当您被重定向到您刚刚阅读的表单页面时，您会立即保存 cookie（例如“submitted_form”、“form1”） cookie 并且由于您知道使用 JS 提交了哪个表单，因此您会显示错误状态（默认情况下显示：无）。就是这样。
我明白了。因此，只需使用 cookie，用户就不必在表单页面上“重新输入”数据。明白了。