UPDATE: for unclear or how to use features/API, please take a look at the open source repo https://github.com/episerver/EPiServer.Forms.Samples and https://github.com/episerver/EPiServer.Forms.Demo . We will periodically push code to them.

These things are under investigation and we will try our best to solve them:

Update parent element for the form element was updated on validation. This would allow to apply CSS selectors to the form field.
DONE

Setting to load Form-own-jQuery or not

DONE

Setting to force-work-in-nonJS-mode
DONE

A way to customize Core processing controller
DONE. We use ServiceLocator, and you can replace it with the customized controller.
You can even replace the default path (/EPiServer.Forms/DataSubmit) to your own.

Public Events classes
DONE

Less anonymous object and dynamic object
Yes, DONE.

Slimmer package
DONE
Remove jQuery.js static file.
Remove wasted previous content asset (this is a bug)

Make the FormsViewEngine based on razor instead of WebFormViewEngine
DONE in v1.0.0. FormsWebFormViewEngine and FormsRazorViewEngine are on duty.

Episerver.Forms 1.0.0.9000 should have same dependency to Newtonsoft.Json with Episerver.Framework

DONE ==> Newtonsoft.Json (≥ 6.0.8 && < 9.0.0)  I fixed in 1.1.2.

Form should work with non-JS environment

Partly DONE in 1.0. AFORM-237. DONE in 1.1.2

Service Layer like IFormService and ISubmissionService for interacting with forms and submissions, like loading, saving, deleting, submitting a form and so on. FormDataManager can be used for getting sumissions, but still need to work with actual Forms
It will be IFormRepository and IFormDataRepository, thank you.
DONE: but will be improved.

There are no visual destinction between a success message or error message (this actually applies to the JS-driven version) too

DONE ==> will add CSS class for that message DOM element in version 1.0.1

Send more information to "Thank you page" (redirect after form submission completed) send those informations to the "Thank you page" via url parameters.
We created a bug to provide this feature.

DONE in 1.1.3

