creating forms by hand is not hard, but can be time consuming due to the verbose nature of the required HTML syntax.
For the same reason, they can also be hard to maintain.
barely solves this problem with the forms plugin, allowing you to configure even complex forms with a few simple yaml keywords.
read full documentationYou can specify as many forms as you want per page, each having a unique name. You should specify an action for every form, but don't necessarily have to (e.g. if you handle submission with JS).
Inside the form, you can create form fields and groups. Groups start with "group-" and translate to HTML fieldsets. The legend is configurable.
All default HTML5 form fields are understood:
Just configure them like you would in HTML, putting the attribute as key for your desired value. In cases like select, configure the options as a yaml dict of the same name, for button, feel free to specify an action like submit or reset, and so on.
Forms, groups and fields can also take an optional classes argument each.
Let's see an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | forms: ourform: action: sample.php classes: extraclass group-basicdata: legend: Basic Data name: type: text required: true placeholder: Name mail: type: email required: true placeholder: E-Mail message: type: textarea required: true classes: extra placeholder: Your enquiry gdpr: type: checkbox label-after: Agree to GDPR name: gdpr-checkbox value: agreed required: true send: type: button value: Send Message action: submit |
The plugin will turn this simple yaml config into the following HTML-snippet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form id="form-ourform" class="extraclass" action="sample.php"> <fieldset id="form-ourform-group-basicdata" class=""> <legend>Basic Data</legend> <input type="text" id="form-ourform-name" class="" name="name" value="" placeholder="Name" required> <input type="email" id="form-ourform-mail" class="" name="mail" value="" placeholder="E-Mail" required> </fieldset> <textarea id="form-ourform-message" class="extra" rows="" cols="" name="message" placeholder="Your enquiry" required></textarea> <input type="checkbox" id="form-ourform-gdpr" class="" name="gdpr" value="agreed" placeholder="" required> <label for="form-ourform-gdpr">Agree to GDPR</label> <button type="submit" id="form-ourform-send" class="" name="send">Send Message</button> </form> |
Including {{ form_ourform }} anywhere in the page's template will render it just like you would expect:
