Using blueprints to build frontend forms?!

I would love to use blueprints to build forms for the frontend, too. I think this would be a great feature or plugin! I had a deeper look at the panel but as a frontend guy I understand how the forms are build there in principle, but I have no idea what really needs to be done to get it to the frontend … any thoughts, ideas, suggestions?

2 Likes

I don’t have a solution, but came across this library that might be a good starting point: http://docs.yafowil.info/index.html

You can describe form layouts with YAML: http://docs.yafowil.info/yaml.html

What do you imagine will happen with the forms once the submit button is pressed? There needs to be some kind of an action, which you need to develop.

This idea crossed my mind a couple times, but I’m not sure it’s actually easier when I look at the example linked above.
Fields in the Panel are often just an ID and a value. Fields on the front end can have lots of attributes.

Would I rather write this:

- description:
    factory: label:field:textarea
    value: expr:context.get('my_field', '')
    props:
        label: i18n:description:Description
        rows: 5

or this:

  <label for="my_field">Description</label>
  <textarea class="textarea" id="my_field" name="my_field" rows="5">description</textarea>

I have to learn the first syntax, I already know the second one.

Also, plugins like Uniform make things relatively easy.

Thanks a lot for your replies.

@Malvese Uniform looks interesting … thanks for the hint.

I thought of this a while ago, and even designed on paper how it might work. I never actually built it, but here’s how I saw it working…

First build the forms with the same syntax as blueprints and put them in a ‘forms’ folder under the site directory.


action: email   # Or database, or something else...
address: response@domain.com
fields:
    name:
        type: text
        label: Name
        width: 1/2
    email:
        type: email
        label: Email
        width: 1/2
    message:
        type: textarea
        label: Message

Then just include the form in a page with a kirbytag (form: contact). The contact name would correspond to contact.php in the forms directory. (Else you could use a name field in the blueprint, but that seems needlessly complicated.)

I imagined using uniform to handle the form submission and saving stuff. Sadly, I never did build this… The idea is fairly sound though, I’m working on another project right now that uses a very similar system (though unrelated to Kirby).

This is really close to my thoughts.
I found the following files in the panel, but I’m not sure if it’s possible to use it for the frontend?!

https://github.com/getkirby/panel/blob/master/app/forms/installation.php

https://github.com/getkirby/panel/blob/master/app/controllers/views/installation.php

https://github.com/getkirby/panel/blob/master/app/views/installation/signup.php

https://github.com/getkirby/panel/blob/master/app/lib/form.php

basically make the blueprint design the model for the data, and what to do with it (store in file, send as email, dump into database). I like that idea.