Skip to content

Shopify Integration

Enhance your Shopify contact forms with Basin for custom solutions that go far beyond Shopify's default limitations.

Why Replace Shopify's Default Contact Form?

Shopify's built-in contact form helper is quite limited - it only allows you to receive emails sent to your Shopify account's email address. If you need more flexibility and advanced features, Basin unlocks new possibilities for your contact forms.

Basin's Advanced Features vs. Shopify Default

Unlike Shopify's limited contact form solution, Basin offers:

  • Advanced Spam Protection: Built-in spam filtering with multiple protection methods
  • Custom Email Notifications: Set up personalized email templates and multiple recipients
  • Webhook Integration: Connect to external services and automate workflows
  • File Uploads: Allow customers to attach files to their submissions
  • Custom Form Fields: Create any type of form field you need
  • Data Integration: Connect with CRMs, Google Sheets, and other tools
  • GDPR Compliance: Built-in privacy and compliance features

Integration Methods

1. Replace Shopify's Default Contact Form

Replace your existing Shopify contact form with a Basin-powered solution:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="name">Name *</label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="form-group">
        <label for="email">Email *</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" id="subject" name="subject">
    </div>

    <div class="form-group">
        <label for="inquiry_type">Inquiry Type</label>
        <select name="inquiry_type">
            <option value="">Select Type</option>
            <option value="general">General Question</option>
            <option value="product">Product Inquiry</option>
            <option value="support">Customer Support</option>
            <option value="wholesale">Wholesale</option>
            <option value="custom_order">Custom Order</option>
        </select>
    </div>

    <div class="form-group">
        <label for="message">Message *</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>

    <button type="submit">Send Message</button>
</form>

2. Enhanced Contact Form with File Uploads

Create more sophisticated forms that allow file attachments:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST" enctype="multipart/form-data">
    <h3>Contact Us</h3>

    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Email Address" required>
    <input type="tel" name="phone" placeholder="Phone Number">

    <select name="department" required>
        <option value="">Select Department</option>
        <option value="sales">Sales</option>
        <option value="support">Customer Support</option>
        <option value="returns">Returns & Exchanges</option>
        <option value="wholesale">Wholesale Inquiries</option>
    </select>

    <textarea name="message" placeholder="How can we help you?" required></textarea>

    <!-- File upload capability -->
    <div class="form-group">
        <label for="attachment">Attach File (optional)</label>
        <input type="file" id="attachment" name="attachment" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
    </div>

    <button type="submit">Submit Inquiry</button>
</form>

3. Product-Specific Inquiry Forms

Add inquiry forms to product pages that automatically capture product information:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <h4>Ask About This Product</h4>

    <!-- Hidden fields to capture product context -->
    <input type="hidden" name="product_title" value="{{ product.title }}">
    <input type="hidden" name="product_id" value="{{ product.id }}">
    <input type="hidden" name="product_url" value="{{ shop.url }}{{ product.url }}">
    <input type="hidden" name="product_price" value="{{ product.price | money }}">
    <input type="hidden" name="product_sku" value="{{ product.selected_or_first_available_variant.sku }}">

    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="question" placeholder="Your question about {{ product.title }}" required></textarea>

    <button type="submit">Ask Question</button>
</form>

Advanced Custom Solutions with Webhooks

Basin's webhook functionality enables powerful custom automations. Here's an example of how to create a custom purchase order system:

Custom Purchase Order Form

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <h3>Purchase Order Request</h3>

    <div class="form-section">
        <h4>Vendor Information</h4>
        <input type="text" name="vendor_name" placeholder="Vendor Name" required>
        <input type="email" name="vendor_email" placeholder="Vendor Email" required>
        <input type="text" name="vendor_phone" placeholder="Vendor Phone">
    </div>

    <div class="form-section">
        <h4>Order Details</h4>
        <input type="text" name="po_number" placeholder="PO Number" required>
        <input type="date" name="required_date" required>
        <textarea name="items_description" placeholder="Items Description" required></textarea>
        <input type="number" name="total_amount" placeholder="Total Amount" step="0.01" required>
    </div>

    <div class="form-section">
        <h4>Delivery Information</h4>
        <textarea name="delivery_address" placeholder="Delivery Address" required></textarea>
        <input type="text" name="delivery_contact" placeholder="Delivery Contact">
    </div>

    <button type="submit">Submit Purchase Order</button>
</form>

Webhook Automation with Cloudflare Workers

Basin can trigger webhooks that connect to Cloudflare Workers for advanced processing:

// Example Cloudflare Worker for processing purchase orders
export default {
  async fetch(request, env, ctx) {
    if (request.method !== 'POST') {
      return new Response('Method not allowed', { status: 405 });
    }

    const formData = await request.json();

    // Process the purchase order data
    const poData = {
      vendor: {
        name: formData.vendor_name,
        email: formData.vendor_email,
        phone: formData.vendor_phone
      },
      order: {
        po_number: formData.po_number,
        required_date: formData.required_date,
        items: formData.items_description,
        total: formData.total_amount
      },
      delivery: {
        address: formData.delivery_address,
        contact: formData.delivery_contact
      }
    };

    // Generate PDF and send email (implementation depends on your needs)
    await generatePDFAndEmail(poData);

    return new Response('Purchase order processed successfully');
  }
};

Shopify-Specific Features

Customer Context Integration

For logged-in customers, pre-populate form fields:

