Collect data with forms

With metaobject-creator, a <form> saves each submission as a metaobject entry in Shopify, instead of sending it to an endpoint of your own. The data sits in the same place as your products, orders and customers. You can show it again on the site, and Shopify Flow can react to it. Use it for warranty registrations, reseller applications, event sign-ups or reviews.

A plain form or the metaobject creator

A plain <form> sends its data to the endpoint or the script you write. Inside metaobject-creator, the same form saves each entry in Shopify, next to your products and customers. You can show the entries again on the site with Show metaobjects, and Shopify Flow can start an automation for each one.

1. Create the definition in Shopify

Under Settings > Custom data > Metaobjects, add a definition with the fields you want to collect. Turn on:

• Active-draft status, to save entries as drafts with data-draft and approve them before they show (step 4). Without it, entries are saved without a status, and data-draft has no effect;
• Storefronts access, if you want to show the entries on the site. Saving works without it.

Write down the definition’s type, such as warranty_registration, and the key of each field, such as serial_number for “Serial number”.

2. Build the form

Write the element metaobject-creator with the attribute data-type set to the type, and put a <form> inside it. Without a form, the element is removed.

<metaobject-creator data-type="warranty_registration" data-draft="true">
  <form>
    <input name="serial_number">
    <input name="purchase_date">
    <label><input type="checkbox" name="accepts_reminders"> Remind me before the warranty ends</label>
    <file-input name="receipt"></file-input>
    <button type="submit" data-wait="Sending…">Register</button>
  </form>
  <div form-done hidden>Thank you. Your product is registered.</div>
  <div form-fail hidden>Something went wrong</div>
</metaobject-creator>

Field names are the keys. The name of each field is the key of a field of the definition, such as serial_number. From the definition to the entry, for three of the fields above:

1. Settings > Custom data > Metaobjects: the definition Warranty registration, type warranty_registration, with the fields Serial number (key serial_number, single line text), Accepts reminders (key accepts_reminders, true or false) and Receipt (key receipt, file). Active-draft status on, to save entries as drafts with data-draft. Storefronts access only to show the entries on the site.
2. In the form, inside metaobject-creator, each field’s name is a key: a text input named serial_number sends what the visitor types; a checkbox named accepts_reminders sends true when checked, and false when unchecked; a file-input with name="receipt" sends the file, which goes to the store’s Shopify Files. Empty fields are not sent, and neither are fields whose name starts with _: use those for fields that only help the visitor, such as “repeat your email”.
3. Content > Metaobjects > Warranty registration: the new entry, with its values. With data-draft="true" on metaobject-creator, it is a draft until you make it active.

What each field type takes. Smootify’s server turns what the form sends into the format of each field of the definition, so most fields need only the plain HTML control. What the visitor writes, and what Shopify saves:

A value already in Shopify’s own format passes as it is. For a measure, the select with data-unit-for is not sent as a field of its own, so its name does not matter. A number without a unit is refused by Shopify, with its reason in the form’s [form-fail].

How many of each product. Next to each product checkbox, in the same card, an input type="number" with data-quantity-for set to the checkboxes’ name (data-quantity-for="products") says how many of that product the entry asks for, such as 6 glasses on a gift list. Give the number inputs the name of a JSON field of the definition, such as quantities: Smootify sends, for each checked product, its quantity, at least 1. The products of a gift list page then show how many are gifted: see Product cards from a field.

The product and the variant on the page. A form inside a smootify-product, such as a back-in-stock alert, can save which variant the visitor was looking at: a hidden input with the attribute variant="id" takes the current variant’s ID and follows every change of option. Give it the name of a variant reference field of the definition, such as variant.

<input type="hidden" name="variant" variant="id">

Required fields. Add the native required attribute to the field. A field hidden by a condition does not count.

The form’s messages. [form-done] shows once the entry is saved, and the form hides. When Shopify refuses the entry, [form-fail] shows Shopify’s reason in its text, such as a field that does not exist or a required field left empty. Both start with hidden. The submit button’s data-wait text shows while it saves.

Fields that are not saved. Every filled field is sent, and a field whose key is not in the definition makes Shopify refuse the whole entry. For a field the entry does not need, such as a checkbox to accept your terms, start its name with _, such as _accepted: Smootify does not send it. Add required to stop the form until it is checked.

3. Upload files

For a file field, add the element file-input inside the form, with name set to the field’s key. The files go to your store’s Shopify Files, and the entry gets them.

• For a field that holds a list of files, add data-multiple with the most files allowed, such as 3. Without a number, the limit is 5.
• You design the upload area with the same parts and limits as the file uploader, such as a drop zone, a list of files and max-file-size: see File uploads.
• While a file is still uploading, the form cannot be sent.

Shopify Files has its own limits on size and file types. For larger files, upload them with another service and give the definition a URL field instead of a file field: the form sends the file’s address in a field with that field’s name. A file field does not take a file stored outside Shopify.

