PW based form centric website (Recommendations, please?)

[LimeWub]

Hey!

This is more of a brainstorming phase question (sorry if it's a bit generic).

We are currently tasked to make a website, whose main purpose is users logging in and then submitting a couple of multiple-page forms.

An outline of the expected functionality would be something like this:

 

1. User registers / logs in
   
   So user registration/dashboard will need to be possible.
    
2. User begins stepped form (logged in users only)
    
3. User can save progress and continue later from where they left off
   
   Means part of the form should be posted every time they go to the next step (or maybe via ajax every X seconds) WITHOUT sending a final confirmation email. Then when final 'Finish' button is clicked it should THEN email both admin user and posting user.
    
4. Documents will be uploaded during the form. We want only the site admin and the submitter to be able to view these.
   
   Users shouldn't be able to see each other's uploads.
    
5. User eventually submits form and then can view it (only their submission, not others)
   
   Submission available, to view only, in the user's dashboard. Users shouldn't be able to see each other's submissions.
    
6. Form needs to be able to send data to Salesforce.
   
   On form final submit, data gets sent to salesforce.
   User submitting gets emailed.
   Admin User gets emailed of submission.

 

 

Basically, asking for ideas for how to achieve this, if possible. Have been looking into modules and the FormBuilder module looks quite nice but might need quite a bit of extending to achieve the multi-page, progress saving functionality (?) @ryan Do you think using/extending this module would work for the above situation?

Also, any ideas for how to limit front end users from seeing other people's content in processwire? 

 

Anyone who has any ideas for how to handle this, please throw them this way  

Thanks!

[LimeWub]

Just bumping as I did a bit more thinking about this today.

Basically I think I am almost there, but as I don't want to reinvent the wheel, I'll just share my ideas in case there is functionality that does more of what I want to achieve out of the box instead.

 

1. Form is built (by the developers)
    
2. Users login
   Not sure exactly how to do but have seen multiple threads about this on this forum so should be ok to do.

   Potentially useful links from my search:
   
   https://bitbucket.org/pwFoo/frontenduser/wiki/Documentation

   https://processwire.com/api/user-access/permissions/
   https://processwire.com/talk/topic/3706-how-to-blockredirect-one-user-role-away-from-admin-pages/
   https://processwire.com/talk/topic/107-custom-login/
   https://processwire.com/talk/topic/12896-frontend-user-login-and-access-levels/
   https://processwire.com/talk/topic/2937-creating-a-front-end-admin/

3. Users edit multi form
   Angular 2 has been recommended to do this. Although might be overkill and should be able to do with pure JS/ajax (?) opinions?
    
4. Form autosaves/saves per page
   Same as above... opinions?
    
5. Secure Uploads included on the form, need to be visible only for the user who uploaded and site admin
   Never done this before either but was thinking of using Wanze's Secure Files module
   http://modules.processwire.com/modules/fieldtype-secure-file/
   
   I'd need to create a front end upload field too, so could be a bit tricky? ideas?
    
6. On save, form visible in the user's dashboard and submission's admin
   Should be straightforward enough. Form data would be saved in json form but I would be able to render that.
   
    
7. Submission's admin an extension of the site admin for the admin user to be able to view submissions. An extra 'status' field in the only thing editable in the submission's admin.
   Maybe possible via Admin Custom Pages Module, although not 100% sure.
8. On final submit, form gets posted to salesforce
   Data is sent to salesforce api and awaits an ok response
    
9. if all ok, confirmation emails are sent.
   Not sure which module to use for that, or maybe just raw php but assuming should be very easy (?)

 

Basically, if there's some easier way to do what I'm thinking or have any better ideas, please let me know

 

(rough chart of my way of thinking included)

Feel free to ask me to clarify if I don't make sense ^^

[fbg13]

@LimeWub Regarding the processing of the form pages.

You can save the forms in one or more pages under a page representing the user.

For example you create a page named "Users" and whenever an user registers you create a page under users with the user's name.

Users
--username1
--username2

Then when he submits a form you create a page under the corresponding user.

Users
--username1
----form1
----form2
----form3
--username2
----form1
----form2

Or create just one page and you save just the fields from the current form and on the next forms you update the page with the new fields.

Then you can get the forms for a user with

$currentUserForm1 = $pages->get("parent=/Users/username1/, name=form1");
$currentUserForm2 = $pages->get("parent=/Users/username1/, name=form2");

create pages through api

upload files

[LimeWub]

@fbg13

Yes! Having the submission under the users on the tree makes quite a bit of sense as I wont have to be storing a UserID! Thanks

Just wondering though, shouldn't the users be created the same way admin users are created, just with a different usergroup (instead of as "pages" ?) -to allow for things like password reset etc?

[adrian]

@LimeWub - you might also find this useful: https://processwire.com/blog/posts/processwire-core-updates-2.5.14/#multiple-templates-or-parents-for-users

It's lets you place your users under a different parent or with a different template.

[fbg13]

6 hours ago, LimeWub said:

shouldn't the users be created the same way admin users are created

Users are pages in PW, if you look at the database there is no users table.

This is how you create an user

// Create the user
$u = new User();
$u->name  = $sanitizer->pageName($username);
$u->email = $sanitizer->email($email);
$u->pass  = $pass;
$u->addRole("member");
$u->save();

this will create a new page under /admin/access/users/ and that is your user.

What i suggested above is just what i find easier to work with as i don't want to mix default pages with the rest.

[gebeer]

As for organising your forms in the page tree, you could also save all form pages under one parent. When you save a form page via API, you can set the user who has created the form (which is the logged in $user). Some dummy code to achieve this

$form = new Page;
$form->template = 'form';
$form->parent = $pages->get('template=formparent');
/* set user who created this form */
$form->set("createdUser", $user);

Then in the user's dashboard you get all the forms for that user with something like

$forms = $pages->find("template=form, created_users_id={$user->id}");

I'm using this approach in some projects with frontend user dashboards and it works really well. Users can only see the content they created. All user content (here forms) lives under one parent page which makes it easy to create and query.
Important note: in the backend you need to edit the form template and enable "Allow the 'created user' to be changed on pages?" under the "Advanced" tab.

 

For the admin dashboard where forms for all users should be listed, you might want to spend a few bucks on Lister Pro. This saves you from developing a custom admin page. Lister Pro is very powerful and you can create a Lister that shows all pages with template form. You can list all forms sorted by created date, filter for forms of specific users etc. Also inline editing for the status field is possible. So admins can change the status very quickly.

 

For the multi-step form: I also think that using Angular here would be overkill. I have a multi-step form that I render with PHP and use some very simple JS to step through the form. The form is divided into fieldgroups that reflect the steps. In the JS you can use AJAX to save the steps of the form that have been completed.
Since you want to store the form data as JSON, you might want to look into a JS form framework that renders forms from JSON, something like Alpaca Forms. This would save you from creating the form rendering logic on the PHP side. They also support multi step form wizards.

 

And, finally, what @adrian suggested above for creating users under different parents makes a lot of sense. I use this approach quite often.

[LimeWub]

Thanks so much for the responses @adrian @fbg13 and @gebeer ! You are all fantastic and so helpful!

Looking into the recommended options now