{% if customer %}
<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="hidden" name="customer_id" value="{{ customer.id }}">
    <input type="text" name="name" value="{{ customer.first_name }} {{ customer.last_name }}" required>
    <input type="email" name="email" value="{{ customer.email }}" required>

    <!-- Customer order history context -->
    <input type="hidden" name="customer_orders_count" value="{{ customer.orders_count }}">
    <input type="hidden" name="customer_total_spent" value="{{ customer.total_spent | money }}">

    <textarea name="message" placeholder="How can we help you?" required></textarea>
    <button type="submit">Submit</button>
</form>
{% else %}
<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="How can we help you?" required></textarea>
    <button type="submit">Submit</button>
</form>
{% endif %}

Store Context

Automatically include store information:

<input type="hidden" name="store_domain" value="{{ shop.domain }}">
<input type="hidden" name="store_name" value="{{ shop.name }}">
<input type="hidden" name="form_submitted_from" value="{{ request.path }}">

Spam Protection

Enable Basin's built-in spam protection to keep your forms clean:

  1. Built-in AI Filtering: Basin automatically filters obvious spam
  2. reCAPTCHA Integration: Add Google reCAPTCHA for additional protection
  3. Custom Validation: Set up custom rules in your Basin dashboard
  4. Honeypot Fields: Add hidden fields that trap bots

Integration with Shopify Workflows

Shopify Flow Integration

Use Basin webhooks to trigger Shopify Flow automations:

  1. Set up a webhook in Basin pointing to Shopify
  2. Create Flow triggers based on form submissions
  3. Automate tasks like:
  4. Creating customer records
  5. Tagging customers based on inquiry type
  6. Creating internal tasks for follow-up

Third-Party Integrations

Connect Basin submissions to your existing tools:

  • CRM Systems: Automatically create leads in HubSpot, Salesforce, etc.
  • Help Desk: Create tickets in Zendesk, Gorgias, or Freshdesk
  • Email Marketing: Add contacts to Mailchimp, Klaviyo, or other platforms
  • Analytics: Track form conversions in Google Analytics or other tools

Styling Your Forms

Match your store's design by styling Basin forms with your theme's CSS:

/* Example styling to match Shopify themes */
.basin-contact-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: #f9f9f9;
    border-radius: 8px;
}

.basin-contact-form input,
.basin-contact-form select,
.basin-contact-form textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.basin-contact-form button {
    background: var(--primary-color, #007ace);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.basin-contact-form button:hover {
    background: var(--primary-color-dark, #005a9e);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .basin-contact-form {
        margin: 1rem;
        padding: 1rem;
    }
}

Best Practices

  1. Test Thoroughly: Always test forms after Shopify theme updates
  2. Mobile First: Ensure forms work perfectly on mobile devices
  3. Clear Communication: Use descriptive labels and helpful placeholder text
  4. Privacy Compliance: Include privacy policy links and GDPR compliance
  5. Performance: Keep forms lightweight and fast-loading
  6. Analytics: Track form performance and conversion rates

Advanced Use Cases

Wholesale Application Form

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <h3>Wholesale Application</h3>

    <div class="business-info">
        <h4>Business Information</h4>
        <input type="text" name="business_name" placeholder="Business Name" required>
        <input type="text" name="tax_id" placeholder="Tax ID / EIN" required>
        <input type="url" name="website" placeholder="Business Website">
        <select name="business_type" required>
            <option value="">Business Type</option>
            <option value="retailer">Retailer</option>
            <option value="distributor">Distributor</option>
            <option value="online_seller">Online Seller</option>
            <option value="other">Other</option>
        </select>
    </div>

    <div class="contact-info">
        <h4>Contact Information</h4>
        <input type="text" name="contact_name" placeholder="Primary Contact" required>
        <input type="email" name="email" placeholder="Email Address" required>
        <input type="tel" name="phone" placeholder="Phone Number" required>
    </div>

    <div class="order-info">
        <h4>Order Information</h4>
        <textarea name="products_interest" placeholder="Products you're interested in" required></textarea>
        <input type="number" name="estimated_monthly_volume" placeholder="Estimated Monthly Order Volume" min="0">
    </div>

    <button type="submit">Submit Application</button>
</form>

Custom Quote Request

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST" enctype="multipart/form-data">
    <h3>Request Custom Quote</h3>

    <input type="text" name="name" placeholder="Full Name" required>
    <input type="email" name="email" placeholder="Email Address" required>
    <input type="tel" name="phone" placeholder="Phone Number">

    <select name="project_type" required>
        <option value="">Project Type</option>
        <option value="custom_product">Custom Product</option>
        <option value="bulk_order">Bulk Order</option>
        <option value="customization">Product Customization</option>
        <option value="private_label">Private Label</option>
    </select>

    <textarea name="project_description" placeholder="Describe your project requirements" required></textarea>
    <input type="number" name="quantity" placeholder="Quantity Needed" min="1">
    <input type="date" name="needed_by" required>

    <div class="file-upload">
        <label for="specifications">Upload Specifications or Reference Images</label>
        <input type="file" id="specifications" name="specifications" multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
    </div>

    <button type="submit">Request Quote</button>
</form>

Troubleshooting

Common Issues

  • Form not submitting: Verify your Basin endpoint URL is correct
  • Styling conflicts: Check CSS specificity and theme compatibility
  • Mobile issues: Test forms on actual devices, not just browser simulation
  • File uploads not working: Ensure enctype="multipart/form-data" is included

Shopify-Specific Considerations

  • Theme updates: Always backup custom code before theme updates
  • Liquid conflicts: Be careful with Liquid syntax in form templates
  • App compatibility: Test forms when installing new Shopify apps
  • Performance: Monitor form loading speed, especially with file uploads

Ready to enhance your Shopify store with powerful, flexible contact forms? Sign up for Basin and transform your customer communication today!