Make the RichTextElement display as a normal TextTeaserBlock (even it does not have #placeholder#)

DONE. It is filed as Feature AFORM-472, fixed in v2.0

Default stylesheet (EPiServerForms.css) should not be loaded

DONE. you have option for it, AFORM-526

The OOTB Captcha element build is not accessible, there's not alternative if you're blind.
We were still not sure about license-related to reCaptcha, so we cannot build it OOTB in the beginning. 3rd developer can build his own captcha element for Form.
DONE AFORM-382 This is opensourced in Samples project on github

The EPiServer.Forms.dll is not signed. Are you planning to, could you?
DONE.

settings to control how data is saved during multistep forms
Make a per-form setting is not hard, but it is not a common use case.
DONE: added the column of Finalized Submission flag in Form Data View.

Reuse the Data submitting business

We will also separate DataSubmit processing from the coreController="/EPiServer.Forms/DataSubmit", expose DataSubmitEngine API, so various Controllers can use it.
We use "HTTP POST to the same page that contains the form" / "let the controller that renders the block handle the submit logic"

DONE.

==============================

translation of validation messages
All messages in Forms are translatable, including validation messages. That's why we provide the EmbeddedLangFiles/EPiServer.Forms_EN.xml file in the package for you to override. Currently, the validation message is sticked to the Validator, not on the FormElement. AFORM-651

A way of selecting the regular expression from a defined set of regular expressions rather than typing would be better IMO. The dev should be setting these but you want the CMS editor to define these and RegEx would be too complicated.

Yes, it is. And we will fix this by make a tutorial to write validator. It is quite easy for Developer to make new Validator, inherit from RegularExpressionValidatorBase, and hardcode his regex.

Required fields should use HTML5 required attributes and you can give special styles or add some form of text to required fields.
====> We filed this as a bug. AFORM-381

I think there needs to be a type selection for the textbox for HTML5 so it supports the common types http://html5doctor.com/html5-forms-input-types/.

About HTML5 textbox, it is quite easy to implement that feature. But we cannot asure some weird case like: editor not choose url textbox, but using email validator, textbox rendering is different from IE to Chrome ... Moreover, browser validation process does not raise event for us to handle our Form processing.

It is quite easy to put it in Samples package, so you can take it and create it by your own.

Although there is a regex validation option textboxes should have a maxlength option that set's the html maxlength attribute and validates.

Once again, maxlength validator of browser does not raise event for us to handle our Form processing.

Email-validating fields should be type="email"
===>We didn't ship this OOTB, but I think this can easily be a 3rd-party-custom-element.

Is it possible to make the content in the NuGet-package zipped? Like the CMS, EPiServer.Packaging.UI and Shell modules.
Yes, it's possible, but you will not be able to use .cshtml for Razor template. We are investigating this issue. We have to stay unzipped at the moment.

Better developer documentation
Definitely! We are actively working story for "refactor API design, documentation and developer friendly support". A lot of technical guides will be published as blog posts. This is why this thread was born to gather feedback and know what is 3rd party developer focus point.

Please see the open source projects on github (in the beginning of this post). We write documentation point to those repos.

conditional fields
This was what we think about from the beginning, but adding them at the moment require more constraint (we need JavaScript for on-page-updating, nested ContentArea for conditional-panel)
I think with the improve JavaScript API, you can do it in your side.

Some suggestions:

-Service Layer like IFormService and ISubmissionService for interacting with forms and submissions, like loading, saving, deleting, submitting a form and so on. FormDataManager can be used for getting sumissions, but still need to work with actual Forms

-Better developer documentation - for example quite hard right now to figure out how to get form identity when using webhooks unless you decompile and find the special header being set. Also more info about validators and son on.

-Make the FormsViewEngine based on razor instead of WebFormViewEngine - don't know a single developer who uses webforms view, i would think razor should be the default

- conditional fields - right now we can make conditional steps based on previous steps which is awesome, but conditional fields would be a huge win for most of the projects we work on

- translation of validation messages - the form elements should have input fields for the validation messages

- settings to control how data is saved during multistep forms, right now when doing multistep it will store the form data as the user progresses through the steps, that is fine in certain scenarios but if the user abandons the form then we have incomplete data stored, a setting to switch this behavior per form would be awesome

The EPiServer.Forms.dll is not signed. Are you planning to, could you?

Regards Hans

Is it possible to make the content in the NuGet-package zipped? Like the CMS, EPiServer.Packaging.UI and Shell modules.

Regards Hans

The EPiServer.Forms.dll is not signed. Are you planning to, could you?

Yes, this is missing. We are in progress of moving to new build system.

Is it possible to make the content in the NuGet-package zipped? Like the CMS, EPiServer.Packaging.UI and Shell modules.

Yes, it's possible, but you will not be able to use .cshtml for Razor template. We are investigating this issue.

We have to stay unzipped at the moment.

-Service Layer like IFormService and ISubmissionService for interacting with forms and submissions, like loading, saving, deleting, submitting a form and so on. FormDataManager can be used for getting sumissions, but still need to work with actual Forms
It will be IFormRepository and IFormDataRepository, thank you.

Better developer documentation
Definitely! We are actively working story for "refactor API design, documentation and developer friendly support". A lot of technical guides will be published as blog posts. This is why this thread was born to gather feedback and know what is 3rd party developer focus point.

Make the FormsViewEngine based on razor instead of WebFormViewEngine
FormsWebFormViewEngine and FormsRazorViewEngine are on duty in upcoming release.

conditional fields
This was what we think about from the beginning, but adding them at the moment require more constraint (we need JavaScript for on-page-updating, nested ContentArea for conditional-panel)
I think with the improve JavaScript API, you can do it in your side.

translation of validation messages
All messages in Forms are translatable, including validation messages. That's why we provide the EmbeddedLangFiles/EPiServer.Forms_EN.xml file in the package for you to override.

Currently, the validation message is sticked to the Validator, not on the FormElement.

settings to control how data is saved during multistep forms
Make a per-form setting is not hard, but it is not a common use case.
We also added the column of Finalized Submission flag in Form Data View.

We will take this into consideration. We might improve FormAPI, so you can override this behavior.

Thank you.

translation of validation messages
All messages in Forms are translatable, including validation messages. That's why we provide the EmbeddedLangFiles/EPiServer.Forms_EN.xml file in the package for you to override.

Having experience with working with 50+ language sites I can tell you that language files are a complete nightmare to keep in sync and up to date, not to mention the time and therefor cost it takes to get the language files translated. Also it requires new deployments everytime something needs to be changed in a language file, which depending on the client is not something you just do because of processes, service windows and what have we. Editing a field in the editor is our prefered way so I hope you can support both ways of doing this.

Thank you Thomas, now I understand your situation.

Current validation process of Form is designed like this:

•  - A Validator (type) can be attached to Elements
•  - An element can be configured to execute a few Validators.

So I still don't think put the validation message on either Element or Validator is a good idea.

But I think current design is open enough for you to:

• grab a buildin validator (let say RequiredValidator), extend it to ThomasRequiredValidator
• make ThomasRequiredValidator try to read a Property (let say "RequiredValidationMessage") of any Element it is attached to.
• if no property with that name exist, fallback to the current message (read from lang.xml file)
• Modify ElementBlock, add (string)RequiredValidationMessage property to it, with CultureSpecific.

Putting that mechanism into Core is not ideal to me, because we have to assume property with name "RequiredValidationMessage" in the ElementBlock. And there will be a lot more type of Validator, from 3rd party developer that we cannot predict.

Hope this help your situation.

Lockevn.

Seen from an editor point of view the ideal solution would imho be like this, this applies to most use cases for me and the clients i work on.

User drags in input element ->

User chooses to edit input element ->

User enables Required Validator ->

The user can then fill in a validation message that should show when the Required Validator validation is triggered ->

Then the user enables Regular Expression Validator and the user can then enter a validation message for this validator

So basically a validation message for each validator on each element. As en example a validation message for a reg ex validator might not make sense for different fields, if it is validating zipcodes in one place and phonenumbers in some other place it should not be the same message, it should be the editors that enter this message to help the end users as much as possible.

Basically like the normal MVC validation works.

The most common requests I get from customers using xforms are

-file upload

-default values (like automatically fill in email etc)

Yes, I understand your use case.

Currently, we use exactly the same pattern for provide a Model (a contract) to a link between Element and Validator.

Take RegularExpressionValidator as an example, you can see that:

• drag Text into Form as ZipCode.
• tick to enable RegularExpressionValidator
• click the small Change button (on the right), set the regex. This is the Model for the link between RegularExpressionValidator-ZipCode (of type Text). It goes along with the Element. (actually, the element property hold the string value of {ValidatorType1FullName:abc;ValidatorType2FullName:xyz}

I admit that my solution above is not perfect because of

• extra work to add properties to element,
• and especial in UX (because the property for validation message is not inline with the enabled validator),

but it should work with your requirement of "the form elements should have input fields for the validation messages"

Given an Element, adding a Culture Specific textbox to provide multi-lingual validation messages for each enabled validator is quite a complex feature and cannot be implemented easily. We will investigate this. Thank you.

Hi Daniel,

File upload
This is built-in feature in the first beta release of Form.

Default values
In simplest way, now you have predefined value for Element.
Next story for us will be incoporating Form with Marketing Automation. If we will your email, fullname, zipcode, address, ... (provide by the MA provider), we will autofill to Element (if mapped) as default value.

Hi,

When do you think you will push another release to nuget? Would love to have a look at the version that is a bit closer to the final one.

Many thanks,

Maciej

Yup I noticed the file upload. That will be great. 

Possible to set default values dynamically from server side and not just a static value?

@Daniel: yes, please use the new FileUploadElement. It store uploaded assets to its own Media folder. You can also view uploaded asset in View Submission Data panel

I don't get your point with setting default values on server side. Please elaborate more detail. Thank you.

@Maciej: We expect a preview package will be sent to EMVP board this week, and a public release might be next week.

I have some feedback based upon using this and having created a form module plugin for Sitecore and Umbraco. It's a good step in the right direction tho, maybe some of these you are expecting us to do but a lot of this I think should be out the box.

• This style of Captcha seems really old school to me. The new reCaptcha with the "I'm not a robot" as used by this very forum would be a lot better IMO as it would be one of the first things I'd change/ 
• I think there needs to be a type selection for the textbox for HTML5 so it supports the common types http://html5doctor.com/html5-forms-input-types/.
• Although there is a regex validation option textboxes should have a maxlength option that set's the html maxlength attribute and validates. Regex would be too complex for standard CMS editors.
• A way of selecting the regular expression from a defined set of regular expressions rather than typing would be better IMO. The dev should be setting these but you want the CMS editor to define these and RegEx would be too complicated.

I also agree on points like dynamically filled in default values. I think it would be nice to make modules code first that can source their value from whatever code we create and have a name attribute just like the page/block models have. These could then be selected from a dropdown on each field and would load it's items.

At the moment hidden predefined values are something I'd really have loved to have in my current XForm used build however they would need to come from dynamic values.

Hi @ Scott Reed 

• This style of OOTB Captcha seems really old school

Yes, me too. As I mentionted above, we really want to implement reCaptcha but we are currently not sure about its licensing. I think about release it as a opensource Samples project.

• I think there needs to be a type selection for the textbox for HTML5 so it supports the common types http://html5doctor.com/html5-forms-input-types/.

About HTML5 textbox, it is quite easy to implement that feature. But we cannot asure some weird case like: editor not choose url textbox, but using email validator, textbox rendering is different from IE to Chrome ... Moreover, browser validation process does not raise event for us to handle our Form processing.

It is quite easy to put it in Samples package, so you can take it and create it by your own.

• Although there is a regex validation option textboxes should have a maxlength option that set's the html maxlength attribute and validates.

Once again, maxlength validator of browser does not raise event for us to handle our Form processing.

• A way of selecting the regular expression from a defined set of regular expressions rather than typing would be better IMO. The dev should be setting these but you want the CMS editor to define these and RegEx would be too complicated.

Yes, it is. And we will fix this by make a tutorial to write validator. It is quite easy for Developer to make new Validator, inherit from RegularExpressionValidatorBase, and hardcode his regex.

• dynamically filled in default values.

Form will have API for this in next release (when we finish story to co-operate with our Marketing Automation)

• At the moment hidden predefined values are something I'd really have loved to have in my current XForm used build however they would need to come from dynamic values.

Could you please, elaborate some practical usercase of where the dynamic values should come from? We can change it. Default value now is come from Editor's value, but definetely it can take from an abstract source.

Hi sorry for the late response, a few more points.

• HTML5 points - When I've been testing the forms out the validation only triggers on the button submit. If you are checking the fields at the point of button submit what events are you needing for the use of maxlength and HTML5 types? I'm not really bothered how the browser implements it's HTML5 validation as that will be the native expereince to people using that browser, if the validation in triggering on the submit can't you just check values? I've used MVC jQuery unobtrusive validation and also custom client side validation fine with HTML5 attributes before without issues, what events are you using?
• When it comes to the hidden field I'm wanting the same dynamic pre loading that any other field would have. E.g. I want to be able to define via code somewhere a way that the fields can pre load some data. E.g. Say it was a profile update form I'd want each of the fields pro-populated with the data from the membership system on load. I don't want to have to write custom fields only be able to define a source on each element where the data should come from. The reason I want this on hidden fields is just so I can support pushing values through to be either save or submitted to a 3rd party via the Marketing Automation modules (when they are working). XForms was hard to modify post submit to add fragments, if Forms is going to be easy to add extra data post submit this may be a better way.

A few more points after using the new version 1 release.

• I see you have injectFormOwnJQuery inside the forms config but I really don't want there to be a need for the whole jQuery library to be loaded for forms. Are you using the standard mvc jquery validation or can this be removed (aplogies I've not hed time to in depth look at your scripts)
• I think your viewmode scripts should be minified as default with an optional unminifed version provided, alternatively if they could be moved to be registered via ScriptResource instead so they can be minified via the debug=false attribute.

Do you have any update on the compatibility with the Marketeers plugins? We use XForms with Marketo Integration and could not move without support? Also the EpiServer Forms docs still say Beta, is this going to be updated soon for API usage and other mentioned features?

Hi,

How do I create a new FormContainerBlock type?

Im currently inheriting the FormContainerBlock for the blocktype and the FormContainerBlockController for the controller, but the logic in the FormContainerBlockController depends on the GetType method of the object returning the type FormContainerBlock?

One more thing:
From what I can see there is no javascript event raised if the server returns an error. The only thing happening now is:

e.preventDefault();
//console.error(typeOfFailure, status, xhr.responseText);
showFormMessage(workingFormInfo, typeOfFailure + " " + xhr.status + ": " + status);

I think you should raise an event aswell.

/Peter

- Episerver.Forms 1.0.0.9000 seems to have a lower max-version dependency to Newtonsoft.Json than Episerver.Framework: 
'EPiServer.Forms 1.0.0.9000 constraint: Newtonsoft.Json (≥ 6.0.0 && < 8.0.0)',
'EPiServer.Framework 9.6.1 constraint: Newtonsoft.Json (≥ 6.0.8 && < 9.0.0)'

==> I fixed this, will be in Forms 1.0.1.

From what I can see there is no javascript event raised if the server returns an error. The only thing happening now is:

I think you should raise an event aswell.

===> Though this is the unexpected error, we filed BUG AFORM-432: JS Event will be raised in v1.0.1, thanks.

2: There are no visual destinction between a success message or error message (this actually applies to the JS-driven version) too

==> Bug AFORM-431, will add CSS class for that message DOM element. Though in case of validation fail, CSS class ValidationFail is added to the <form>, and Form__Warning__Message is added to <span class="Form_Status_Message">

The form blocks do support globalization but I found a restriction that is breaking.

In "Multiple och single choice" elements the Choice and Value can only be defined in the master language.

I like the possibility to conditionally show a step based on the value of another field.

Unfortunately fields in the conditional step cannot be set to be required. 

@René Voigt   we file a bug AFORM-402 for issue "Multiple och single choice" elements the Choice and Value can only be defined in the master language.

Thank you.

In the beginning, we feel it will not make sense if fields in the conditional step is required. But we will look at it again to see ValidationEngine can ignore a kind of conditional-required field.

Is it possible to use "Display options" to render episerver form element?

Regards Emil

Dear @Emil: FormContainerBlock and FormElement are just a normal Episerver Block. So basically, they have all ability of Block.

Please be informed that FormElement does not support out of the box DisplayOptions = Full Wide Narrow like what you see in AlloyMVC, because we cannot bound Form to BootstrapCSS (AlloyMVC did).

Hi, 

In Alloy MVC displayOptions for FormElements works only in edit mode.

It happens because  FormsElements rendered differently in edit mode (PropertyFor(ElementsArea) and view mode (RenderFormElements())

So it seems that there is no standard way (ContentAreaRenderer, TemplateCoordinator) to use DisplayOptions set for a FormElement.

The only workaround I have found is to get and use display option in a custom view for a form element type

using code like this 

var form = ContentAssetHelper.GetOwner(formElement.ContentLink)

var displayOption = form.ElementsArea.FirstOrDefault(ai => ai.ContentLink == FormElement.ContentLink).DisplayOption

May be there is better solution?

@Scott Reed   

requiredResources.RequireScript(
ModuleHelper.GetWebResourceUrl(this.GetType(), "EPiServer.Forms.ClientResources.ViewMode.jquery-1.7.2.min.js"),
"Forms.jquery.js", new List<string> { "EPiServerForms_saveOriginalJQuery.js" }).AtHeader();
}

Hi,

Is it possible to extend the FormContainerBlock to add new properties?
The block itself can currently be extended, but not the controller.
Currently the FormContainerBlockController depends on the GetType method of the object returning the type FormContainerBlockController(when requiring resources)?

/Peter

Hi,

Is there any plan to support the forms in WebForms projects?

When using a webhook the form data is being sent for each step. Is this by design?

@René Voigt   webhook sent data for each step is by designed (because someone might need data of each and every FormStep submission).

You can simply inherit from CallWebHookAfterSubmissionActor and return false for public override bool PerformOnEveryStepSubmission property.

Or you could just add a new property in WebHookActorModel ;)

