Adding a Form to Shopify

    Shopify's built-in contact form works, but it's limited in what you can do with submissions. Formboost gives you AI spam filtering, webhooks to trigger automations (like adding leads to a CRM), a REST API, and a searchable dashboard — all without installing a Shopify app.

    Prerequisites

    • A Formboost account (sign up free)
    • A Shopify store with theme editing access

    Step 1: Create a Formboost Endpoint

    Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL:

    https://formboost.app/f/YOUR_ENDPOINT_ID

    Step 2: Add the Form to Your Theme

    Option A — Page Template

    1. In Shopify Admin, go to Online Store → Themes → Edit Code
    2. Under Templates, open page.contact.liquid (or create it from page.liquid)
    3. Replace or add the form:
    1<div class="page-width">
2  <h1 class="h2">{{ page.title }}</h1>
3
4  <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST" class="contact-form">
5    <div class="field">
6      <label class="field__label" for="name">Name</label>
7      <input class="field__input" type="text" id="name" name="name" required />
8    </div>
9    <div class="field">
10      <label class="field__label" for="email">Email</label>
11      <input class="field__input" type="email" id="email" name="email" required />
12    </div>
13    <div class="field">
14      <label class="field__label" for="phone">Phone (optional)</label>
15      <input class="field__input" type="tel" id="phone" name="phone" />
16    </div>
17    <div class="field">
18      <label class="field__label" for="message">Message</label>
19      <textarea class="field__input" id="message" name="message" rows="6"></textarea>
20    </div>
21    <button type="submit" class="button">Send Message</button>
22  </form>
23</div>

    Option B — Section (Embeddable Anywhere)

    Create a new file sections/formboost-contact.liquid:

    1<section class="section-{{ section.id }}-padding">
2  <div class="page-width">
3    {% if section.settings.heading != blank %}
4      <h2>{{ section.settings.heading }}</h2>
5    {% endif %}
6
7    <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
8      <input type="text" name="name" placeholder="Name" required />
9      <input type="email" name="email" placeholder="Email" required />
10      <textarea name="message" placeholder="Message" rows="5"></textarea>
11      <button type="submit">Send</button>
12    </form>
13  </div>
14</section>
15
16{% schema %}
17{
18  "name": "Contact Form",
19  "settings": [
20    { "type": "text", "id": "heading", "label": "Heading", "default": "Contact Us" }
21  ],
22  "presets": [{ "name": "Contact Form" }]
23}
24{% endschema %}

    Step 3: Pass Customer Context (Optional)

    If a customer is logged in, pre-fill their details:

    1{% if customer %}
2  <input type="hidden" name="name" value="{{ customer.name }}" />
3  <input type="hidden" name="email" value="{{ customer.email }}" />
4{% endif %}

    Step 4: Custom Redirect (Optional)

    1<input type="hidden" name="_redirect" value="https://yourstore.myshopify.com/pages/thank-you" />

    Step 5: Test It

    Save your theme changes and visit the contact page. Submit the form and verify it appears in your Formboost dashboard.

    Next Steps

    PreviousAdding a Form to GitBookNextReact Forms with Gatsby