Forms and collections

A published site's forms need a database to keep what visitors send: attach Neon or Supabase in the Publish dialog. Without one nothing is saved, and visitors see a notice that their answer did not go through instead of the thank-you; the form keeps what they typed. See Publish a website.

A website takes input and shows content that changes. In PopCraft a form is drawn like anything else and becomes real controls on the page, and content lives in the file as collections that a design repeats itself for.

Form controls

A control is an ordinary layer that says what it is on the web. It keeps its look on the canvas; on the page a real control takes its place, so a visitor can type, tab between fields and send the form.

Select a layer and open the Design panel's Web section, then pick a Form control:

• Name is what the value is sent under. Radio buttons of one group share a name.
• Required stops the form being sent while the control is empty.
• Writes variable sets a variable as the visitor types, so a layer bound to it follows: a greeting that says the name being typed, a total that follows a quantity.
• A form's After sending goes to another screen, such as a thank-you page.

The web preview shows what a form would send instead of sending it.

Collections

A collection is content with the same fields: posts, products, team members. Its records are part of the file, so they undo, version and sync like the design.

1. 1.Click Collections in the Design panel0:00
2. 2.Each field has a type, and the token a text says it with0:01
3. 3.Add a record and type its values0:03

Description

The website template with nothing selected. Collections in the Design panel opens the file's content: a Posts collection with a title and a reading time for each record, and under each field's name the token a text says it with. A record is added and its title typed into the new row.

1. With nothing selected, click Collections in the Design panel (it is also at the foot of a layer's Web section).
2. Click New collection, name it, and name its fields. Each field has a type: text, long text, number, yes / no, date, color, image, link, address or option.
3. Click Add record and type in the cells, or Import CSV: the first row names the fields, and a column the collection does not have yet becomes a text field.

A file holds up to 50 collections and 2,000 records.

Say a field in a text

Under each field's name is its token, such as {{item.title}}. Type it in a text layer and the page shows the record's value there. A token can sit among other words: {{item.minutes}} min read.

A property can follow a field too. Bind it to an expression that names the field with item_: a badge whose visibility is item_minutes > 5 shows only on long reads.

Repeat a frame for each record

1. Design one card inside a frame with auto layout.
2. Select the frame and, in the Web section, set Repeat its content for to the collection.
3. Choose an order, a limit, or a rule such as item_featured to show only some records.

The canvas shows the card once, as you designed it. The page shows it once per record, each with its own values.

Show one record

A layer can be about one record of its own: the product in a hero, the post a teaser points at.

1. Select the layer (a frame, a picture, a text or a component instance).
2. In the Design panel's Data section, pick the collection, then the record.

The layer and everything inside it show that record wherever they follow a field. The nearest record wins: a layer's own, then the list it is in, then its page's.

Bind a layer to a field

Under the record, Data lists what the selected layer can take from it:

• Text: a text's words.
• Picture: an image layer's picture.
• An instance's properties: each Text, Image or Boolean property of its component.

Pick a field for each, or Not bound to type it yourself again. A text can also say a field among other words with {{item.<field>}} (above).

Components that take their content from data

Make the card once as a component and give it properties for what changes: a Text property for the title, an Image property for the picture (in the component, select the picture and choose the property under Component inputs). Put an instance in a list, or pick a record for it, and bind each property to a field in Data. Every card shows its own record, and a change to the component restyles them all.

A page for each record

Select a top-level frame and set A page for to the collection. The frame becomes one page per record, at its own address followed by the record's: /blog/first-post. The address comes from the record's address field, or its first text field.

A link from a repeated card to that frame goes to the card's own record. In the web preview the screen picker lists every record's page.