4. Moderate with drafts

With data-draft="true" on metaobject-creator, each entry is saved as a draft. It stays off the site until you make it active in Shopify. Use it for anything visitors write that others will read, such as reviews. Without it, entries are active as soon as they are sent.

5. Link the entry to the customer

To know which customer sent each entry, such as a warranty registration or a reseller application:

1. In the definition, add a field of type Customer (a customer reference), with a key such as customer.
2. On metaobject-creator, add the attribute customer-field with that key: customer-field="customer".

<metaobject-creator data-type="warranty_registration" customer-field="customer">
  <form>
    <input name="serial_number">
    <button type="submit" data-wait="Please wait…">Register</button>
  </form>
  <div form-done hidden>Thank you. Your product is registered.</div>
  <div form-fail hidden>Something went wrong.</div>
</metaobject-creator>

• No field to add. You do not add the customer to the form. Smootify’s server finds out who is logged in and writes the customer into that field. A value sent with the form under that key is ignored, so nobody can send an entry in another customer’s name.
• Only for logged-in customers. Until the customer logs in, the form is hidden and cannot be filled. Once they are logged in, metaobject-creator gets the class is-customer and the form shows. Put a login link next to it for the others: see Customer accounts.
• The session must be valid. When the login has expired, the form shows “Log in to send this form” in its [form-fail].

Only for some customers. To offer the form only to some customers, such as resellers you approved, put it inside an element with customer-tagged="reseller", or with if-customer-metafield on a metafield of the customer. A Shopify Flow workflow can then add or remove the tag. These conditions only show or hide the form on the page: see customer conditions.

The customer’s entries in the account. With customer-field, Smootify’s server also keeps a list of the customer’s entries: each new entry goes first into the customer’s metafield smootify.<type>, such as smootify.gift_list. The metafield is created the first time, and keeps the 128 newest entries. An account page lists them with smootify-metaobjects: see The logged-in customer’s entries.

6. Share the new entry

Once the entry is saved, metaobject-creator gets the class is-created and the attribute data-handle with the entry’s handle. Inside [form-done]:

• a link with data-handle-param links to the entry. Point the link to the page that shows one entry, such as /gift-list, and give data-handle-param the name of that page’s parameter, such as l: Smootify writes /gift-list?l=<handle> into it. That page shows the entry with smootify-metaobject and the same data-handle-param: see The entry named in the page link;
• a button with data-action="share" shares the same link: the device’s share sheet on phones, otherwise the link is copied. Add data-copy to always copy it, and data-title to name the share. For two seconds after a click, the button has the class is-shared or is-copied: show a “Link copied” text with that class.

<metaobject-creator data-type="gift_list" customer-field="customer">
  <form>…</form>
  <div form-done hidden>
    <p>Your list is ready</p>
    <a href="/gift-list" data-handle-param="l">Open your list</a>
    <button type="button" data-action="share" data-title="My gift list">Copy the link</button>
  </div>
</metaobject-creator>

7. Let the customer edit or delete the entry

metaobject-editor opens an entry the logged-in customer created and lets them change it or delete it, such as their gift list or a warranty registration. It takes the same attributes as the form that created the entry: data-type, customer-field and, for the entry named in the page link, data-handle-param.

<metaobject-editor data-type="gift_list" customer-field="customer" data-handle-param="l">
  <form>
    <input name="title">
    <textarea name="message"></textarea>
    <button type="submit" data-wait="Saving…">Save</button>
  </form>
  <div form-done hidden>Saved.</div>
  <div form-fail hidden>Something went wrong.</div>
  <button type="button" data-action="delete" data-confirm="Delete this list?" data-redirect="/account/gift-lists">Delete the list</button>
</metaobject-editor>

• The form opens filled in with the entry: texts, checkboxes, radios, selects, quantities and file-input. Saving changes the entry.
• Only its owner sees it. Smootify’s server checks that the logged-in customer is the one in the customer-field of the entry. For the owner the element gets the class is-owner; for anyone else it stays hidden.
• Delete. A button with data-action="delete" deletes the entry and takes it out of the customer’s entries. data-confirm asks first with that text, and data-redirect opens that page afterwards. Without a redirect, the element gets the class is-deleted.
• It needs the Server plan and Metaobject creator, like the form that creates the entries.

8. React with Shopify Flow

The free Shopify Flow app can start an automation each time an entry is created: send an email, tag a customer, update a metafield, call another service. Install it in Shopify, then create a workflow that starts when a metaobject entry is created. With customer-field, the entry already holds the customer, so the workflow can tag them or update their metafields.

Ready-made workflows are in the Flow library, each with the definition to create and a file to import: review moderation and review requests, and alerts for back in stock, a waitlist and a price drop.

Before you publish