Collect data with forms

With metaobject-creator, a Webflow Form Block saves each submission as a metaobject entry in Shopify, instead of in Webflow’s form submissions. 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 Webflow form or the metaobject creator

The same Form Block, sent to two different places:

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

Add a Custom element with the tag metaobject-creator and give it the custom attribute data-type with the type. Put a Webflow Form Block inside it. Without a form, the element is removed.

Field names are the keys. Each field’s Name, in its element settings, is the key of a field of the definition, such as serial_number, or the same words with spaces, such as Serial number: Smootify turns the Name into the key. Webflow renames fields when you copy a form, so check every Name after pasting. From the definition to the entry, for three of the fields above:

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 Webflow element. 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 field 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 Error message.

How many of each product. Next to each product checkbox, in the same card, a Number field with the custom attribute 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 fields 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 field with the custom 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.

Required fields inside components. Turn on Required in a field’s settings. On a field inside a Webflow component, where Webflow cannot keep it, give the field the custom attribute data-required instead; False turns it off. This works in every form of the page, a Smootify form or a plain Webflow form such as a contact form, and a field hidden by a condition does not count.

The Form Block’s messages. The Success message shows once the entry is saved, and the form hides. When Shopify refuses the entry, the Error message shows Shopify’s reason in its text, such as a field that does not exist or a required field left empty. The Form Button’s Waiting 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. Mark it Required to stop the form until it is checked.

3. Upload files

For a file field, add a Custom element with the tag file-input inside the Form, with the custom attribute 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 custom attribute customer-field with that key: customer-field="customer".

• 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 Error message.

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 custom attribute data-handle with the entry’s handle. Inside the Form Block’s Success message:

• a Link block with the custom attribute 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 Custom element with the tag button and 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 combo class.

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.

• 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 Custom element with the tag button and 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