Topic
7 how-tos
Forms
Build a multi-step form with conditional steps
A step shown only for business enquiries: the JS model, a group around the step's fields, and one hide rule acting on both the step and the group, because hiding a step alone leaves its required fields required on the server.
Show a field only when another field has a given value
One rule that both shows the field and makes it required, with Required left unticked, plus the conditionals printed for the browser. Required with a show rule alone is the form nobody can submit.
Style a form without forking every input template
CSS scoped to the form and aimed at the platform's own class names, a few classes the editors apply, and at most one or two inputs overridden with a partial that falls back to the platform's markup.
Create a person record from a form submission
Find the person by lower-cased email, update them if found (Record index 0, groups merged, names filled only when empty), create them otherwise. The actions were run on a development site with answers passed in place of a real submission.
Take a payment inside a form
A donation form: a Payment element on its own last step, set to Authorize & Capture, the platform's payment script in the layout, and a receipt sent from the form's Completed event, because the platform sends none.
Submit a Core dna form from a React or Vue front end
The front end posts the visitor's answers to a route on your own server, which sends them to the form's submission API, keeps the submission token in the visitor's session, and answers with done, the errors by field, or a payment to go to. A 207 means stored but not finished: the next attempt continues it.
Add the platform's form scripts to a form layout
Load js-forms.js and its stylesheet with the page's nonce, wrap the steps in a .coredna-js-form container, print the form's conditionals for js-forms-conditionals.js, add js-payment-element.js for a payment, and point the container at a result callback, so a failed submission shows its errors to the visitor.