Front-end tips, tools and general development

[GuruMeditation]

A collection of links and information for front-end development.

Front-end forms

Create simple forms using the API

https://processwire.com/talk/topic/2089-create-simple-forms-using-api/

Gist code for the above link

https://gist.github.com/somatonic/4027908

Build and process generic forms from page templates
https://gist.github.com/somatonic/5011926

Build and process forms manually with the API
https://gist.github.com/somatonic/4027908

Upload images
https://gist.github.com/somatonic/4150974

Form with fields rendered in a table
https://gist.github.com/somatonic/5415646

Manual form markup with file upload handling
https://gist.github.com/somatonic/5233338

Form Builder (module)

Building front-end forms on your website has never been so simple. ProcessWire Form Builder lets you create, edit and publish forms with no development necessary.

http://modules.processwire.com/modules/form-builder/

Front-end member management

FrontendUser: login, logout and register users / members (module)

https://processwire.com/talk/topic/9811-frontenduser-login-logout-and-register-users-members/

Member login, logout, password reset

https://processwire.com/talk/topic/1716-integrating-a-member-visitor-login-form/?p=15919

Popular front-end UI frameworks

UIkit

http://getuikit.com/

Semantic UI

http://semantic-ui.com/

Foundation

http://foundation.zurb.com/

Bootstrap

https://getbootstrap.com/

Materialize

http://materializecss.com/

Skeleton

http://getskeleton.com/

Original post

I'm just wondering if anyone is willing to help out with a resource/tutorial page for front-end development? By this I mean a resource for those wishing to develop sites that only allow their users to access the front-end.

My first topic would be to talk about the pros and cons of PW in regards to front-end development. I'm not referring to the API, I'm referring to front-end login forms, front-end page creation etc and how the process could be made simpler? The front-end edit addition to PW 3 is a great start, but I'd love to see it extended to easy front-end page creation based on back-end pages. 

Thoughts? ideas? I'd like to create a page or thread that contains an up-to-date resource with code snippets etc.

[Ivan Gretsky]

Ii is kind of hard to answer such a broad question. Maybe we should narrow it down to something managable?

And of course this "already have been asked and answered" a number of times.

pwFoo seems to be persistent in building modules related to this problem.

[LostKobrakai]

In my opinion the biggest hurdle here is building the forms and processing their inputs. There are various tools trying to solve that part, but personally they've never fit my workflow to stick. Also, while processwire does have a forms api, it's not meant to be used in the frontend and therefore does only solve this issue partly.

[gebeer]

I have to say that the form API works pretty well in the frontend. I have several sites where I use it without issues. Once you get the hang of it, it is actually quite nice to interact with.
 
