Deutsch Demo shop Store

Building a form in Shopware 6

From an empty form to the first submission. Every step happens in the administration; the four deep dives below go into detail.

Five steps

None of them leads into the source code.

  1. 01 Create the form An internal name, the confirmation, optionally an email.
  2. 02 Add groups Each group becomes a section with its own heading.
  3. 03 Split into rows Within a row the twelve-column grid distributes the width.
  4. 04 Insert elements 23 field types and 8 content elements, each with its own options.
  5. 05 Place it Shopping experience, product page or customer account.

What sits on the form itself

Four cards, and none of them touches a field.

Base data

A switch for whether the form is active and reachable, and a name. The name is an internal one - it appears in lists and in the history, not in the storefront.

Confirmation

What the sender sees after submitting: free text with HTML or one of the four message kinds. Without your own message the text from the snippets applies.

Email notification

A switch and a recipient address, per form. It does not replace the history, it comes in addition.

Elements

The tree. Everything else happens here - and only here is it decided what the form actually asks.

A form carries no sales channel and no technical name. A form is global; which channel it was filled in is only recorded by the submission.

The element tree

Everything else is elements, structure included. This is what the demo form "Request product advice" looks like in the administration.

Elements

# Name Type Width
1 Product advice Group, Structure element —
1.1 Customer type row Row, Structure element —
1.1.1 Customer type Dropdown (select), Input element 1/2
1.1.2 Advice topic Radio (radio), Input element 1/2
1.2 Company data row Row, Structure element —
1.2.1 Company Text (text), Input element 1/2
1.2.2 VAT ID Text (text), Input element 1/2
1.3 Project row Row, Structure element —
1.3.1 Quantity Number (number), Input element 1/3
1.3.2 Urgency Slider (range), Input element 1/3
1.3.3 Preferred date Date (date), Input element 1/3
1.4 Rush notice Warning message, Content element 1/1

The number in the first column is the outline, not the sort order: 1.2.1 sits in row 1.2, which in turn sits in group 1.

Once the form stands

Two questions remain, and both have a page of their own.

Where it appears

Shopping experiences, product page, customer account. At the latter two an assignment with a priority decides which form a product or an order gets.

What comes back

A history with form, context, customer, sales channel and date, plus filters and a CSV export. The export reads the stored submissions, not the current form.

Going deeper

Layout

Groups, rows and the twelve-column grid.

Fields

All 23 field types and what they do.