Since “Express” is only available since version 8, this Add-On won’t work with concrete5 version 5.7.x and below!
This Add-On will work from version 8.0.0 up until version 8.1.x (so no version 8.2.x and higher).
Express Forms in version 8, they are awesome! But unfortunately, a little harder to style (the HTML that is). Want to set an asterisk for your required fields or remove your field set titles/legends? You’d have to create a new template for the Block Type “express_form”. Or set a default “Submit” text for your buttons, that could be “Send” or “Submit form” or whatever you like. You’d also have to implement that in your template.
But with this Add-On, these are things you can configure. You can configure to display your field set title (checkbox). Maybe add an icon in front of your submit button or wrap your button with extra other divs? You may need some HTML knowledge before configuring these settings though. So if you haven’t got these skills, ask your developer or read some tutorials about HTML!
Once configured, you can select the “Block Template” as you’d normally do for your blocks. Click the block, go to “Design & Custom Template”, click the “Settings wheel” and change the custom template to “Express Form Templating”. Do this for all your forms, and all your forms will have the same standard you’ve configured. You’ll also notice there’s an extra template called “Express Form Templating Handles”. This is very useful if you’d want to put field next to each other. Where you have fields left and right. What the code does, is add handles from the field AND field type to the div surrounding the input. Example code:
<div class=”form-group ak-handle-title at-handle-text”>
This way, you could do styling in your (theme) CSS, based on these classes. You can view an example of how to do that in "How to style form groups".
By default, the Add-On will configure your templates EXACTLY the same as it’s shipped with concrete5 (upon install). So if you use the default setup, everything should remain the same. But there are a couple of extra divs/wrappers added, you may want to remove. Up to you of course whether or not to keep them, but I tend to keep it as clean as possible.
Other than all this, it’s also perfectly possible to edit the default template from this Add-On. Perhaps you want to add some icons in front of specific inputs? Or add an extra stack programmatically or whatever. The template is divided into 2 parts. One part is the template itself, the other an “element”. You should be able to just edit the element by copying:
Make your edits in this file, and all Express Forms using the “Express Form Templating” Block Template will change along.
As you can see, this Add-On makes use of “Blade” templating. Blade is the simple, yet powerful templating engine provided with Laravel. It should be quite easy to edit! You can view the documentation on Laravel.com.