Only thing I am missing is a more easy way than the current to get more control over the rendered markup. Formbuilder comes to the rescue here. If I remember correctly, when UI framework support was introduced to formbuilder, Ryan stated that the core functionality was altered to easier support UI frameworks.
But I never found any hints on how to easily alter rendering of form markup (especially field wrapper's markup and attributes) other than through hooks.
 
Nevertheless, I agree that it would be nice to have a docs section dedicated to this topic. Or at least have a link collection to relevant forum posts that deal with frontend forms, processing and saving of input values.
Links I can come up with quickly:
https://processwire.com/talk/topic/2089-create-simple-forms-using-api/
and, of course, Soma's great gists (big kudos)
https://gist.github.com/somatonic/5011926 (build and process generic forms from page templates)
https://gist.github.com/somatonic/4027908 (build and process forms manually with API)
https://gist.github.com/somatonic/4150974 (upload images)
https://gist.github.com/somatonic/5415646 (form with fields in table)
https://gist.github.com/somatonic/5233338 (manual form markup with file upload handling)

[GuruMeditation]

Ii is kind of hard to answer such a broad question. Maybe we should narrow it down to something managable?

And of course this "already have been asked and answered" a number of times.

pwFoo seems to be persistent in building modules related to this problem.

It has indeed, and I have read most of the threads, and I commend pwFoo for his efforts with the modules. This was more about a resource of links and general info for the convenience of front-end developers.

In my opinion the biggest hurdle here is building the forms and processing their inputs. There are various tools trying to solve that part, but personally they've never fit my workflow to stick. Also, while processwire does have a forms api, it's not meant to be used in the frontend and therefore does only solve this issue partly.

I couldn't agree more. I'd love to see it expanded further in the future to make it easier for newer users.

I have to say that the form API works pretty well in the frontend. I have several sites where I use it without issues. Once you get the hang of it, it is actually quite nice to interact with.

Only thing I am missing is a more easy way than the current to get more control over the rendered markup. Formbuilder comes to the rescue here. If I remember correctly, when UI framework support was introduced to formbuilder, Ryan stated that the core functionality was altered to easier support UI frameworks.

But I never found any hints on how to easily alter rendering of form markup (especially field wrapper's markup and attributes) other than through hooks.

Nevertheless, I agree that it would be nice to have a docs section dedicated to this topic. Or at least have a link collection to relevant forum posts that deal with frontend forms, processing and saving of input values.

Links I can come up with quickly:

https://processwire.com/talk/topic/2089-create-simple-forms-using-api/

and, of course, Soma's great gists (big kudos)

https://gist.github.com/somatonic/5011926 (build and process generic forms from page templates)

https://gist.github.com/somatonic/4027908 (build and process forms manually with API)

https://gist.github.com/somatonic/4150974 (upload images)

https://gist.github.com/somatonic/5415646 (form with fields in table)

https://gist.github.com/somatonic/5233338 (manual form markup with file upload handling)

Thanks for that, I'll add the links to the OP if that's ok? I did purchase the Form Builder module mainly to support Ryan, but haven't really spent a lot of time with it.

[gebeer]

Thanks for that, I'll add the links to the OP if that's ok? I did purchase the Form Builder module mainly to support Ryan, but haven't really spent a lot of time with it.

You are welcome.

Formbuilder is a great tool and makes the task of building frontend forms quite convenient. It covers most of the use cases for forms on websites.

Building Forms is always a somewhat complex topic in every CMS/framework and I think Ryan has done a great job, both with Formbuilder and with the form API, to make this task easier for developers.

If you need total control over the HTML of your form, coding it from scratch and then processing it manually seems to be the way to go.

[justb3a]

@gebeer: Did you try to use $form->setClasses($array) and $form->setMarkup($array). Using this you are also able to set different classes/markup depending on Inputfield.

[gebeer]

@justb3a

thank you for those. Didn't know about $form->setClasses(). Pete has just given some nice info about $form->setMarkup() over there.

I will definitely have a closer look at these methods.

[LostKobrakai]

The processwire forms api just breaks down as soon as you need flexible non-form markup between different form fields, which is why I'm not using it. 

[gebeer]

@LostKobrakai

yes, this is right. Here Soma gives a good example of how to use your own form markup and do the processing with PW API.

[adrian]

The processwire forms api just breaks down as soon as you need flexible non-form markup between different form fields, which is why I'm not using it. 

It may not cover all needs, but I usually use an InputfiedMarkup:

$f = wire('modules')->get("InputfieldMarkup");
$f->value = "Any HTML you want here";

[GuruMeditation]

I remember seeing some code, or a reference to a hook that prevented certain user groups from accessing the admin area completely. I can't find it, and I reckon it would be a good link to add to the OP. Does anyone have any ideas of where to find it, or possibly a code example to provide here?

[adrian]

I remember seeing some code, or a reference to a hook that prevented certain user groups from accessing the admin area completely. I can't find it, and I reckon it would be a good link to add to the OP. Does anyone have any ideas of where to find it, or possibly a code example to provide here?

This is one way: http://modules.processwire.com/modules/admin-restrict-page-tree/

Sometimes when I have complicated forms and I don't want to rebuild on the front end, I use Adminbar: https://github.com/teppokoivula/AdminBar

Be sure to use that fork by teppo. Apiesa is not maintaining the original anymore and there are problems on recent versions of PW but I think teppo' should work well. I have my own fork that fixes the recent problems which I can also share if needed.

I actually change the css to style it to match the website and it actually looks and works really nicely depending on your needs. Obviously not appropriate for a simple form but it can be great when there are user editable sections of a site but you want to keep your users out of the admin.

[Fuzen]

What would be awesome is if Form Builder had built-in support for creating Edit and Create ProcessWire page forms that mirrored the back-end forms. I haven't used the module in some time and am getting ready to use it for a new site, but as I understand it: you create fields that are independent of ones already present in back-end forms.

The holy grail would be to spit out front-end forms that match the back-end forms exactly.

And/or these features:

1) Restrictions on who has access based on member/permissions level.

2) An option to lock down editing of a form to the user that the form data belongs to.

3) Ability—when not exactly mirroring a back-end form—to designate which ProcessWire page should populate a given field. Then have the form update or create those Processwire pages upon submission of the entire form.

I know this is crazy stuff I'm rambling about here, but something along these lines just exponentially opens up a whole new world to non-developers. We could create sophisticated apps in much the same manner as we already can on the back-end.

Being able to update not just one page, but multiple instances throughout ProcessWire would be mind-blowing.