Like:

[Display(Order=20), DisplayName("Call webhook for each step")]
public virtual bool CallWebhookForEachStep { get; set; }

One minor but irritating thing is that all block or page fields called "Description" are now translated to "Tooltip".

I found the reason in the EPiServer.Forms_EN.xml:

<description>
    <caption>Tooltip</caption>
    <help>Displays as a tooltip or help text of an element.</help>
</description>

The solution for now is overriding this in a separate xml-file but of course this also changes the form's Tooltip to Description.

<languages>
  <language name="English" id="en">
    <contenttypes>
      <icontentdata>
        <properties>
          <description>
            <caption>Description</caption>
            <help></help>
          </description>
        </properties>
      </icontentdata>
    </contenttypes>
  </language>
</languages>

@René Yes it is a bug, thank you. Will fix in v1.1.1

1) I am trying to read the submitted data when using "Display page after submission". Currently only FormGuid is sent to the page, could you also add SubmissionId and Language?

I have tried overriding the DataSubmitController to "patch" in the missing information but it feels like overkill.

2) When overriding DataSubmitController i can successfully override Submit but the form fails to call GetFormInitScript with a 404.

Can you provide an example of how the routing needs to be setup so that alla actions work for an overriden submit controller?

Hi

Love the new Forms :)

I have an idea for improvment though. Many xforms we use have a cap for how many can submit the form (through custom implementation). E.g. an event or course registration. 

Any chance you will implement support for this in Episerver Forms?

Hi

I am trying to implement a customised text box with validation as part of the EPiServer Forms. I have managed to create this, using EPIServer's validation (Email & Required options) to enchance this, but when I type in a invalid email address, the below error mesage pops up.

Validation failed on "CustomTextBoxBlock" field: Enter a valid email address.

What I initally want to do is hide away the "on CustomTextBoxBlock" field" part of this validation as this is not what users should see. I have looked into the EPiServer.Forms_EN.xml, removed the <validationfailformat>Validation failed</validationfailformat> and

 <!--<episerver.forms.implementation.validation.emailvalidator>
                        <displayname>Email</displayname>
                        <message>Enter a valid email address.</message>
                    </episerver.forms.implementation.validation.emailvalidator>-->.

I have also tried to create my own custom validator to try solve this, Yet the full error message stipulated above still displays on the page after a invalid email address is entered. Can someone give me some advice as to how this can be fixed please?

Thanks

I am looking at latest EPiServer Forms version and there is no Date field. 

Probably Date, DateTime and Time pickers would be very useful as default fields. Any plans for it?

