如何创建带短代码的Shopify联系表单并将数据传至应用后端？

一、创建自定义Liquid短代码 #

Shopify支持通过自定义Liquid标签实现短代码嵌入，你需要在应用代码里完成以下操作：

1. 在应用的liquid目录下创建contact_form.liquid文件，写入表单代码：

{% comment %} 自定义联系表单短代码 {% endcomment %}
<form id="zendesk-contact-form" method="POST" action="{{ 'submit-contact' | shopify_route }}">
  {% comment %} Shopify自动生成CSRF令牌，无需手动添加 {% endcomment %}
  <div style="margin: 1rem 0;">
    <label for="contact-name" style="display: block; margin-bottom: 0.5rem;">姓名</label>
    <input type="text" id="contact-name" name="customer_name" required style="width: 100%; padding: 0.5rem;">
  </div>
  <div style="margin: 1rem 0;">
    <label for="contact-email" style="display: block; margin-bottom: 0.5rem;">邮箱</label>
    <input type="email" id="contact-email" name="customer_email" required style="width: 100%; padding: 0.5rem;">
  </div>
  <div style="margin: 1rem 0;">
    <label for="contact-message" style="display: block; margin-bottom: 0.5rem;">留言内容</label>
    <textarea id="contact-message" name="customer_message" rows="4" required style="width: 100%; padding: 0.5rem;"></textarea>
  </div>
  <button type="submit" style="padding: 0.5rem 1rem; background: #008060; color: white; border: none; border-radius: 4px;">提交留言</button>
</form>

<script>
// 用AJAX提交表单，避免页面刷新
document.getElementById('zendesk-contact-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  
  try {
    const response = await fetch(this.action, {
      method: 'POST',
      body: formData,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
    
    if (response.ok) {
      alert('留言提交成功，我们会尽快回复你');
      this.reset();
    } else {
      alert('提交失败，请稍后重试');
    }
  } catch (err) {
    console.error('提交出错:', err);
    alert('系统出错，请稍后再试');
  }
});
</script>

2. 在应用的shopify.app.toml配置文件中注册这个Liquid标签：

[liquid]
tags = [
  { name = "contact_form", path = "liquid/contact_form.liquid" }
]

完成后，商家就能在Shopify的页面、博客文章里通过{% contact_form %}短代码嵌入你的联系表单。

二、后端接收表单数据的路由实现 #

以Node.js/Express为例，创建POST路由处理表单提交：

const express = require('express');
const { body, validationResult } = require('express-validator');
const app = express();

// 解析表单数据
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// 处理表单提交的路由
app.post('/submit-contact', [
  // 验证并清洗输入数据，防止注入攻击
  body('customer_name').notEmpty().trim().escape(),
  body('customer_email').isEmail().normalizeEmail(),
  body('customer_message').notEmpty().trim().escape()
], async (req, res) => {
  // 检查验证错误
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
      return res.status(400).json({ success: false, errors: errors.array() });
    }
    return res.redirect('/?error=invalid-input');
  }

  try {
    // 提取清洗后的表单数据
    const { customer_name, customer_email, customer_message } = req.body;
    
    // 调用你已经验证好的Zendesk API逻辑创建工单
    await createZendeskTicket({
      requester: { name: customer_name, email: customer_email },
      subject: '来自Shopify店铺的客户留言',
      comment: { body: customer_message }
    });

    // 响应前端
    if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
      res.status(200).json({ success: true });
    } else {
      res.redirect('/?success=1');
    }
  } catch (err) {
    console.error('处理表单提交错误:', err);
    if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
      res.status(500).json({ success: false });
    } else {
      res.redirect('/?error=server');
    }
  }
});

// 这里是你已有的Zendesk API请求函数
async function createZendeskTicket(ticketData) {
  // 你的Zendesk API实现代码，已验证可用，直接复用即可
}

三、配置Shopify应用权限 #

在Shopify Partner后台的应用设置里，确保申请了以下权限：

• write_content：允许应用添加自定义Liquid标签到店铺内容
• 若需要访问客户额外信息，可按需添加read_customers或write_customers权限

四、测试验证 #

1. 在Shopify后台创建测试页面，编辑内容时插入{% contact_form %}短代码
2. 预览页面，填写表单提交，检查后端日志是否正确接收数据，同时确认Zendesk生成对应工单
3. 测试异常场景（比如无效邮箱、空内容），验证错误提示是否正常

内容的提问来源于stack exchange，提问作者Ivan