Author: Tong Wu

以下是我在视频如何用 Shopify 来制作 B2B 询盘网站｜产品展示站教程中使用的代码。

<div style="margin-top: 20px;">
  <!-- Enhanced Heading Section -->
  <h2 style="font-size: 24px; font-weight: 700; margin: 0 0 8px 0; line-height: 1.2;">Get Your Exclusive Quote</h2>
  <p style="font-size: 14px; color: #666; margin: 4px 0 20px 0; line-height: 1.5;">Tell us what you need — our team responds within 24 hours.</p>
  
  <!-- Trust Signals Bar -->
  <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; font-size: 13px; color: #555;">
    <div style="display: flex; align-items: center; gap: 6px;"><span>✅</span><span>No commitment required</span></div>
    <div style="display: flex; align-items: center; gap: 6px;"><span>⚡</span><span>Fast response guaranteed</span></div>
    <div style="display: flex; align-items: center; gap: 6px;"><span>🔒</span><span>Your info stays private</span></div>
  </div>

  <!-- Success Message -->
  <div id="quote-success" style="display:none; background:#f0fff4; border:1px solid #68d391; border-radius:4px; padding:16px; margin-bottom:16px; color:#276749; font-size:14px;">
    ✅ Thank you for contacting us! We'll get back to you within 1 business day.
  </div>
  
  <!-- Quote Form -->
  <form id="quote-form" method="POST" action="/contact#contact_form">
    <input type="hidden" name="form_type" value="contact">
    <input type="hidden" name="utf8" value="✓">
    <input type="hidden" name="contact[product]" value="{{ product.title }}">
    <input type="hidden" name="contact[page_url]" value="{{ request.origin }}{{ request.path }}">

    <!-- ✅ Honeypot Field - 机器人陷阱，真实用户不可见 -->
    <div style="position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden;" aria-hidden="true">
      <label for="quote-website">Website (leave blank)</label>
      <input type="text" id="quote-website" name="contact[website]" tabindex="-1" autocomplete="off">
    </div>

    <div style="margin-bottom: 16px;">
      <label for="quote-name" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Name</label>
      <input type="text" id="quote-name" name="contact[name]" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 16px;">
      <label for="quote-email" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Email</label>
      <input type="email" id="quote-email" name="contact[email]" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 16px;">
      <label for="quote-message" style="display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px;">Tell us about your needs</label>
      <textarea id="quote-message" name="contact[body]" rows="4" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; font-family: inherit;"></textarea>
    </div>
    
    <button type="submit" style="width: 100%; padding: 12px; background-color: #000; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 10px;">Request My Quote →</button>
    <p style="font-size: 12px; color: #888; text-align: center; margin: 10px 0 0 0;">We'll get back to you within 1 business day.</p>
  </form>
</div>

<script>
document.getElementById('quote-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var form = this;

  // ✅ Honeypot 检测：如果隐藏字段有值，判定为机器人，静默拒绝
  var honeypot = document.getElementById('quote-website').value;
  if (honeypot !== '') {
    form.style.display = 'none';
    document.getElementById('quote-success').style.display = 'block';
    return; // 假装成功，实际不提交
  }

  var data = new FormData(form);
  fetch('/contact', {
    method: 'POST',
    headers: { 'Accept': 'application/json' },
    body: data
  }).then(function() {
    form.style.display = 'none';
    document.getElementById('quote-success').style.display = 'block';
  });
});
</script>