Shopify

Collect custom form submissions from your Shopify store with onsubmit.dev. Drop a Custom Liquid block onto any page or add a reusable theme section — no app to install and no server to maintain.

Overview

Shopify's built-in contact form posts to Shopify and can only email the store owner. When you need custom fields, multiple recipients, or notifications to Telegram, Slack, or a webhook, point your form at onsubmit.dev instead — it works on every Shopify plan, including trials.

There are two ways to add it: drop a Custom Liquid block into a page using the theme editor, or add a reusable theme section you can place on any template.

Your form ID is available in the onsubmit.dev dashboard after creating a form.

Custom Liquid section

The quickest way is the Custom Liquid block. In the Shopify admin, open Online Store → Themes → Customize, navigate to the page you want the form on, then Add section → Custom Liquid (or Add block → Custom Liquid inside an existing section) and paste a plain HTML form:

html

<form action="https://onsubmit.dev/f/YOUR_FORM_ID" method="POST">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

Make sure every input has a name attribute — that's the key your submission data is stored under. Save the theme to publish the form to your storefront.

The browser navigates to our response page after a plain HTML submit. Use the JavaScript approach below if you want shoppers to stay on the page.

Theme section file

For a reusable, merchant-configurable form, add a section file to your theme. Go to Online Store → Themes → Edit code, create a new section under sections/ (e.g. onsubmit-form.liquid), and paste:

liquid

<div class="onsubmit-form page-width">
  <form action="https://onsubmit.dev/f/{{ section.settings.form_id }}" method="POST">
    <input name="name" placeholder="Your name" required />
    <input name="email" type="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">{{ section.settings.button_label }}</button>
  </form>
</div>

{% schema %}
{
  "name": "onsubmit.dev form",
  "settings": [
    {
      "type": "text",
      "id": "form_id",
      "label": "onsubmit.dev form ID"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Send"
    }
  ],
  "presets": [{ "name": "onsubmit.dev form" }]
}
{% endschema %}

The section now shows up in the theme editor under Add section, where you (or the store owner) can paste the form ID and tweak the button label without touching code.

JavaScript submission

For a smoother checkout-adjacent experience without a full page reload, submit with JavaScript. Paste this into a Custom Liquid block or into your section file:

html

<form id="contact-form">
  <input name="name" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
  <p id="form-status" style="display: none;"></p>
</form>

<script>
  (function () {
    var form = document.getElementById('contact-form');
    var status = document.getElementById('form-status');

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      var data = Object.fromEntries(new FormData(form));

      fetch('https://onsubmit.dev/f/YOUR_FORM_ID', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })
        .then(function (res) {
          if (res.ok) {
            form.reset();
            status.textContent = 'Thanks! We will be in touch.';
            status.style.display = 'block';
          } else {
            throw new Error('Submission failed');
          }
        })
        .catch(function () {
          status.textContent = 'Something went wrong. Please try again.';
          status.style.display = 'block';
        });
    });
  })();
</script>

A note on theme app blocks

Shopify renders Custom Liquid and sections on the live storefront, so inline <script> tags run as expected — preview or visit the published page to test. If your theme uses a strict Content Security Policy, move the script into a theme asset file (assets/onsubmit.js) and load it with {{ 'onsubmit.js' | asset_url | script_tag }}.