Shopify Forms: Liquid Template Setup

Add a custom contact form to a Shopify theme with a Liquid section that posts to a Formboost endpoint — your own fields, spam screening, Slack or email.

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

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Add the Form to Your Theme

Option A — Page Template

In Shopify Admin, go to Online Store → Themes → Edit Code
Under Templates, open page.contact.liquid (or create it from page.liquid)
Replace or add the form:

<div class="page-width">
  <h1 class="h2">{{ page.title }}</h1>

  <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST" class="contact-form">
    <div class="field">
      <label class="field__label" for="name">Name</label>
      <input class="field__input" type="text" id="name" name="name" required />
    </div>
    <div class="field">
      <label class="field__label" for="email">Email</label>
      <input class="field__input" type="email" id="email" name="email" required />
    </div>
    <div class="field">
      <label class="field__label" for="phone">Phone (optional)</label>
      <input class="field__input" type="tel" id="phone" name="phone" />
    </div>
    <div class="field">
      <label class="field__label" for="message">Message</label>
      <textarea class="field__input" id="message" name="message" rows="6"></textarea>
    </div>
    <button type="submit" class="button">Send Message</button>
  </form>
</div>

Option B — Section (Embeddable Anywhere)

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

<section class="section-{{ section.id }}-padding">
  <div class="page-width">
    {% if section.settings.heading != blank %}
      <h2>{{ section.settings.heading }}</h2>
    {% endif %}

    <form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" rows="5"></textarea>
      <button type="submit">Send</button>
    </form>
  </div>
</section>

{% schema %}
{
  "name": "Contact Form",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Contact Us" }
  ],
  "presets": [{ "name": "Contact Form" }]
}
{% endschema %}

Step 3: Pass Customer Context (Optional)

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

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

Step 4: Custom Redirect (Optional)

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