使用联系表单元素设计联系表单部分

关于联系表单元素

联系表单元素是 GemPages 中的预制功能，可以轻松地从左侧边栏拖放到您的设计区域。 

您可以通过拖放进一步自定义表单 附加表单字段元素 从侧边栏包含您需要的特定信息字段。 

联系表单元素将向 Shopify 管理员发送数据。有关 联系表单元素，单击“ 开始.

使用联系表单元素设计联系表单部分

首先，您需要访问 GemPages 仪表板 并点击目标页面在编辑器中打开它。

进入编辑器后，按照以下步骤使用 GemPages 的联系表单元素设计联系表单部分。

步骤 1：拖放联系表单元素

• 在左侧边栏中，使用搜索栏找到联系表单元素。然后，将其添加到页面上的所需位置。

此默认联系表单包含基本组件，但您可以通过添加、更改或删除任何元素来对其进行自定义。

• 要删除元素，请单击它并选择 垃圾桶图标，并从头开始构建您的表单。

• 删除所有预制元素以创建 空的联系表格:

步骤 2：创建联系表单布局

• 拖放一个 行 元素放入联系表单中。
• 在下面 布局 在设置面板中的部分，您可以根据自己的喜好将行配置为 1 列或 2 列布局。

步骤 3：添加表单输入元素

• 接下来，拖放必要的表单输入组件。对于两列布局，请将第一个 文本域 左栏中的元素。

• 双击此文本块元素即可编辑文本。例如，我们将其更改为“姓名“。

• 拖放一个 文本域 元素位于文本块之下，并将它们放在同一列中。

• 在右栏中，继续添加新的文本块并将文本更改为“电邮“。然后，在此元素下放置一个电子邮件字段元素。

步骤 4：添加提交按钮

• 拖放 提交表单按钮，这对于客户提交表单并将其信息发送给您的 Shopify 管理员至关重要。

• 调整此按钮的对齐方式使其居中，以获得更好的可见性。

• 去 高级选项卡 并调整 间距 部分.

步骤 5：配置联系表单设置

配置设置以定制每个条件：

• 提交后：选择是否让客户停留在当前页面或提交表单后将其重定向到特定的 URL 或页面。
• 成功讯息：显示确认提交成功的消息。
• 错误信息：如果发生错误导致表单无法提交（例如 Shopify 系统的问题），则显示警报。

从库中的模板创建联系表单

您还可以使用库中预先构建的模板创建联系表单。

第四步：点击 部分选项卡 并向下滚动到 联系我们 选项。

第四步：悬停在 联系我们 查看 GemPages 库中所有预建的联系人部分，然后将所需的部分拖放到设计区域。

第三步： 您可以按照自己的方式进行自定义，或者简单地保存并发布带有此预建联系人部分的页面。

联系表单问题排查

如果您的联系表单无法正常工作，请查看以下常见问题并按照建议的解决方案进行操作。

问题 1：错误代码 {"msg":"Missing credentials","status":"error"} 提交表单后出现

可能的原因： 这种情况通常发生在对表单进行测试时。 预览页面 而不是实际页面。预览环境可能无法完全支持表单提交。

怎么修：

请务必测试联系表单。 已发布页面 只。

按着这些次序：

1. 点击 发布 发布您的页面。
2. 打开 实时页面 URL 在新浏览器标签页中打开。
3. 从实时页面再次提交表单。
4. 请查看您的 Shopify 后台，确认是否已收到提交内容。

问题 2：联系表单未显示在页面上

可能的原因： 联系表单被添加到了一个 即时着陆页 (ILP).
即时着陆页确实 不支持 Shopify 联系表单因为联系表单是 Shopify 的原生功能。

怎么修： 将联系表单移至常规的 GemPages 页面，而不是使用即时着陆页。

推荐解决方案：

• 创建或打开 普通页面 在 GemPages 中。
• 拖放 联系表单元素 进入页面。
• 保存并 发布 这一页。
• 打开页面确认联系表单是否显示正常。