Loops & Forms
Turn any element into a repeating loop or a working form by filling in fields, no hand-typed Twig or attributes required.
Say you've built a single blog-post card and want it to repeat across your 6 latest posts, or you've laid out a contact section and want the "Send" button to actually submit somewhere. Normally that means writing a loop expression or adding form attributes by hand. Instead, select the element in the layer tree, mark it as a Loop or a Form, and a panel opens with plain fields for everything, it writes the real code for you, in place.
This is a visual front end for Loops and Turn Any Element Into a Form. Everything you set here is stored as ordinary Twig or data-atom-* attributes, still readable and editable by hand in the Code tab if you ever need to.
Use Cases
- A repeating blog post, product, or testimonial grid, built once as a single card, then looped across your latest content.
- A working contact or lead-gen form, save submissions, email yourself a copy, and forward the data to a CRM via webhook, all without touching Twig or form attributes.
- Client-friendly setup. Marking an element as a Loop or Form and filling in plain fields is safe for a less technical teammate to configure, the Code tab stays available if something needs hand-tuning later.
The Loop Panel
Example: "Show my 6 latest blog posts, 3 per row, newest first." Mark your card element as a Loop, set Show to Posts and How many to 6, and the panel writes the query for you.
The panel has two modes. Basic is the fields below, no code. Custom lets you write the loop's expression directly, for anything Basic can't express: multiple post types at once, matching any of several categories instead of just one, stacking more than one custom-field rule, or referencing the current post. If a loop was hand-written (in the Code tab, or imported) and uses something Basic's fields can't hold, the panel opens in Custom automatically rather than quietly rewriting it down to what Basic can express, and switching back to Basic warns you first if anything would be lost.
| You want to... | Field |
|---|---|
| Choose what to loop over | Show: Posts, Products, Terms / Categories, Users, or External API (JSON) |
| Name the item inside the loop | Item name (defaults to post, product, term, user, or item) |
| Limit to one post type | Post type (Posts source) |
| Limit to specific categories | In categories, a live search picker |
| Set how many show at once | How many |
| Control sort order | Order by / Order |
The Form Panel
Example: turn a laid-out contact section into a real form, save every submission, and email yourself a copy. Mark the section as a Form, every input, select, or textarea inside it is picked up automatically as a field, then set what happens on submit.
| You want to... | Setting |
|---|---|
| Store every submission | Save to database toggle, visible under Submissions |
| Get emailed when someone submits | Email a notification toggle, set a recipient and subject, with "More options" for From name, Reply-to, and CC |
| Send the data to Zapier, Make, or another service | Send to a webhook toggle, set the endpoint URL |
| Show a thank-you message | After submit → Show a message, with your own text |
| Send them somewhere else instead | After submit → Redirect to a URL |
Recipients and the webhook URL are stored securely server-side, never written into the page's HTML.
Submissions also appear in wp-admin → Atom Forms, and a developer can add custom server-side handling when a form is submitted, see Atom Form for the full picture.