> ## Documentation Index
> Fetch the complete documentation index at: https://formbnb.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify

> Add contact and order forms to Shopify with FormBnB

## Why Use FormBnB with Shopify

Shopify doesn't have a built-in contact form backend with advanced features. FormBnB gives you:

* Unlimited form submissions
* Email notifications for every submission
* Spam protection (honeypot, reCAPTCHA, Turnstile)
* Webhooks to connect to your order systems
* 21+ integrations (Slack, Google Sheets, etc.)
* File upload support for order attachments

## Setup Steps

<Steps>
  <Step title="Create FormBnB Form">
    Create a new form in your [FormBnB dashboard](https://app.formbnb.com) and copy the form slug.
  </Step>

  <Step title="Edit Theme">
    In Shopify admin, go to **Online Store** → **Themes** → **Customize**. Add a **Custom Liquid** section where you want the form.
  </Step>

  <Step title="Paste Form HTML">
    Paste your FormBnB form HTML into the Custom Liquid block.
  </Step>

  <Step title="Save">
    Save the theme. Your form is live.
  </Step>
</Steps>

## Contact Form Example

Paste this into a Custom Liquid section:

```html theme={null}
<div class="formbnb-form-wrapper" style="max-width:500px;margin:0 auto;padding:20px;">
  <form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
    <input type="text" name="_gotcha" style="display:none">
    <input type="hidden" name="_next" value="https://yourstore.myshopify.com/pages/thank-you">

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:14px;margin-bottom:4px;">Name</label>
      <input type="text" name="name" required
        style="width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;">
    </div>

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:14px;margin-bottom:4px;">Email</label>
      <input type="email" name="email" required
        style="width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;">
    </div>

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:14px;margin-bottom:4px;">Order Number (optional)</label>
      <input type="text" name="order_number"
        style="width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;">
    </div>

    <div style="margin-bottom:16px;">
      <label style="display:block;font-size:14px;margin-bottom:4px;">Message</label>
      <textarea name="message" rows="4" required
        style="width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;resize:vertical;"></textarea>
    </div>

    <button type="submit"
      style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;">
      Send Message
    </button>
  </form>
</div>
```

## Wholesale / Quote Request Form

A more advanced form for B2B stores:

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
  <input type="text" name="_gotcha" style="display:none">
  <input type="hidden" name="_subject" value="New Wholesale Inquiry">

  <input type="text" name="company" placeholder="Company Name" required
    style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">

  <input type="text" name="name" placeholder="Contact Name" required
    style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">

  <input type="email" name="email" placeholder="Email" required
    style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">

  <input type="tel" name="phone" placeholder="Phone"
    style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;">

  <textarea name="products" placeholder="Which products are you interested in?" rows="4" required
    style="width:100%;padding:10px;border:1px solid #ddd;margin-bottom:12px;resize:vertical;"></textarea>

  <button type="submit"
    style="padding:12px 24px;background:#000;color:#fff;border:none;cursor:pointer;">
    Request Quote
  </button>
</form>
```

<Tip>
  Use the `_subject` hidden field to customize the email notification subject line. This helps you distinguish between different form types in your inbox.
</Tip>