Advanced Forms Module using Form.io

[themattkenney]

I am new to the Orchard community and would like to contribute an Advanced Forms module leveraging another MIT open source project Form.io. I have a good start on it and am wondering if someone would like help finish it with me to give an upgrade to the community making Orchard Core's form creation even more powerful. This module allows Orchard Core community to focus on the CMS while leveraging Form.io community to focus on building forms.

Current State: I have completed Creating Forms, Editing Forms, Allow Form Submissions, View Form Submissions

Could Use Help With:

• Enhance Content type Creation to allow setting the Edit URL
• Ensure meets Orchard Standards
• Hook No Captcha up to Forms No Captcha
• Saving document uploads in Assets (Currently saves as Base64 in DB)
• Misc Items
• Testing
• Currently in Beta2 would like to move to the Dev Branch in Modules.CMS (I'm getting an error in the TypeFeatureProvider in Dev Branch when adding any custom module)

Future Items:

• Encrypt Fields
• Widget to add a form to a page
• Dashboard for Form Submissions
• Embed Existing Forms

Form.io links

• https://github.com/formio/formio.js/
• http://formio.github.io/formio.js/app/examples/

What Different from the Forms Module?

• Drag and Drop Form Builder that is customizable
• Validation of fields done in the form builder. For example set min & max length in the builder
• Advanced Forms and Submissions were created as Content Types. Meaning all form submissions are saved as JSON in a content item without having to create a workflow allowing the module to leverage all content type features.
• Wizard Forms can be created
• Additional field types Tags, Signature, Location, Mask Fields, and more

I started creating this module because as I used the existing form module I had to create a Content Type, Page, and Workflow to allow entry of a form by an end-user. I have the source in Bitbucket now but can move to Github for future use.

[themattkenney]

I moved the code to a GitHub Repo if someone would like to help knock this out. https://github.com/themattkenney/OrchardCore_AdvancedForms

@sebastienros this is the item I pinged you about on Saturday

[sebastienros]

I will talk about it at next meeting.

Would be nice if you could help us understand how it is better than the current Forms module we have.

[themattkenney]

I will write something up. If you would like to Skype that might help any questions you have too.

[themattkenney]

Why would this module be better than the current forms module?

I will give the high-level bullets on why I feel this module is better than break each bullet down.

• Drag and Drop Form Builder that is customizable
• Advanced Forms and Submissions were created as Content Types
• Validation of fields can be done in the form builder
• Conditional Logic for field
• Additional field types Tags, Signature, Location, Mask Fields, and more
• Preview Forms
• Read Only Forms
• Printable Forms
• Calculated Fields
• The speed at which an Advanced Form can be created by end-user compared the forms module

Drag and Drop Form Builder that is customizable Uses a WYSIWYG Editor that gives the ability for a single column, multi-column, and tabs. See the example form below built with the module in Orchard Core that allows multiple column lengths, tabs, masked inputs, reset buttons, and more.

Front-end View

Advanced Forms and Submissions were created as Content Types In the Orchard Core Form module to create a form, it takes several steps in order to allow the form to be completed and stored by an end-user. An admin must create a content type, a page with a form, and then a workflow that requires the end-user to know JSON. For a large form the process will take a lot of time, be hard to update, and requires a technical knowledge. With Advanced Forms the form is stored as a Content Item in the Advanced Forms Content Type. This allows you to leverage Orchard Core's content item infrastructure. Some of the main infrastructure this allows you to leverage is Workflows, Queries, and Content Item Lists. The Advanced Form Submissions are also stored in the Advanced Form Submissions Content Type allowing working copies and editing of old form submissions. I also stored the form layout in the submission so that if a form is changed the entry can be loaded without issue.

How the Content is Stored (I did an image because the JSON was long)

Validation of fields can be done in the form builder In the form builder you can add validation on the fields. This validation can be simple like required, max length, or advanced using Regex, JSONLogic or JavaScript Validation. The builder code creates the JS logic to test the entry.

Conditional Logic for field Use simple or advanced conditional logic in the form builder to conditionally show inputs.

Read Only Forms Show form submissions without the ability to edit.

Printable Forms Show form submissions as HTML only to allow quick print of your formatted form.

Calculated Fields In the form builder set an input that is calculated.

[themattkenney]

@sebastienros let me know if you are looking for something else explaining the differences or if you would like to connect on Skype to discuss it further.

[Skrypt]

I need to test your module it intrigues me. My first impression is that it looks like a come back to the old form builder that we had in 01. I think Flows module has been developped somehow to minimize complexity of that module. There are probably some UI enhancements that could be done here and there ; though I can't say much more before really testing it and looking at the code.

There's also always the options to leverage everything you done in there with the actual Forms module. Why should we need a second module? Was there a technical limitation that made you need to rebuild the module entirely?

Also, what are the rights we have with the Forms.io licences? If it's not open source we can't really add this to Orchard Core source code ; it would then be a Contrib module.

I don't like also the fact that you actually need to pay for Forms.io services for this. https://www.form.io/pricing

[sfmskywalker]

This form builder looks really good and no doubt easier to use than the current version we have.

However, I would argue that the current version is more advanced, because it allows you to add anything to the form, since it’s really just a FlowPart and allows arbitrary form submission processing via Workflows. Because the Forms module is built using other parts of Orchard, such as FlowPart, Widgets and Workflows, it’s highly customizable and extensible. But at the cost of simplified UX. Your module appears to be more user friendly and ready out of the box, but it also appears to be a bit monolithic (though I can’t say for sure as I haven’t digged into it). The Forms module will be simpler to setup in the end by means of default recipes that include the necessary content types and Workflows for common scenarios, and will be easily extensible.

Orchard has always been about providing building blocks to implement functionality that is easily tweaked, customized and extended, but at the cost of ease of use.

Your module looks quite attractive, but it also introduces a different way of setting up a form (drag and drop). In Orchard 1, we have something similar called Layouts, on top of which we implemented the Dynamic Forms module. So when I look at Advanced Forms (which imo should be renamed to Simpler Forms because it appears easier to use and not as extensible (yet?)) I am thinking that it should be an extension to setting up any layout. But we deliberately chose to use Flows for that, and Advanced Forms deviates from it.

I’m not saying that there’s not a place for it. I’m just wondering if it makes sense to have this replace the Forms module, or that it would be better as a gallery module.

Anyway, it looks impressive and something users would be eager to use. I would love to see it in action. Perhaps you’d be willing to demo it during one of the weekly meetings on a Tuesday?

[Skrypt]

The biggest issue I had so far with the current form module lies with it's lack of layout customization. Somehow having only the bootstrap grid is not enough for more complex form layouts. I tried making a 3 columns forms for example and I couldn't easily have all my forms elements grouped together. Maybe this is something that we could try to look at if it's possible by any means. I'm not sure if it's even working on other CMS's that uses a Flow module like we do. Maybe there is something missing or I missed something too.

https://getbootstrap.com/docs/4.0/components/forms/#horizontal-form

[Skrypt]

Here is what I found concerning form.io licencing : https://www.form.io/opensource

[sfmskywalker]

You mean the BSD-3 license is more restrictive than the one we use?

[themattkenney]

Form.io has many projects and their main product is BSD-3 the formio.js is MIT. https://github.com/formio/formio.js/blob/master/LICENSE.txt

@Skrypt there is no payment needed if you use the open source tools only. Right now I am only using the formio.js to build and display forms. I would not recommend using anything that costs for this community.

I will get to the other questions this morning also.

[Skrypt]

No it seems fine. You just don't have the right to reuse Form.io or contributors names and you need to keep the licence. And yes everything else is MIT.

[themattkenney]

@Skrypt You asked some good questions: There's also always the options to leverage everything you done in there with the actual Forms module. Comment: I agree. My plan was to build out the module then give the ability for a form to be selected as a Widget as part of a page or other content type. Build the form then leverage the form how you want and where they want. For example, an existing Advanced Form would be selected in a drop-down allowing you to place the created form anywhere a widget can be used. I may using "widget" wrong this might be a bag part, forgive me I am new to Orchard.

Why should we need a second module? Answer: The reason I created this as a module instead of a widget was in my experience end-users and admins want a place they view all form submissions and show a list of all form for end-users to fill out. By creating it as a separate module I see this as making it easier for admins and users to see everything entered. I would like to build a nice dashboard to go along with this for an admin to quickly see relevant stats on the forms submissions.

Was there a technical limitation that made you need to rebuild the module entirely? Answer: No real technical limitation it was about ease of use and future use of submissions. As looked how I would leverage the existing module and the amount of time it would take for a person to build a form, content type, and workflow for each form I started to rethink how this could be done.

[Skrypt]

I agree with @sfmskywalker though that the name should be more like Simpler Forms even if the UI looks more advanced. This is a form editor for "lambda users".

By the way I found an issue with the current form widgets where sometimes when I publish it will return me back no widgets at all. One thing also to consider is the fact that the actual Form module works with the Preview feature of Orchard Core. Can we also Preview the forms with your module?

Allright I'm downloading and testing it 😉

[themattkenney]

@sfmskywalker I could make a Tuesday meeting work if you give me a enough heads-up to schedule. That might help clear up any confusion.

You listed some items about the forms module that was not aware of. I learned what I could from the docs and playing with the system. When I called it "Advanced Forms" it was just as a placeholder if the community prefers "Simple Forms" or another name works for me. Also, your point that there might be room for both modules due to different uses cases is a good point.

Thank you for saying it looks impressive. I cannot take credit for that. I leveraged Orchard Core and Form.io to do all the heavy lifting. I was able to do this quickly due to the infastructure setup in Orchard Core. I am new to Orchard, Form.io, and .Net Core so it has been a great learning experience all around.

[themattkenney]

@Skrypt I put everything in my Repo to try and make it very easy to try out. Keep in mind it is not full. If you want to edit a form you will need to type in the URL. I want to override the edit url content items like was done with the autoroute for the view. Edit would be /AdvancedForms/Admin/Edit?ContentItemId={contentitemid}

Can we also Preview the forms with your module? This could be done in a couple ways. We could put a preview on the create page that changes as you build the form. I am not familiar with the preview module, but I assume this could be done. Does this leverage a working copy of the content Item?

[Skrypt]

Please make the user/password in your database admin/admin by default so that we can just click and run 😉

[themattkenney]

@Skrypt do you have a script I can run for this? For now, the password is P@ssword123

[Skrypt]

No, I don't have a script, the password is an encrypted string in the database so you need to hash a string and copy/paste it manually in the database if you want to change it.

[sebastienros]

I encourage you to release it on Nuget a write a blog post about it. Right now we don't intend to use a separate solution than the one we have and uses widgets.

[rinobatin]

@themattkenney do you mind sharing your repo again? i am also trying a similar approach and would like to learn from your solution.

[themattkenney]

@rinobatin sorry didn't see this come in. Yes we will release. We removed because as we added more custom modules it became difficult to keep our other module checks out. Let me see if we can get this done next week. A few others have asked too.

[kulandairaj]

@themattkenney Could you please share your repo... I am working on the same problem, I think your solution works better.

[themattkenney]

@themattkenney Could you please share your repo... I am working on the same problem, I think your solution works better.

@kulandairaj Sorry for the delay. We have been too busy to make time to pull out our custom code and have been putting this off until we upgrade to OC 1.0. If you need it sooner I would be happy to have a meeting to help get you started.

[jptissot]

As an alternative, we have a open source module here: https://github.com/StatCan/StatCan.OrchardCore/tree/master/src/Modules/StatCan.OrchardCore.VueForms This module supports SurveyJS. More docs and examples coming soon.

[kulandairaj]

@kulandairaj Sorry for the delay. We have been too busy to make time to pull out our custom code and have been putting this off until we upgrade to OC 1.0. If you need it sooner I would be happy to have a meeting to help get you started.

Thanks @themattkenney, I can wait for few weeks if you can get me otherwise It would be nice if you could help me to get started. Thanks.

[kulandairaj]

As an alternative, we have a open source module here: https://github.com/StatCan/StatCan.OrchardCore/tree/master/src/Modules/StatCan.OrchardCore.VueForms This module supports SurveyJS. More docs and examples coming soon.

Thanks @jptissot I will take a look at it.

[Luqis]

@themattkenney would appreciate any update on the project?

[themattkenney]

@Luqis We have been too busy with other commitments and have not gotten back to this module. I would recommend using the project

@jptissot recommended https://github.com/StatCan/StatCan.OrchardCore/tree/master/src/Modules/StatCan.OrchardCore.VueForms

I apologize I was not more help.