Jakob Jaber , it is possible with EPiServer Forms to handle how many can submit the form. Just hook into FormsSubmitting event and check if count exceeded. If exceeded cancel submission with message. 

Here are docs on forms event handling (on the bottom): http://world.episerver.com/add-ons/episerver-forms/handling-events-for-episerver-forms/

And you can cancel submission like this:

eventArgs.CancelAction = true;
eventArgs.CancelReason = "Number of submissions exceeded";

@Jakob Jaber:  Please see  Maris Krivtezs (Thank you Maris!) solution to count submission in serverside Event.

@Maris Krivtezs: The DateTime (Date, Time, DateTime) element is included in the Forms Samples. We will open source it in close future.

@Anil Patel: In the Form Samples, you will see all thing needed to implement such a complex Element like DateTimeElementBlock. Please wait for the open source, or ... unbox our implementation in the package  ;)

@René Voigt 

Is there any plans to make editor experience better with the forms inside rich text?
currenly the situation is this

There is no way for editor to edit or find out what form this is. THe only way to do that is look into html for id. 
Is there any plans to improve this? If not, is possible to customize this somehow?

Regards,

Hi Giedrius, honestly, I don't have plan for that in Forms backlog (where I responsible for). I'm sorry about that.

I think you should post it as a separated question to other area (in CMS or EditView UI, I think) to get better answer, because what you ask is how to customized the Block-representation in general ( not only Forms) in the TinyMCE editor. I will actively make it happen if possible. Thank you.

Hi,

I have a scenario where i wanted the ElementsArea which is of type ContentArea, to have a two column layout.

Is it possible to customized the ElementsArea rendering in tabular style?

I know we can control rendering of ContentArea using DisplayTemplate folder and having a ContentArea.cshtml file.

Thanks in advance for the response.

@brijesh.kumargupta   We have not build 2 column layout out of the box for Form Element, because we cannot stick with Bootstrap or any specific CSS framework.

• FormContainer contains FormElements in (currently) ONE ContentArea.
• FormContainer (which is a normal block) must be drop into one ContentArea.

So I think you should modify the builtin template to get what you want.

The Form.JS in ViewMode only add/remove CSS class .hide to show/hide the step.

Modifty the EPiServerForm.less (included in the package) is recommended, because we know that partner always need to modify it to match site's look and feel, so it is only contain classnames and very basic styling.

UPDATE: We open source the EPiServer Forms Samples project (contain the complex DateTimeElement) at repo https://github.com/episerver/EPiServer.Forms.Samples and https://github.com/episerver/EPiServer.Forms.Demo . We will periodically push code to them.

Thanks THACH!

Hi THACH,

I am not able to add emails to 'Send email after submission'.

I have installed Episerver CMS 9.7.1 and Episerver.Forms 1.0.0.9000. I created a Form succsessfully, but I am not able to add emails to the settings section 'Send email after submission'. This section is not displayed.

The error I receive in the browser is: "Unable to load /EPiServer/shell/Stores/metadata/EPiServer.Forms.Implementation.Actors.EmailTemplateActorModel?dojo.preventCache=1457619819386 status: 500"

"<html>
<head>
<meta name="robots" content="noindex,nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>
Siden kunne ikke lastes inn
</title>
<style type="text/css">
body{font-size:65%;color:black;background-color:White;}
form{font-size:1.2em;}
body,table{font-family:Verdana;font-weight:normal;}
h1{color: gray;font-size: 1.4em;font-family:Verdana;margin:0.5em 0 0 0;}
h2{font-size:1.2em;font-weight:bold;}
h3{display: inline;font-weight:bold;font-size: 1.0em;}
.ExceptionInfo{margin:0.6em 0 0.6em 0.2em;}
.StackTrace{font-family:"Lucida Console";}
th{font-size: 0.8em;text-align:left;white-space: nowrap;}
td{font-size: 0.7em;}
.DetailedHeader{font-weight:bold;border: 1px solid black;padding:4px;text-align:center;}
.ReportForm{font-family:Verdana;font-weight:normal;font-size: 1.0em;color:black;}

.SubmitButton{font-family:Verdana;font-weight:normal;font-size: 1.0em;color:black;}
</style>
<script type="text/javascript">
<!--
function onNavigate(newPageLink)
{
return -1;
}

function onCommand(newCommand)
{
return -1;
}
// -->
</script>
</head><body>
<h1 class="Title">
Siden kunne ikke lastes inn

