Shopify - FormBnB Documentation

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

Create FormBnB Form

Create a new form in your FormBnB dashboard and copy the form slug.

Edit Theme

In Shopify admin, go to Online Store → Themes → Customize. Add a Custom Liquid section where you want the form.

Paste Form HTML

Paste your FormBnB form HTML into the Custom Liquid block.

Save

Save the theme. Your form is live.

Contact Form Example

Paste this into a Custom Liquid section:

<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:

<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>

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

​Why Use FormBnB with Shopify

​Setup Steps

​Contact Form Example

​Wholesale / Quote Request Form

Why Use FormBnB with Shopify

Setup Steps

Contact Form Example

Wholesale / Quote Request Form