</h1><p style="width:40em;">Koblingen som du angav, virker ikke. Dette kan skyldes manglende vedlikehold eller at det er en feil med koblingen.
</p><h2 class="DetailedHeader">Detailed error information (authorized by permissions to functions)</h2><table border="0">
<tr>
<th>Error occured</th><td>10.03.2016 11:47:23</td>
</tr><tr>
<th>User IP</th><td>nn.nnn.nnn.nnn</td>
</tr><tr>
<th>User Agent</th><td>Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36</td>
</tr><tr>
<th>Url</th><td>http://xxx003:80/EPiServer/shell/Stores/metadata/EPiServer.Forms.Implementation.Actors.EmailTemplateActorModel?dojo.preventCache=1457606842697</td>
</tr><tr>
<th>Referer</th><td><a href="http://xxx003/EPiServer/Cms/">http://xxx003/EPiServer/Cms/</a></td>
</tr>
</table><div class="ExceptionInfo">
<h3>Exception details: </h3> ArgumentException: Value cannot be null or empty.
Parameter name: controllerName
</div><div class="ExceptionInfo">
<h2>Stack trace:</h2><div><code><pre class="StackTrace">[ArgumentException: Value cannot be null or empty.
Parameter name: controllerName] at System.Web.Mvc.HandleErrorInfo..ctor(Exception exception, String controllerName, String actionName)
at System.Web.Mvc.HandleErrorAttribute.OnException(ExceptionContext filterContext)
at Elmah.Mvc.HandleErrorAttribute.OnException(ExceptionContext context)
at System.Web.Mvc.ControllerActionInvoker.InvokeExceptionFilters(ControllerContext controllerContext, IList`1 filters, Exception exception)
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass21.<BeginInvokeAction>b__1e(IAsyncResult asyncResult)
at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult)
at EPiServer.Shell.Services.Rest.RestControllerBase.EndExecute(IAsyncResult asyncResult)
at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) </pre></code></div>
</div></body></html>"

----

In EpiServerErrors.log we get this error:

2016-03-10 11:52:29,128 [287] ERROR EPiServer.Global: 1.2.5 Unhandled exception in ASP.NETSystem.ArgumentException: Value cannot be null or empty.Parameter name: controllerName   at System.Web.Mvc.HandleErrorInfo..ctor(Exception exception, String controllerName, String actionName)   at System.Web.Mvc.HandleErrorAttribute.OnException(ExceptionContext filterContext)   at Elmah.Mvc.HandleErrorAttribute.OnException(ExceptionContext context)   at System.Web.Mvc.ControllerActionInvoker.InvokeExceptionFilters(ControllerContext controllerContext, IList`1 filters, Exception exception)   at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass21.<BeginInvokeAction>b__1e(IAsyncResult asyncResult)   at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult)   at EPiServer.Shell.Services.Rest.RestControllerBase.EndExecute(IAsyncResult asyncResult)   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)System.ArgumentException: Value cannot be null or empty.Parameter name: controllerName   at System.Web.Mvc.HandleErrorInfo..ctor(Exception exception, String controllerName, String actionName)   at System.Web.Mvc.HandleErrorAttribute.OnException(ExceptionContext filterContext)   at Elmah.Mvc.HandleErrorAttribute.OnException(ExceptionContext context)   at System.Web.Mvc.ControllerActionInvoker.InvokeExceptionFilters(ControllerContext controllerContext, IList`1 filters, Exception exception)   at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass21.<BeginInvokeAction>b__1e(IAsyncResult asyncResult)   at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult)   at EPiServer.Shell.Services.Rest.RestControllerBase.EndExecute(IAsyncResult asyncResult)   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Could you please, try the latest package 1.1.2?

if it still not work, please file a Support Case. I don't think I can provide good support in this Forum context. We will need more (code, solution, site, ...) from you to investigate the issue, because we cannot reproduce it on our environment.

Hi THACH,

I've filed a support case, but I also digged a bit deeper into this myself.

First of all I upgraded Episerver.Forms to version 1.1.2.9000.

Then I got a warning in EventViewer saying:
Exception message: Resource key exists both as a leaf and as a parent. Key: /contenttypes/textboxelementblock/properties/description/caption

Deleting the "old" culturespecific EPiServer.Forms_NB.xml and EPiServer.Forms_NN.xml files, and then commenting out <blockbase><properties> section in EPiServer.Forms_EN.xml file gave me an exception: 'EPiServer.Shell.ObjectEditing.ExtendedMetadata' does not contain a definition for 'OwnerContent'
at CallSite.Target(Closure , CallSite , Object ). Which in turn led me to the extension we have for hiding MainIntro EditorDescriptor for ArticleSubPage. See method below.

/// <summary>
/// Hide MainIntro
/// Valid for: ArticleSubPage
/// </summary>
[EditorDescriptorRegistration(TargetType = typeof(XhtmlString))]
public class HideMainIntroEditorDescriptor : EditorDescriptor
{
public override void ModifyMetadata(
ExtendedMetadata metadata,
IEnumerable<Attribute> attributes)
{
base.ModifyMetadata(metadata, attributes);
dynamic mayQuack = metadata;
var ownerContent = mayQuack.OwnerContent;

if (ownerContent is ArticleSubPage
&& metadata.PropertyName == "MainIntro")
{
metadata.ShowForEdit = false;
}
}
}

Commenting out this method allowed the settings section 'Send email after submission' to be displayed.But how can I achieve having both the extension valid and the settings section 'Send email after submission' displayed?

regards,

Atle

Hi atlef

We try a small hack here, with the same technique you use to hide MainIntro, and it is OK.

We (Form team) don't use any Property name "MainIntro", so coincident naming is not a problem here.

/// <summary>
/// EditorDescriptor for hiding Category property in Forms Elements.
/// See http://joelabrahamsson.com/hiding-episervers-standard-category-property/
/// </summary>
[EditorDescriptorRegistration(TargetType = typeof(CategoryList))]
public class HideCategoryEditorDescriptor : EditorDescriptor
{
public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
{
base.ModifyMetadata(metadata, attributes);

var contentMetadata = (ContentDataMetadata)metadata;
var ownerContent = contentMetadata.OwnerContent;
if (ownerContent is ElementBlockBase && metadata.PropertyName == "icategorizable_category")
{
metadata.ShowForEdit = false;
}
}
}

I will co-operate with the Support Team to investigate your case. Please gave the SupportCase your project and source so we can detect the root problem. Thank you.

Hi Thach,
Removing unprintable characters during the export (.csv) will be appreciated.
It seems the <ENTER> in a rich text box breaks the format in Excel with my current version (1.0.0.9000).

Regards

P.

Dear Pierre, Thank you for your feedback.

We will check and file a bug (AFORM-520) for it.

Hi Thach

Is it possible to add a "section heading" element to the form?

Sometimes we want to divide larger forms into sections by headings (just plain strings). I know I can make the multi step thing, but for this scenario I would like to add a element just containing a heading. I don't want this element to be included when saving the data, or in the summary, either. Just use it as a sepearator heading in the form layout to divide different parts of the form.

Regards
Eric

Hi Eric Bruno ,

From the 2.0 (in progress), we will make the RichTextElement display as a normal TextTeaserBlock (even it does not have #placeholder#)

It is filed as Feature AFORM-472, fixed, but unluckily not tested, so it is not in version 1.1.4 (has just release yesterday).

Please wait for next release. Thanks for your patience.

Hi THACH!
Have been implementing Forms in a project and while Episerver Forms has the potential to be the next big thing, there are some front-end related matters that I think needs to be sorted out first.

Here it goes:

• You should abstract the dependency to jQuery. Not every project is using jQuery, and being forced to load an unwanted resource just to use Forms is not ok. Quickly browsing through the unminified source there’s a lot that could have been resolved in simply using vanilla JS.
• Default stylesheet (EPiServerForms.css) should not be loaded. I do not need your styles to interfere with mine. And force developers to override styles is just bad manners and creates bloat. At least give me the option to disable this.
• You should make selectors configurable. Hard coded string literals is not good and disables flexibility within implementation.
• The init script rendered by `EPiServerForms_prerequisite.js` should be loaded in another way. Adding the whole shebang to HEAD exposing UploadExtensionBlackList and Messages etc. can impose a security risk and introduces bloat (again).

Basically: I don’t think that Episerver Forms should interfere in front-end implementation details by loading unwanted styles and Javascript and forcing new conventions in a project.

The concept behind Forms is excellent, and I’ve been reading this thread a couple of times – thank you for your commitment and quick release cycle!

Regards
Kim

Hi Kim, thanks for your kind words.

I agree with your that Forms now have some unwanted issue with FrontEnd side. From the beginning, I want it to be Forms.Core and Forms.UI. You can depend on what you want, and in your case, remove the UI if you don't like it. But in the end, we have to put in one package

• so it can work out of the box (OOTB) right when people install to a running site (let say AlloyMVC template)
• with acceptable UI and buitin elements
• developer has freedom to customize (sorry, with some conventions)

That make you see it first, feel the concept, then feedback, we change, you enjoy it.

I cannot flip the card, change the decision immediately, so why I'm actively here to give you the most freedom in customizing Forms. Gimme more ;)

@Andrey Gushchin  How can I use your workaround ?

@Gayathri

For each form element we created custom view and registered it in TemplateCoordinator, for example:

viewTemplateModelRegistrator.Add(typeof(TextboxElementBlock), new TemplateModel
{
Name = "TextboxElementBlockCustom",
AvailableWithoutTag = true,
Inherit = false,
Default = true,
Path = BlockPath("TextboxElementBlock/TextboxElementBlock.cshtml")
});

In the view we get css glass for TextboxElementBlock

@model EPiServer.Forms.Implementation.Elements.TextboxElementBlock

var owner = AssetsHelper.GetAssetOwner(Model.Content.ContentLink);
var item = (owner as FormContainerBlock)?.ElementsArea?.Items.FirstOrDefault(x => x.ContentLink.Equals(Model.Content.ContentLink));
if (item != null && item.DisplayOption != null)
{
...
}

Depending on item.DisplayOption you can use corresponding css class to render a textbox.

Hi,

We are experiencing problems with the rich text element block. It seems like it only displays its content in edit mode, not on the actual site.

It is easily reproducable in Alloy site:

• Add a rich text element block to a form
• Add for instance a picture in it
• Publish it and form
• Add the form to a page
• The form seems fine in edit mode
• Now, view on page and the rich text element is not visible

@Hovard Berg  I think it's already reported. Check this bug: http://world.episerver.com/support/Bug-list/bug/AFORM-472

Sorry, I did not see that ticket, this is the same issue.

Thanks 

Thanks Pierre ;)

Hovard Berg it will be in Forms 2.0 (under testing, next release)

I created an element for displaying an image in the middle of the form and set the ContentReference property in model to required. When creating the element inside form container block, the required attribute prevents the creation of the element and takes you to the element edit view to complete it. However, even if you fill the required properties the "Create" and "Cancel" button don't appear on the upper right area of the view.

@THACH Lockevn

Fields validation works one by one now.

I think it will be better for user to see all errors, which he must fix.

And if form has 2 required fields and you fill first field, you see required message for second field. Then clean first field and fill second field. You will see required message for both fields, although the second field is filled.

@Pasi Hulkko: I don't understand your issue 100%. For example of how to make a Element, please refer to our opensourced sample package here github.com/episerver/EPiServer.Forms.Samples

@Yauheni Butsko: Hmm, thanks for your report. I will file them as bugs. AFORM-597

@THACH Lockevn

Does this image explain the issue? http://imgur.com/tbcKfSK

If the element has required attribute on one of the properties, you can't put it on the form.

Dear @Pasi: I filed a bug AFORM-605 for further investigation. Thank you.

Hi Thach!

Anything new regarding required fields in conditional steps?

In almost all of our forms we do use conditional steps depending on what the user answers.

Not being able to set fields to required in a conditional step is real deal breaker.

Hi René Voigt , cos it hurts you too much (isn't it??), I will file a bug with higher priority for this, though it would raise a lot of weird scenario.

Step1: Text11, Text12

Step2 (only display if Text11=Rene): Text21, T22 (required)

Step3: Submit

What is the condition to ignore T22 do you want?

 - when Step2: is not display? (it will not easy, because they can fill Text11=Rene, go to Step2, fill something, back to Step1, change Text11 = Thach, Step2 will not display again)

 - when Step2 has no value? What is definition of "no value"

Feel free to contact me at ngocthach.nguyen@episerver email  (subject AFORM-606). Thank you.

I am seeing an issue with Rich Text (with placeholders). I appears this feature is still in the works but when you add Rich Text to a form you have an option for "Insert Placeholder". This option currently doesn't bring any results back. Is this still to be implemented or is this a bug? 

http://imgur.com/fC0YMIi

Thanks!

@René Voigt  Anything new regarding required fields in conditional steps?

=====> fixed, please wait Forms 2.1. Thanks for your help and cooperation.

@Matt S  Rich Text (with placeholders) we released a working, not half ass feature. You should put RichText in later step in a multiple step form. Its intention is show elements' values in previous step. Please watch this video for how to use it https://youtu.be/nCgU9EY5j5M?t=92

Thanks THACH Lockenv, this makes sense!

Thanks Thach! Do you know when we can expect Forms 2.1?

/René

This weekly release, I guess.

Good day! I was investigating why hidden visitor profiling returns no IP data add-ons post and have come to a conclusion that the reason is freegeoip being down.

When a form with geoprofiling is submitted, EPiServer.Forms.Implementation.VisitorData.GeoVisitorDataSource.SetData(...) calls http://freegeoip.net service which is currently refuses connections.
Presumably, it causes the exception, the functionality is skipped and, eventually, the geodata is empty.
The IP is cleared too.

Since the service's url is hardcoded it would be usefull to introduce a kind of gentle degradation to save IP data at least.
It would be perfect to have a possibility to configure a service address and response template.
Thanx!

Is there anyway to move forms being created page level under Forms assets tab instead of keeping both forms and blocks under the block tab "For this page"? This confuses some users since not all forms are in one place. 

Also our users were curious if we could customize validation messages as well as add default regex patterns for things like email, phone numbers. Error message would then be "Phone number must be entered as XXX-XXX-XXXX"

Is there a way to get EPiServer Forms to work with IE7, IE8 and IE9.  When submitting the form I get the following javascript error.

'FormData' is undefined.

I am using the latest version (2.0.0.2), and would expect either these browsers are supported, or at least this is documented.

I also have a question around validation messages, how can an editor set the error message for the required field when they are creating a form.

Regards

Andy

@Andrew: IE 7 8 9 are left behind from CMS9 (and of course, Forms team cannot spend resource to support them, sorry). I sugggest you use Forms in non-JS mode (turn it on in Forms.config).

@Matt S : Is there anyway to move forms being created page level under Forms assets tab instead of keeping both forms and blocks under the block tab "For this page"? This confuses some users since not all forms are in one place.

I don't really understand your question. If you use Forms gadget, form will be created under EPiServer Forms asset folder.
If you create arbitrary block of type Form Container, you can put them anywhere, because form is a normal block.
Form elements are placed under the content local folder "For this form"/"For this block"

@Igor Cherkovskiy  

@Matt S and Andrew Markham 

• Also our users were curious if we could customize validation messages as well as add default regex patterns for things like email, phone numbers. Error message would then be "Phone number must be entered as XXX-XXX-XXXX"

• I also have a question around validation messages, how can an editor set the error message for the required field when they are creating a form

Because I get a few requests for customizing the validation message, I will create a story AFORM-651 for it. But I think it will raise a breaking change. Please don't expect it will come out soon, sorry for this.

Hi Thach,

I have tested the Form with the Javascript functionality turned off and this now works.  The problem as I see it is that instead of using javascript the enhance the functionality of the form, instead the javascript functionality is completly turned off, so you are stuck in this mode for more modern browsers.

I understand your point about the extra effort in developing for these older browsers, and it is valid from an editors perspective, but for site visitors this functionality shouldn't just break.  The link you provided http://world.episerver.com/documentation/Items/System-Requirements/system-requirements---episerver/ states that IE10+ is a requirement for editing, but not for viewing the site.

I think it is very important that when modules like this are produced, EPiServer should clearly state which browsers are supported.

Thanks

Andy

Thanks for info, Thach!

Hey Thach, I couldn't find the bug about one-by-one validation so I could upvote it. Did you create that issue yet? (I have the same issue that a client has raised with me).

Thanks!

@Dan It is AFORM-597, and it is public. I don't know why it does not appear on World. I raised it to Major.

Hi @Andrew Markham,

I tried do best thing I can do, but I'm sorry that I upset you, Forms cannot support IE 7 8 9. Forms is implemented with HTML5 in mind from the beginning. Revise that principal bring us (and you) more trouble than benefit. We all want better experience, we need some processing juice for it.

I file some bugs for parts of Forms JS that can be replaced with jQuery, but I cannot promise any plan or close future for it, it has to be go through triage-board.

Is there a way to get EPiServer Forms to work with IE7, IE8 and IE9 ==> Yes, there is a way, scan, and rewrite our Forms JS, replace HTML5 parts with older JS API.
At least this is documented ==> We update the document here and here.

Hi Thach,

Thanks for updating the documentation, and raising the bugs.

Here are a few feature requests:

• Stick to the use of RequiredResources for all Javascripts and CSS, no inline script or link tags in form element views.
• Put all required resources in the "Footer" area, since jQuery is render-blocking.
• Upgrade jQuery to the latest v1 release, 1.12.3
• Add an abstraction around EPiServerFormsSection.Instance, something like IEPiServerFormsConfig, and register it in the DI container.
• Add a config option to place the element's validation-span, before or after the label/input combo, in the element views, making for greater flexibility (and less need for customization) of element views.

I have experimented with ActionFilters, and moving all the scripts to the "Footer" area works fine, but I'd rather not have any action filters at all.

Hi, do you have any suggestions regarding this issue?

http://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2016/5/episerver.forms-export-with-sessionstatesqlserver/

@Stephan:

• Stick to the use of RequiredResources for all Javascripts and CSS, no inline script or link tags in form element views.
• Put all required resources in the "Footer" area, since jQuery is render-blocking.

==> We will revisit it in Performance review. There is a lot of scenarios Forms need to support (loading extra scripts, extra modules depend on Forms JS, work with existed jQuery , different version of existed jQuery ...) that why we stick to the safe plan, put required resource to the head.

• Upgrade jQuery to the latest v1 release, 1.12.3

==> I would ask other teams. We still use 1.7.2 in AlloyMVC. I don't want to break the alignment. But there is nothing prevent you using newer jQuery. Forms use the fundamental API of jQuery only.

• Add an abstraction around EPiServerFormsSection.Instance, something like IEPiServerFormsConfig, and register it in the DI container.

==> Sure, thank you. AFORM-676

• Add a config option to place the element's validation-span, before or after the label/input combo, in the element views, making for greater flexibility (and less need for customization) of element views.

==> It's bring more option to the  Editor, in EditView. And I don't think we should make the UI with a lot of rarely-use-options.

@Espen: I replied in that thread.

Just for arguments sake (I know, I love to argue), you choose to use a version of jQuery more than 4 years old, in your Product, based on the fact that your Example Site, uses it. That seems like a backwards way of doing things.

Also, if I choose to include my own jQuery, I can't choose where to output it, it will have to go in the <head>, since Forms outputs the "EPiServerForms_saveOriginalJQuery.js" script, only if it includes its own jQuery.

I get how you have to make decisions that affect the frontend of an EPiServer site, something that episerver in general doesn't do (apart from the wrapping divs around ContentAreas), and you need to be careful in doing so. My point is that you should make options for me to integrate Forms into a site, and give me as much freedom as possible, by making the product more configurable. And not implementing front end that goes against best-practice.

I agree that bringing more options into the editor is a bad idea, however, configuring general behavior could be implemented in config, and not on individual elements. Sure, I can override the views for Forms, and change the order, but my point is, I shouldn't have to if it can be easily done through configuration.

I found 2 bugs while solving a client problem:

1. "Multiple or single choice" element(when user has chosen multiple values eg. "value1, value2") and importing all form submissions to CSV both use comma as delimiter. CSV doesn't work correctly as a result.

Suggestion: Make csv use semicolon as a delimiter.

2. "Form submissions" view shows time one hour ahead(I am in Finland and i guess imported result is showing Swedish timezone) of the imported csv. Eg. Editmode timestamp is 11:09 and same entry on imported data is 10:09.

Hi  Stephan,

AFORM-709: We bundle jQuery latest v1 stable release,1.12.4, you will have it in Forms 3

FYI, we pick a version of jQuery based on what we had already carefully tested, not base on the fact of Example Site uses it. From the beginning of Forms development, there are more priority things than testing a newer jQuery to use (which does not bring a lot of benefit for us - Epi and partners). You still can replace it without any problem. I'm sorry that I did not make perfect solution at that time, because engineering is doing the best I can with limitted time and resources.

We will revisit in Performance review, to include JavaScript latest if possible. We gather feedbacks here (and other channel like creating support case, EMVP forum ...) to make options and as much freedom as possible. Thank you.

Hi Pasi Hulkko 

Hi Pasi Hulkko 

Hi 

Im a bit new to epi forms but is there a way of getting the id of the current invalid element ? not just the message text. 

I would like to move the error message to current invalid element instead and i dont want to compare text to find correct invalid element. I did find a fixed bug regarding adding error classes to invalid form and elements but i only get ValidationFail on the form tag. 

We mark the ValidationFail class on both invalid Forms and invalid element. You can search for $(".Form__Element.ValidationFail") for the invalid element DOM root.

In Forms 3.0, you can catch the jQuery event "formsStepValidated", AFORM-772

$(document).ready(function myfunction() {
            if (typeof $$epiforms !== 'undefined') {
                $$epiforms(document).ready(function myfunction() {
                    $$epiforms(".EPiServerForms").on("elementValidated",
                    function (e) {
                        console.log("elementValidated", e);  // e.isValid and e.element is the most important information.
                    });
                });
            }
        });

Thank you, my problem turned out to be js events not working properly in our solution when i extended the submit button element class. 

Goind to back track my actions and see if i missed something or you just cant extend submit button block right now. 

When will forms 3.0 be release on nuget feed? 

We are trying our best, and expect it should be 4th of July.

Hi. Any plans for putting all models (element implementations etc.) into the Episerver.Core package? Right now they're spread across all 3 packages and if I want to inherit from ie. NumberElementBlock in my models-project I still have to pull in all 3. Kinda defeats the purpose :)

Hi @ Espen

There definitely no plan to merge them into monolythic one package. There were many requests from developer to split them ;) . That's the purpose, to be developer friendly in Forms 3.

We can also update them seperately. A bug in the NumberElement implementation only needs a new Forms package (not the whole UI Core and Forms).

You want our builtin NumberElementBlock, you have to depend on EPiServer.Forms package. (you can simply forget Core and UI ;)  because installing Forms package auto install Core package and UI package).

Please tell me your purpose, your trouble and hassle (if any) when use Forms 3. We fight to solve it for you.

T.

Is there any way to extend the validation scripts? I'd like to get implement "ValidationSuccess" class when validation is successful.

Additionally, is there any particular reason this module uses some custom validation script instead of something like jquery.unobtrusive.validation, or similar?

"Is there any way to extend the validation scripts? I'd like to get implement "ValidationSuccess" class when validation is successful."

We receive some feedbacks of it. This will be in next release. 

Please give me your imagination about how to use jquery.validation with Forms. We will do our best to make Forms pluggable/play friendly with jquery.validation.

Please consider that validation in Forms can be defined (and plugged into form) in serverside (C#) code and work on both serverside and clientside.

This will be in next release.

That's great news.

Please give me your imagination about how to use jquery.validation with Forms. We will do our best to make Forms pluggable/play friendly with jquery.validation.

I thought the standard MVC implementation is easy enough to work with.

Please consider that validation in Forms can be defined (and plugged into form) in serverside (C#) code and work on both serverside and clientside.

Can you point me to some sample code? Thanks.

Dear @Nasir

You could browse a lot of samples and demo of Forms in these open sources projects

https://github.com/episerver/EPiServer.Forms.Samples (here we have Validation samples)

https://github.com/episerver/EPiServer.Forms.Demo

Hi, just a few things I've spotted whilst working with forms + captchas you might want to look at:

• Inside EPiServerForms.js, the validate function for "EPiServer.Forms.Implementation.Validation.CaptchaValidator" should be returning an object { isValid: true/false } rather than just true/false. Noticed the user wasn't being informed when they left the captcha field empty even though it looks like you were trying to handle this, should act like a required field.
• With reCAPTCHA it works great client side but if you have this on the form with JS disabled you can't submit the form at all.

Thanks, Aaron.

Thank you @Aaron

I file the bug for the first issue of CaptchaValidadtor

The reCAPTCHA for sure has to work with JS, it is requirement from Google because it is rendered by JS.

Hi,

We have been looking at creating custom validators to use with EPiServer forms and it seems that you cannot include the new validators on existing form elements.  Instead you must create a new element.  This means we have had to create an ExtendedTextElementBlock.

Rather than specifying at the block level which validators are avaliable it would be useful to have a method of attaching new validators to a block, or within the custom validator have a method that allows you to attach it to a specific subsection of blocks.

Thanks

Hi Andrew

I believe you are using quite old version. Please use version 3.0+, or 3.1 (next week).

You can see that the we opensource the Samples package here, with Elements and Validators in separated DLL. We did it exactly in the same situation that 3rd party developer has.

The DateTime and ReCaptcha validators are loaded with built-in elements (Text, Number, ...).

Hi Thach,

But what I would like to do is create a custom validator and then have it avaliable on one of the built in elements (Text).  This isn't shown (that I can see) in the samples, instead you have created a custom element DateTimeElementBlock and RecaptchaElementBlock 

Thanks

Sorry wasn't thinking for a moment there (there is a server side option though in the reCAPTCHA docs?), I guess we should look at putting some kind of <noscript> message in the template (for this element) to inform the user they need JS enabled to submit the form as its a little late in the process to get a validation error (via the ViewBag.Message) once they submit what they think is a complete form.

On another note, it would also be nice if the JS wasn't so tightly coupled to the CSS class names. I started implementing my own custom views for elements only to find out I need these specific class names to keep the JS working. You could use data-attributes (for example data-form-element or data-nav-next-step ) for this when looking for elements in your script allowing us to implement our own styles and class names then we just need make sure we have specific attributes in our html to allow your JS to keep working. Admittidly I'm a little pedantic when it comes to styling (casing and other rules which are project specific) and the BEM implementation here isn't great, it would just be nice to allow configuration of certain things which I think people have hinted at in previous comments.

Thanks, Aaron.

Regarding Bootstrap CSS classes. You can try this approach, but it's not officially supported. Do on your own risk :)

http://blog.tech-fellow.net/2016/09/05/apply-displayoption-for-episerver-forms-elements/

Peter, solution is to create a dummy / empty form somewhere in layout and hide it. This will make sure that necessary client resources are loaded. And then you can dynamically fetch form from the server and add it to DOM.

The problem(that I know of) is the Forms initialize method. It will listen for the document to be ready and then attach events to elements and initialize validators. Then there's the custom data injected in a script tag for each form.

The problem is not loading the required resources, its initializing them correctly.

/Peter

Yes, indeed.

/*
 * Hack to re-initialize EPiServer Forms script
 */
reInitEPiServerForms() {
    if (window.epi.EPiServer.Forms) {
        // have to reset this value, or the init script will not run the second time
        window.epi.EPiServer.Forms.__Initialized = false;
        window.epi.EPiServer.Forms.init();
    }
}

The initialize method itself uses "$(document).ready". I can not see how this should work without the normal document flow/events, or maybe I am missing something. I am ok with a "no it does not work", just want to see if it is possible.

/Peter

Did you include a dummy form as suggested? From what I managed to figure out from the JS code, the epi.EPiServer.Forms object is created and initialized when the page loads, and even after you reset the __Initialized value to false, the object still exists and the event handlers should still kick in when you try to submit the form. I managed to get this working on a single step form, but I have no idea how it would work in a multi-step form scenario.

Exactly what do you mean by a dummy form? For context, I am testing if EPiForms is usable while using https://github.com/turbolinks/turbolinks.

/Peter

Peter, see my comment above. You have to include "dummy/empty" form somrwhere on the page (and you can hide it via styles) in order for EPiServer to kick-in and initialize forms handers. Later when you dynamically fetch form and add it to DOM, initialized handlers should still work.

This is hacky, but we managed to get forms working..

One final question: By "dummy/empty" form do you mean an actual EPiServer form without any inputs?
Thanks for all the help.

/Peter

That is correct :)

@Aaron Mitchard - not sure if you are still having trouble making recaptcha work without js but i had the same issue and wanted to share with you, and anyone else working with recaptcha, what we did to get it working.

first off, you can technically use recaptcha without javascript, the details are here:
https://developers.google.com/recaptcha/docs/faq#does-recaptcha-support-users-that-dont-have-javascript-enabled

i took the example recaptcha control from the forms.samples project and added the html from google and added the following to the textarea element:

data-epiforms-element-name="<%: formElement.ElementName %>" name="<%: formElement.ElementName %>" class="Form__Element Form__CustomElement FormRecaptcha" id="<%: formElement.Guid %>"
the name and 'data-epiforms-element-name' attributes lets episerver forms find the control and pass the value to your custom validator on post back. and the classes make sure that the client side code sees the textbox as the control it needs to validate

hope this helps - let me know if you need help.

Sam

Regarding IE<9 support, I'm sorry but saying EPiServer doesn't support that doesn't stick - that support list relates to the editing interface. In the "Client browsing" support it says "

I'm sorry to say my impression so far of EPiServer Forms is that it's not fit for purpose, it's riddled with bugs and partial implementations. Can EPiServer please give this package more attention?

Dear @Tim Rodham: Forms is in active development. We (and I personally) always welcome any feedback and do our best to handle it. You can see that I try to hunt every threads on this forum (yes, I missed somes). Please give me your suggession (here or in separated thread to easiler track it) to help me improve it. There're many partners successfully integrate Forms with their solutions and we are here to help you achieve the same.

• On Jan 12th 2016, Microsoft ended support for IE < 11
• In this article System Requirement of Episerver, we said that

And there is a also Form-specific notification at the bottom

• Episerver Forms is only supported by MVC-based websites and HTML5-compliant browsers.

Forms, which is target HTML5 in the beginning, require modern browser (well, it's hard to say IE8, 9 is modern).

I know people might complain about it (customer having legacy system, big corp, banking, ...), we try to help as much as possible, and there is solution to gain decent result.

We are plan for AFORM-895, Create the ability to fall back to a non Js version per visitor

 - developer is able to disable the JS for users of IE8/9, per visitor

 - I hope it will solve your problem easier.

 - There is other guy met the same problemm, and his solution is here

@THACH Lockevn thank you for the response, I appreciate it is difficult to offer support for the older browsers but I would have thought for a front end feature a larger support base would have been applied. I didn't see the footnote in the requirements and like others have mentioned in this thread, I would have assumed an industry standard validation approach such as the MVC unobtrusive validation would have been used, which is supported in a wider range of browsers.

The lack of support for the display options feature of "normal" blocks and that I haven't found how to add other block types into the form have also fed my frustration.

Unfortunately we have had to take the decision to build our own custom version of this addon which resolves all of our issues, including IE8 support and full non-js support, and development on that has been completed. We will no longer be using EPiServer Forms.

As you are asking for suggestions, I'd likewise suggest a full rewrite, but that may not be preferrable for other customers who have already started using it.

EPiServer Forms - conditional form elements on other form element events

Hi Guys,I'm using Forms 4.2.1.0 and I'm trying to create a form where if a value is selected from a "selection" element another "text" elements are displayed.

Are any client side "element events" I can hook into similar to the "form events"?Are there any plans to introduce any "conditional elements"? 

I am stuck with this requirement so please if anyone can help me on this.

Looking forward for positive response.

Cheers

Sushant

Hi,
I don't know if it's the right place for this topic but I didn't see any thread about EpiServer.Forms and SQL Injection.
I use currently EPiforms 3.1 and I did a test with a free penetration test tool (OWASP ZAP 2.5) and got a warning regarding a vulnerability with a required text field (no regexp).

Here the message provided by the tool:
#############################################################################
The page results were successfully manipulated using the boolean conditions [ZAP AND 1=1 -- ] and [ZAP AND 1=2 -- ]
The parameter value being modified was NOT stripped from the HTML output for the purposes of the comparison
Data was returned for the original parameter.
The vulnerability was detected by successfully restricting the data originally returned, by manipulating the parameter
#############################################################################

I didn't see any trace of injection the form list (false/positive?).

Should I be concerned?

Regards

--------------8<-----------8<------------8<----------8<-----------8<------------8<------------

MODERATOR NOTICE: 

THIS THREAD IS NOW CLOSED, DO NOT POST HERE!

---

Please create new threads for your issues regarding Episerver Forms. It will help other users find what they need.

--------------8<-----------8<------------8<----------8<-----------8<------------8<------------